Forem: Ankit

How to Build a JAMstack Website using Vue.js, Nuxt.js and Cosmic JS

Ankit — Tue, 18 Jun 2019 16:23:23 +0000

In this tutorial, we are building a JAMstack website with Cosmic JS. Let's first define our JAMstack: 'J' stands for JavaScript, our application uses Vue.js. 'A' stands for APIs, and we are using the powerful APIs of Cosmic JS. 'M' stands for Markup, which is Nuxt.js in this example. For this tutorial, we will be building a simple fitness studio website. In the end, we will deploy it on Netlify which gives serverless backend services and hosting. Let's get started.

TL;DR

Checkout the demo

Download the codebase

Introduction

We are building a JAMstack website with the powerful APIs of Cosmic JS. This website is about fitness and the body. The first page is dynamic with some navigations provided by Vue.js. On the left side navigation, you will find the link to the blog, whose data is also coming from the Cosmic JS via the Cosmic JS APIs. Let's start now with the requirements.

Requirements

The one and the only requirement is Node.js. Install it on your system to run npm commands.

Getting Started

Here we are using npm but you can also use yarn to install packages. So if you have installed above software, run the following command to a quick start:

npx create-nuxt-app jamstack_app

Here jamstack_app is your desired name of the app. Now go to the root of the created folder, and run the following command to run it in development:

npm run dev

Now visit: http://localhost:3000/ to view the project in development mode.

Learn more about Nuxt.js quick starter kit here: Nuxt.js Starter Kit

Folder Structure

After creating the app, you will get the same folder structure as given in the picture:

Let's explain the main folders and files of this structure. package.json file contains the record of all modules installed in your project. Static folder contains the static files used in the project like logo and images. Pages folder contains the pages like home page and blog etc. node_modules has all modules installed and layout contains styling of the project. Config folder is created by us to save the config.js file which will be used at the time dynamic requests to the Cosmic JS server.

Configuration

We have generated the Nuxt.js app with the app generator but the main configuration is pending to make our app a complete JAMstack app. With the creation of the app, JavaScript and Markup part of the app completed. Now we are configuring the API part of the app that means the Cosmic JS part.

For this, you need a Cosmic JS account. Sign up for Cosmic JS official website, it is totally free. Then create a free bucket and create your first object type: 'blogs'. Or you can import a built-in bucket, way to import it is given in the below heading.

Now click the basic setting option in your dashboard, it will open your basic setting page as shown above. Note down your bucket slug, bucket_id. Now generate the read and write keys and save them on your computer. Now save them in your project also. For this create a config folder and create a config.js file in it and save as given below:

In-built Bucket

If you don't want to create a new bucket, then you have an option to import a readymade bucket. For this, download the bucket.json file from our Git codebase and import it from your dashboard from the Import/Export option, check below image for visual help:

Home Page

Let's get started with the first page that is the home page. In this we will render the dynamic data from Cosmic JS server with APIs, it will show you the Vue.js part of the website. Here we are going to write the detail of our website and will implement navigation in the header of the website as well as in the bottom part will give a button to navigate to blog. Check out the code of homepage at location: pages/index.vue

This page is a template plus vue.js code and pure dynamic in nature. Here we applied a link at the bottom which navigates to the blog page and this blog page is also pure dynamic in nature.

The Layout of the Website

The complete layout of the app is coded in a single file for good structure. Here we are customizing the header, footer and other color schemes of the app. Check out the code for layout layouts/default.vue

Here we defined the body color of the website along with the header, footer, and navigational effects. In the navigation, we have given route to blog page and route to the home page as well. In the header of the app, we have given navigation to home to the title of the website.

Blog Page

This is the second page of our website, it handles the dynamic fetching of the data from Cosmic JS server with the help of Cosmic JS APIs. First of all, check the code and then we will explain it. Code is placed at the location: pages/blog.vue

There are two part of the page, first is template and second if JavaScript part. In the template, we have given the route to the home page with the back button and rendered the title and body of the blog.

In JavaScript part, we have made of a GET request to the Cosmic JS server with the help of Cosmic JS API. This API is the combination of the static URL, bucket slug and object type. In GET request, read key is necessary to get the data from the server. After a successful request, we manipulated the data and passed to variables as shown in the code.

Static Folder

In the codebase, check out the static folder. As the name describes, it contains the static data and in our case, it contains the static images of our project. As you know our front page id totally static, image shown on the front page resides in this folder. In the same way, any static image or logo which will be used in the project must be placed here.

What Have We Built?

We have built a JAMstack website with the powerful APIs of Cosmic JS. In JAMstack:

