How to build a content curation website with Vue and Cosmic

Community Articles
Community Articles How to build a content curation website with Vue and Cosmic

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 Cosmic. 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.

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 node js website and install the latest stable version.

Getting Started

For our project, it makes sense to build our backend models first.

Setup Cosmic backend

Login to your Cosmic 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.

  1. A Plain text field with title ‘Link’ and value ‘http://’
  2. An Image/File field with title ‘Image’
  3. 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 https://github.com/cosmicjs/vue-content-curation-app. Get a copy in to your machine either by cloning the repository with git clone or by clicking the download button in the github page.

Once you have the repository, cd into the directory and install the project dependencies with npm install . There is one more step you need to do to get the app running. Copy and rename the .env.samplefile in the root folder to .env 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 backend from the app)

Once this is done, you can start the app in development mode with npm run dev ,and you will be able to access it at localhost:8080 by default, or at the port you defined in .env file.

To build the app for production, run npm build. The built app ready for serving will be generated in to the ‘dist/’ folder. To serve the app, run npm start, which will start an Express server and serve our built files at localhost:5000 by default, or at any other port you defined in the .env file.

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 server.js file, which was included for deployment within Cosmic.

As you can see, this will start an Express server and serve our dist/ folder as static files. The dist/ folder is where the production app will be built into, as mentioned before. 

Inside the src/ folder, there are four folders.

The assets/ directory is for the static assets like images, stylesheets etc. We have a main.scss file inside the assets/styles/ folder where you can define global styles, and also modify any Bulma variables as needed.

The components/ folder contains two component files. A List component for category list and a Single component for each category page.

The router/  folder contains the vue-router configurations and resources/ folder contains a cosmic bucket initialization file, which we can import and use in components

Deploying the App  

Since Cosmic 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 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 Twitter or join our Slack community.

You may also like


In this article I’m going demonstrate how to publish new Objects containing survey responses in Cosmic as they are completed in Typeform. Click here to connect Typeform to Cosmic using Zapier.
Exporting Cosmic-powered data to CSV is easy with this new extension 🚀
In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic rebuilds on content edits using Cosmic Webhooks.
One of the largest problems I’ve faced while working on projects is having to deal with integrating content and events into third-party services.It’s time consuming, and as the demands in the application in question grows, so does the mental strain in having to keep up to pace with all the changes
Every blog needs a solid Content Management System (CMS). This allows content owners to control their content without having to hire a developer to make every single change to their site. Cosmic is a great choice for a CMS. In this how-to article, we’ll connect a React/Next.js app to Cosmic .
Add the power of Algolia search to your Bucket. This Extension enables you to sync your Cosmic Objects with Algolia, making your data searchable. Set up automatic syncing to automatically add / edit / remove content from Algolia. Follow the simple steps below to install and setup Algolia.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales