What we will be building. In this tutorial, I’m going to show you how to create a simple but amazing blog using , Vuex, and deploy to . Let’s get started. Vue Cosmic JS Netlify TL;DR Download the GitHub repo. Check out the demo. Prerequisites You will be required to install Node JS and npm before starting. Make sure you already have them installed. Getting Started: In this application, we are using as starting point. Fork and clone this repository we will look into it later on. First, we will setup the bucket in Cosmic JS. Snipcart Vue Blog Demo **Setup bucket:**To create the bucket, login to and click add ‘new bucket’. Cosmic JS Select start from scratch. Import Bucket Data Download this 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. bucket.json Now we will work on application. Integrate Cosmic JS As bucket is fully setup. Now we will integrate Cosmic JS back-end in forked repository. First of all, replace with this: https://github.com/snipcart/vue-blog-demo package.json Open the folder in Terminal and do After doing that, we need to setup Cosmic JS configuration in order to communicate with API. For that, we will create a file in folder. npm install. index.js /src/config/ After that replace the content of and in folder respectively. index.js prod.env.js /config/ prod.env.js Now Cosmic JS configuration is completed. We need to create a file at the root of the project. It will load all the variables into process.env. .env Changing Vue Resource Plugin to integrate Cosmic JS API Now app is almost there. We just need to do small tweaks in order to make it work properly. Replace with the code below. We are changing API endpoint in-order to call Cosmic JS back-end. src/main.js Replace with the code below and I will explain what we are doing here. src/plugins/resource/index.js In this modification, we are basically importing config we created before and changing the Endpoint URI for API requests to Cosmic JS. BlogFeed Replace in-order to map the data from Cosmic JS API to blog feed. We just have to do mapping properly as front-end code is independent of API calls. src/resources/BlogFeed.js BlogPost Similarly, replace It will make single post work perfectly. src/resources/BlogPost.js. Finalizing If you do 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 . These string will be used in the application. npm run dev static/api/blog.json As this blog application is static, so if you want to deploy it to Cosmic JS hosting you need to create a simple Node.js Express server. Create in the root of application and copy the below code in that file. server.js 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 hosting and 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 email on the successful deployment. You don’t need to enter any environment variables here as in Cosmic JS hosting 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 command enter and in directory enter . Finally, click on button. build 'npm run build' publish 'dist' 'Show advance' After clicking the advance button, you need to add . Here we have to do it manually. Cosmic JS hosting do it automatically for us. 3 environment variables Add there. You can get these values from Settings->Basic Settings. Just paste the values there and press . It will be deployed in few minutes! COSMIC_BUCKET, COSMIC_READ_KEY & COSMIC_WRITE_KEY Deploy Site Conclusion This is a simple blog app built using vue, vuex, and Cosmic JS. At the end, 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!

How to build a blog with Cosmic JS and React

How to build a simple blog using Vue, Cosmic JS and deploy to Netlify

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