'J' stands for JavaScript and here Vue.js used as JavaScript part of JAM,
'A 'stands for API, here Cosmic JS used as the API part of JAM,
Meaning of 'M' is Markup, here Nuxt.js is used as the markup.
Here the main part is the API part, we have made a GET request with the help of which and got the quick response. This request made with the help of axios module and then JSON data manipulated easily. Format of the Cosmic JS API response is very simple to handle.

Deployment to Netlify

We have built an app with Vue.js, Nuxt.js, and Cosmic JS, but it is not a pure JAMstack app until we can deploy the static assets to a CDN. For this example, we will deploy it to the serverless backend service provider Netlify.

Install the Netlify CLI and Nuxt CLI:

npm i -g netlify-cli
npm i -g nuxt
Build the static files

npm run build

Then deploy to Netlify. You will be prompted to select the folder. Type dist to deploy the dist folder.

netlify deploy

Conclusion

With the help of Cosmic JS you can create powerful applications. In this example, we were able to build a JAMstack application with the API power of Cosmic JS. If you have any comments or questions about building apps with Cosmic JS, reach out to us on Twitter and join the conversation on Slack.

How to build an Ecommerce Website using Gatsby and Cosmic JS

Ankit — Wed, 01 May 2019 17:03:02 +0000

This tutorial will show you how to build an e-commerce app using Gatsby and Cosmic JS. This app will give you a basic idea of how we can integrate an e-commerce app with Cosmic JS to store our data. In this app example, all order data will be stored in the Cosmic JS database and its speed will charm you. Let's get started.

TL;DR

Checkout the demo

Download the codebase

Introduction to the App

Here we are building an e-commerce app in Gatsby with the backend power of Cosmic JS. We will make some navigation based on an e-commerce website and at the end placed order will be saved on the Cosmic JS database. Cosmic JS provides npm module for JavaScript technologies. Also, it provides API endpoints with the help of which you can directly apply CRUD operations on it. Here we are using API endpoints to store our data.

Requirements

Node.js must be installed on your system, it is required to run npm commands. Choose its latest version and install it on your system.
After node.js, install Gatsby CLI on your system globally. You can find it here: Gatsby CLI

Let’s Get Started

We assumed that you have installed the above software and CLI. Now run the following command to create a new Gatsby app:

gatsby new Gatsby-Ecommerce

After executing this command successfully, it is ensured that you have created a new Gatsby app with the name "Gatsby-Ecommerce". Now to start this, execute the following command from the terminal:

npm start

It will run your app and opens the port: http://localhost:8000/

Configuration with Cosmic JS

Cosmic JS is two in one service provider that means it gives the facility of database and server as well. So you need to signup for Cosmic JS first and create a new bucket with any name you want, here we created the bucket with the name Gatsby Ecommerce. Now it is time to create an object type, which means to the data management. Create object type named orders, All orders will be stored in this object. Now we have to do some basic setting, for this goto basic setting in your dashboard. Have a look at the below screenshot:

Here you can see the read/write keys fields and other IDs. Click on generate read and write keys and save on any text file along with bucket ID and slug.

Now open your Gatsby project in any IDE, here I'm using Visual Basic Code. Now create a folder named config in root od the project and create a new file with name config.js inside the config folder and save the above IDs and keys in the following format:

It is important for you to manage your project properly, so have a look at the screenshot of the folder structure of the project:

Inbuilt Bucket

You can also use an inbuilt bucket. For this, you have to import that inbuilt bucket in your Cosmic JS account. Here we are providing our bucket for you. You just need to follow these steps:

Go to our Git repo and download the bucket.json file
Now go to your Cosmic JS dashboard and click on basic settings
Click on Import/Export and click on Add import file, and import the bucket.json file

Now everything is ready, we can move to implement our app now

Home Page

Now we are going to build our app, and the main page is the home page. On this page, we will show the items for shopping. We will add a few items as this app will only show you the compatibility of Gatsby e-commerce app with Cosmic JS. Location of the home component is src/components/home.js

Check the code of the home component, then we will explain it.

This component is stateful, not a stateless component as most of the Gatsby components usually are.

In this component, we have shown three products which all are iPhones. Main this is that images of these iPhones are kept in a folder and called through a different component. At line number 91, 94, and 97 you can check how these are imported to home.

Here we used the bootstrap modal to show the specifications of the products. Let us explain the working of the main methods.

addToCart(): This is an event-driven method and pushes the product to an array when the user clicks on the add to cart.

handleiPhone8Close() and handleiPhone8Show(): These are the handlers for bootstrap modals which are used to show the specifications of products.

iPhones Component

The iPhone folder has three components named iphone8.js, iphonex.js, and iphonexs.js. These components only used to add images to other components. We used these components in home page. Actually, these components use for this purpose which makes the images loading very fast on websites. Check the code of one image component: components/iPhones/iphone8.js

Cart Component

When the user added products to the cart and click the Show Cart button, then flow of the app goes to another page cart.js. Let's check the code of this page: src/pages/cart.js

