What we will be building Building curated collections of resources and tools is an easy way to gain visibility in your community. In this tutorial, we’re going to build a simple content curation website powered by . You’ll see how easy it is to create relational database models for our content with Cosmic and also how quick we can get from scratch to deployment. Cosmic JS We’ll use Vue JS as our frontend-framework and the flexbox-powered Bulma to make everything look pretty. So let’s get started. TL;DR Download the code from Github Repo Checkout the Demo Pre-requisites You need to have node and npm installed in your machine already. If not, visit and install the latest stable version. node js website Getting Started For our project, it makes sense to build our backend models first. Setup Cosmic JS backend Login to your Cosmic JS dashboard and select ‘Add new Bucket’. In the next screen, provide a name for your bucket and select ‘Start from scratch’. We now have our bucket setup and need to add our content. But first, we need to model how our content will be structured. We’ll add two object types for this. Categories and Resources. Click on ‘Add object type’ from the menu. We don’t need any metafields for categories, so just add the singular name as ‘Category’ and save the object type. Similarly, create an Object with singular name ‘Resource’. We need to define a few metafields for each Resource. Click on Metafields and add the following fields. A Plain text field with title ‘Link’ and value ‘http://’ An Image/File field with title ‘Image’ A Single Object Relationship with title ‘Category’ and ‘Category’ as the object type to choose from. We use the last field to assign a category to a resource. Now save the object type. We now have the content structure in place. You can now add categories and resources from their appropriate tabs. Installing the Demo Having the content in place, we can now focus on the source code of the application. The source code of the project demo is located at . Get a copy in to your machine either by cloning the repository with or by clicking the download button in the github page. https://github.com/cosmicjs/vue-content-curation-app git clone Once you have the repository, into the directory and install the project dependencies with . There is one more step you need to do to get the app running. Copy and rename the file in the root folder to and fill in the bucket configuration variables - which you can obtain from the Settings → Basic Settings tab in your cosmic dashboard. (you can skip write_key if you want as we are not writing anything yet to our cosmic js backend from the app) cd npm install .env.sample .env Once this is done, you can start the app in development mode with ,and you will be able to access it at by default, or at the port you defined in file. npm run dev localhost:8080 .env To build the app for production, run . The built app ready for serving will be generated in to the ‘dist/’ folder. To serve the app, run , which will start an Express server and serve our built files at by default, or at any other port you defined in the file. npm build npm start localhost:5000 .env Understanding the source code The project is scaffolded with vue-cli, which gives us a nice structure to work with. The only major addition to this is the file, which was included for deployment within Cosmic JS. server.js As you can see, this will start an Express server and serve our folder as static files. The folder is where the production app will be built into, as mentioned before. dist/ dist/ Inside the folder, there are four folders. src/ The directory is for the static assets like images, stylesheets etc. We have a file inside the folder where you can define global styles, and also modify any Bulma variables as needed. assets/ main.scss assets/styles/ The folder contains two component files. A List component for category list and a Single component for each category page. components/ The folder contains the vue-router configurations and folder contains a cosmic bucket initialization file, which we can import and use in components router/ resources/ Deploying the App Since Cosmic JS does the heavylifting in the backend side and there is no database to configure, deployment is a walk in the park. We’ll look into deployment using cosmic JS hosting. Go to your bucket in your cosmic dashboard and navigate to Settings → Deploy Web App. Supply your Github repository url and the branch to be deployed. Cosmic makes the three enviroment variables we set early available automatically on every deployment, so you don’t need to enter it manually. There are other deployment options that you can explore, including setting custom enviroment variables, adding custom domain and ssl etc. After you are finished, just click on ‘Deploy to Web’ and the site will be deployed. You’ll receive an email on successful deployment Conclusion I hope you can see what’s possible with CosmicJS with this short tutorial. By taking away the heavy-lifting in the backend, Cosmic essentially speeds up the process and reduces hassle in building content driven websites and apps. If you have any questions, feel free to reach out to us on or join our community. Twitter Slack

Slack

Twitter

How to build a Tour Diary App using Next.js and Cosmic JS

How to build a content curation website with Vue and Cosmic JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps