How to Build a Simple Blog using Vue and Cosmic JS + Deploy to Netlify
In this tutorial, I’m going to show you how to create a simple but amazing blog using Vue, Vuex, Cosmic JS and deploy to Netlify. Let’s get started.
TL;DR
Download the GitHub repo.
Check out the demo.
Prerequisites
You will be required to install NodeJS and npm before starting. Make sure you already have them by typing node -v and npm -v in your terminal.
Getting Started:
In this application, we are using Snipcart Vue Blog Demo as starting point. Fork and clone this repository, and we will look into it later on. First, we will set up the bucket in Cosmic JS.
Setup a bucket:
To create the bucket, login to Cosmic JS and click add ‘new bucket’.
Select start from scratch.
Import Bucket Data
Download this bucket.json file. And in Settings > Import / Export Data, click “Add Import File” and choose the downloaded file. It will import all the Object Types and required data.
Now we will work on the application.
Integrate Cosmic JS
The bucket should be fully setup. Now we will integrate the Cosmic JS back-end in the forked https://github.com/snipcart/vue-blog-demo repository. First, replace the package.json with this:
Open the folder in the Terminal and do npm install. After that finishes, we need to setup Cosmic JS configuration in order to communicate with the API. For that, we will create a file index.js in /src/config/ folder.
After that replace the content of index.js and prod.env.js in /config/ folder respectively.
index.js
prod.env.js
This completes the Cosmic JS configuration. We need to create an .env file at the root of the project. It will load all the variables into process.env.
Changing Vue Resource Plugin to integrate Cosmic JS API
Our app is almost there. We just need to do some small tweaks in order to make it work properly.
Replace the code src/main.js with the code below. We are changing an API endpoint in order to call the Cosmic JS back-end.
Replace src/plugins/resource/index.js with the code below, and I will explain what we are doing here.
In this modification, we are basically importing config we created before and changing the Endpoint URI for API requests to Cosmic JS.
BlogFeed
Replace src/resources/BlogFeed.js in order to map the data from Cosmic JS API to the blog feed. We just need to do the mapping properly since front-end code is independent of API calls.
BlogPost
Similarly, replace src/resources/BlogPost.js. It will make single post work perfectly.
Finalizing
If you do npm run dev in the terminal, it will work. But before we start deploying, we need to finalize few things. Replace title of the blog, Author Label and Post label in static/api/blog.json. This string will be used in the application.
Since this blog application is static, if you want to deploy it to Cosmic JS hosting you need to create a simple Node.js Express server. Create server.js in the root of application and copy the below code in that file.
Everything is done 😃. Additionally, I added TitleComponent to change document.title. You can check the code in my repository.
Deployment
Now I will show how you can deploy this application on Cosmic JS and use free hosting from Netlify. You need to push this application code to the repository on GitHub.
Deploying on Cosmic JS Hosting
Go to your bucket in Cosmic JS dashboard and click Settings->Deploy Web App.
In the new window, enter your repository URL and branch name. After adding all the needed configuration, press “deploy web app”. It will be deployed and you will receive an email after a successful deployment. You don’t need to enter any environment variables here as in Cosmic JS hosting, because everything is already done for us.
Deploying on Netlify
Register on Netlify and click “New site from Git”. Please choose the Git provider there. In my case, I will use Github.
After successful authentication, all of your repositories will show up. Pick the right repository.
Now you need to select your branch and provide some configurations in-order to make it work properly. After selecting branch successfully, in build command enter 'npm run build' and in publish directory enter 'dist'. Finally, click on 'Show advanced' button.
After clicking the advance button, you need to add 3 environment variables. Here we have to do it manually, but the Cosmic JS hosting does it automatically for us.
Add COSMIC_BUCKET, COSMIC_READ_KEY, and COSMIC_WRITE_KEY there. You can get these values from Settings > Basic Settings. Just paste the values there and press Deploy Site. It will be deployed in few minutes!
Conclusion
This is a simple blog app built using Vue, Vuex, and Cosmic JS. We also learned how to deploy this app to Netlify as well as Cosmic JS hosting. I hope you liked the tutorial and will be helpful for you. Cheers!