Let us explain each method of cart.js:

getProducts(): In this method, we are getting the products which are stored in the cart. For cart, we temporary stores the products in local storage. That means this method is getting the products from local storage.

checkingCart(): This method is checking that which product is added to the cart that means this method is filtering the products and calculating the price.

onSubmit(): This is an event-driven method, which collecting the details of the order along with user billing details and passing to the method placeOrder() in the cosmicService.

Cosmic Service

This is the only service in this app which hits the Cosmic JS API and stores the data to Cosmic JS database. Check the code: src/services/cosmicService.js

There is only one method in this service named placeOrder() which accepts the seven arguments. It hits the post request to the Cosmic JS server to save the data. Here we are providing write access key for taking the permission of writing on the Cosmic JS database. This is an example of storing information in Cosmic JS; however, it's never advised to store credit card data in Cosmic JS.

What Functionality We Have Implemented?

Till now we have implemented the complete functionality on the development server. That means we can use the complete functionality of the app in development mode. Because it is a Gatsby app created with npm CLI, so it is deployable on any server which allows deployment from node.js app. Here we deployed our app on Heroku server.

We created this app with Gatsby CLI and used React.js also to make some components stateful. After using this app, you will understand the power of Cosmic JS because of its blazing speed.

Conclusion

With the help of Cosmic JS we can create powerful apps and can use the Cosmic JS database for fast data processing. Here we created and configured a Gatsby.js app with Cosmic JS without any difficulty. You don't need to install any extra efforts to configure and use Cosmic JS APIs.

For any query or comment related to building apps in Cosmic JS, reach out to us on Twitter and join the conversation on Slack.

How to Build a PWA in React.js and Cosmic JS

Ankit — Tue, 05 Feb 2019 17:53:58 +0000

In this tutorial I will show you how to build a progressive web app using React.js and Cosmic JS. Our PWA will respond with status 200 when you are offline. The app will attain the last state of data and display it to you when you are offline. We will start with the basics and complete the app in full details. After completion we will deploy it to the Cosmic JS App Server, so let's get started.

TL;DR

Checkout the demo
Admin Credentials:
email: admin@abc.com
password: admin

Download the codebase

What are We Building?

As the title explained we are building a progressive web app (PWA) which will display news published by an admin. Let's start by explaining what a PWA is in simple words:

A PWA is a ordinary website that has some extra and unique features which make it extraordinary. Here are those features:

-> You can use these apps while you are offline, that means these apps give a response code 200 while internet is disconnected
-> Second most important feature is that you can install it on your device ( either desktop or mobile )
-> These apps are fully responsive in nature
We will be implementing this app using React.js with the power of Cosmic JS. Let's start.

Also Read: Best Phone Tracker App Without Permission

Requirements

Node.js must be installed on your system to to run npm commands, with the help of which we will install react app. For more information, you can refer to React Docs.

Getting Started

Now that our system is configured with the required modules and tools, we are going to create a progressive web app project in React.js using Cosmic JS. Go to your any specific folder where you want to place your project and open console (terminal) and type the following command:

npx create-react-app react-pwa

here react-pwa is the name of your app and then goto created folder react-pwa and run command:

npm start

It will compile your basic React.js app and automatically opens in default browser. By default it runs on the port number 3000: http://localhost:3000/

Configure React App with Cosmic JS

Till now, we have just implemented the front-end part of the PWA, now it is time to configure the server i.e. Cosmic JS server and database. It gives two in one facility.

First of all, signup on Cosmic JS for free and create your first Bucket. Now create an Object-Type, which in our case is Admin. Similarly create two more object types named 1) News and 2) Comments. These three object types have different purposes: Admin will save the credentials of admin, News will save the news published by admin and Comments will save the comments posted by users.

Now go to Settings > Basic Settings and generate read_key as well as write_key, and save all information of this page in a separate file on your system. Now place all of this information in the folder of your project and path will be: src>config>config.js

To manage your project properly, you should create different folders for components, services, config files, css and images. It will help any third person to understand your code properly. All of these folders should reside in src folder. So create them first and jump to next step.

Ready Made Bucket

For this project you can directly import a bucket to your dashboard, in that bucket we have already created object-types. You have to download bucket.json from our git repo and then just follow the steps: Choose default bucket > Go to Settings > go to Import / Export and click the button "Add import file". It will import the bucket.json file.

Here we have created the platform to implement our PWA, so let's move to the next one.

Admin Login

In our bucket, there is an object-type "Admin". Create an object with title admin, and metafields email & password. You can give the values of email and passwords according to you. Here we gave email: admin@abc.com and password: admin. Later you can use them for admin login in our demo.

Create a login page for admin in src>components>login.js

On this page we are simply logging the admin in. We have statically created the email and password in the object-type "admin" and with those credentials we are logging him in. Here we imported the authentication service and in the onSubmit() function we are calling the login() function which is declared in the authentication service. In componentDidMount() we simply applied navigation when admin already logged in.

Dashboard Component

In this component we simply displayed the three links: Home, Add News and Logout. From here admin can navigate to main page, of can add a news or can logged himself out.

On loading we applied navigation which will take the admin to home page if he is logged out and still trying to access this page. On logout() function we cleared the local storage and on the link Add News we navigated the admin to addnews.js. Location of this file is: src>components>dashboard.js

Add News

This component is accessible only for admin. He can post news over here. He can add title, description and body of the news. It will save the complete thread to object-type 'news' on the Cosmic JS server. Location of this component is: src>components>addnews.js

Home Page

On home page we are displaying all news which are published by the admin. First of all check its coding:

This is the news.js and it is fetching as well as displaying the news on the home page of our app. We are explaining the working of getNews() method. If your device is online, then it is fetching data from backend and displaying on the template and also saving it on browser for offline use too. If the device is offline, then it will get the saved data from browser memory and will show to the user.

Here you are seeing the title and description of the news and click to "Complete News" to read full story. This link will take you to next component:

Single News Component

This component is fetching the single news which you clicked from the home page. Check its coding first:

It is displaying the single news as well as there is an option of comment also. Comments related to the post are displayed here and you can add comments also. singleNews() method is fetching the news at one time and we applied a filter to get the selected news. allComments() function is getting all comments and filtering the comments related to this single post only.

Services

There are two services named authentication service and news service. Let us explain them one by one:

Authentication Service: This is only for logging the admin in. There is one method defined which is searching the email and password supplied the the login page and returns the result to calling method.

News Service: This is the main service of this project which is handling almost everything here. Go through its coding first:

Let's explain its methods one by one:

addNews(): It takes four parameters: title, description, newsbody and date and saves on the object type news
getNews(): As the name specifies, it fetch all news from the object-type news
submitComment(): This method submits the comment in the object type "comment"
allComments(): This get the submitted comments in object-type "comments" on the Cosmic JS server

Data Modelling

We managed data on Cosmic JS properly, for this we created some object-types to understand the nature of each datum. Here is three object types : admin, news and comment. Admin stores the information of admin, and news stores the news published by admin. Comment object-type is storing the comments published by readers of our news app.

What Have We Built Till Now?

I want to make clear that our app is an ordinary app until now (in development mode); it doesn't have any PWA features, so let's start making it progressive in nature. When we created this app, it already created a file serviceWorker.js in the src folder, which handles the progressive nature of the app. At the time of online use, it automatically stores the static data of the app and reflects when the app is offline.

Our app is not behaving a PWA because in serviceWorker it is coded to become a PWA only in production mode. So make its build and then run build, you will get some messages in the console like this:

This is the static data capturing of the app. If you want to capture the dynamic data, you need to code it manually. We did this in the news.js file. We stored the app data when the app is online and it automatically called when app will be offline. So to enjoy its PWA feature, run the following commands:

npm run build

serve -s build

Our app is partial-progressive in nature now. It is storing data while offline but it can't be installed on the device yet. We'll make that happen in the next step.

Make App Complete PWA

To make it complete PWA, here is the final step. We need to edit manifest.json, which is present in the public folder. It should look like:

Here we added path of two icons, one for desktop and the other for mobile. Their size should be exactly the same and these two icons should be present in the public folder. Start_url is showing the path of build. This is the main basic coding of manifest and now our app is pure progressive in nature.

In ths above screenshot you can clearly check that Chrome browser is giving the option to install this React app on your system.

Now we are checking out app with lighthouse tool, which is provided by Google to check PWAs, check output of lighthouse below:

In report each milestone achieved by our app except 7th, which is an https related and will be fixed as we deployed it to our Cosmic JS server which supports HTTPs.

Deploy on Cosmic Server

Now our app is ready and needs some improvement before deployment on Cosmic server. Make sure the followings:

A public GitHub repo ( private also available if you have connected your Git account )
Heroku requirements should be matched You need to follow some steps:

-> Install express with command: npm install --save express
-> Modify your package.json file, and add the following code

Now create a file app.js in the root folder and add the following code in it

Finally you made all necessary changes and it is now ready to deploy. Now go to: bucket>setting>deployment and click button deploy to Cosmic. After successful deployment you will receive an email and click on "view app" button to view the app.

Verdict

It is clear that with the help of Cosmic JS we can create powerful apps and can deploy on their server without any server setting or configuration. Here we created and deployed our React.js progressive application on Cosmic server easily without any difficulty. You don't need to install any extra software to deploy over here.

For any query or comment related to building apps in Cosmic JS, reach out to us on Twitter and join the conversation on Slack.