In this tutorial, we are building a JAMstack website with Cosmic. Let&#39;s first define our JAMstack: &#39;J&#39; stands for JavaScript, our application uses Vue.js. &#39;A&#39; stands for APIs, and we are using the powerful APIs of <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. &#39;M&#39; 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&#39;s get started. TL;DR<a href="https://cosmicjs.com/apps/jamstack-fitness-website" rel="noopener noreferrer" target="_blank">Check out the demo</a><a href="https://github.com/cosmicjs/nuxt-jamstack-website" rel="noopener noreferrer" target="_blank">Download the codebase</a> IntroductionWe are building a JAMstack website with the powerful APIs of Cosmic. This website is about fitness and the body. &nbsp;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 via the Cosmic APIs. Let&#39;s start now with the requirements. RequirementsThe one and the only requirement is <a href="https://nodejs.org/en/">Node.js</a>. Install it on your system to run npm commands.&nbsp; Getting StartedHere 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:<code>npx create-nuxt-app jamstack_app;</code>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:<code>npm run dev</code>Now visit: <a href="http://localhost:3000/">http://localhost:3000/</a> to view the project in development mode.&nbsp;Learn more about Nuxt.js quick starter kit here: <a href="https://nuxtjs.org/guide/installation/">Nuxt.js Starter Kit</a> Folder StructureAfter creating the app, you will get the same folder structure as given in the picture:<img src="https://cdn.cosmicjs.com/b0f99950-8e01-11e9-8e40-370eb5e3d090-Screenshot-from-2019-06-13-23-02-43.png" style="width: 300px;" class="fr-fic fr-dib">Let&#39;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 server.&nbsp; ConfigurationWe 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 part.&nbsp;For this, you need a Cosmic account. <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">Sign up for Cosmic</a> official website, it is totally free. Then create a free bucket and create your first object type: &#39;blogs&#39;. Or you can import a built-in bucket, way to import it is given in the below heading.&nbsp;<img src="https://cdn.cosmicjs.com/4c233670-8d35-11e9-9d53-0d7baf38376b-Screenshot-from-2019-06-12-22-41-16.png" class="fr-fic fr-dib"> 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:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/e5f742e2526dff0dab690a232795e6e1.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/e5f742e2526dff0dab690a232795e6e1.js" class="embedly-card"></a></div>In-built BucketIf you don&#39;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:<img src="https://cdn.cosmicjs.com/b05f8a00-8d42-11e9-869f-cb5634810819-Screenshot-from-2019-06-13-00-16-34.png" class="fr-fic fr-dib"> Home PageLet&#39;s get started with the first page that is the home page. In this we will render the dynamic data from Cosmic 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: <code>pages/index.vue</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/4dd54f1ac5b63fab2322ff2ed62e8d70.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/4dd54f1ac5b63fab2322ff2ed62e8d70.js" class="embedly-card"></a></div>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 WebsiteThe 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. &nbsp;Check out the code for layout <code>layouts/default.vue</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/407620e4854910f37214f9faee0e1e59.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/407620e4854910f37214f9faee0e1e59.js" class="embedly-card"></a></div>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.&nbsp; Blog PageThis is the second page of our website, it handles the dynamic fetching of the data from Cosmic server with the help of Cosmic APIs. First of all, check the code and then we will explain it. Code is placed at the location: <code>pages/blog.vue</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/653b6f22b04c5ef541e2dcca70de91b5.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/653b6f22b04c5ef541e2dcca70de91b5.js" class="embedly-card"></a></div>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.&nbsp;In JavaScript part, we have made of a GET request to the Cosmic server with the help of Cosmic 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.&nbsp;<img src="https://cdn.cosmicjs.com/e066a130-8dff-11e9-bbbc-e3026215e4a7-Screenshot-from-2019-06-13-22-51-34.png" class="fr-fic fr-dib"> Static FolderIn 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.&nbsp; What Have We Built?<img src="https://cdn.cosmicjs.com/6ca5f420-912a-11e9-bc00-5fc34b01c111-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f39633962376633302d393132332d313165392d616636352d3935653930663332323632382d6e7578742d6a616d737461636b2e706e67.png" style="width: 100%;" class="fr-fic fr-dib">We have built a JAMstack website with the powerful APIs of Cosmic. In JAMstack:<ul><li>&#39;J&#39; stands for JavaScript and here Vue.js used as JavaScript part of JAM,</li><li>&#39;A &#39;stands for API, here Cosmic used as the API part of JAM,</li><li>Meaning of &#39;M&#39; is Markup, here Nuxt.js is used as the markup.&nbsp;</li></ul>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 API response is very simple
to handle.&nbsp; Deployment to NetlifyWe have built an app with Vue.js, Nuxt.js, and Cosmic, 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 <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a>.Install the <a href="https://www.npmjs.com/package/netlify-cli" rel="noopener noreferrer" target="_blank">Netlify CLI</a> and <a href="https://www.npmjs.com/package/nuxt" rel="noopener noreferrer" target="_blank">Nuxt CLI</a>:<pre>npm i -g netlify-cli
npm i -g nuxt</pre>Build the static files<pre>npm run build</pre>Then deploy to Netlify. You will be prompted to select the folder. Type <code>dist</code> to deploy the <code>dist</code> folder.<pre>netlify deploy</pre> ConclusionWith the help of Cosmic you can create powerful applications. In this example, we were able to build a JAMstack application with the API power of Cosmic. If you have any comments or questions about building apps with Cosmic, reach out to us on <a href="https://twitter.com/cosmic_js">Twitter</a> and join the conversation on <a href="https://cosmicjs.com/community">Slack</a>.

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

This tutorial will show you how to build an e-commerce app using Gatsby and Cosmic. This app will give you a basic idea of how we can integrate an e-commerce app with Cosmic to store our data. In this app example, all order data
will be stored in the Cosmic database and its speed will charm you. Let&#39;s get started. TL;DR<a href="https://cosmicjs.com/apps/gatsby-ecommerce-website" rel="noopener noreferrer" target="_blank">Check out the demo</a><a href="https://github.com/a9kitkumar/Gatsby-Ecommerce" rel="noopener noreferrer" target="_blank">Download the codebase</a> Introduction to the AppHere we are building an e-commerce app in Gatsby with the backend power of Cosmic. We will make some navigation based on an e-commerce website and at the end placed order will be saved on the Cosmic database. Cosmic 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.&nbsp; Requirements<ul><li dir="ltr"><a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> must be installed on your system, it is required to run npm commands. Choose its latest version and install it on your system.</li><li dir="ltr">After node.js, install Gatsby CLI on your system globally. You can find it here: <a href="https://www.gatsbyjs.org/docs/gatsby-cli/" rel="noopener noreferrer" target="_blank">Gatsby CLI</a></li></ul> Let&rsquo;s Get StartedWe assumed that you have installed the above software and CLI. Now run the following command to create a new Gatsby app:<code>gatsby new Gatsby-Ecommerce</code>After executing this command successfully, it is ensured that you have created a new Gatsby app with the name &quot;Gatsby-Ecommerce&quot;. Now to start this, execute the following command from the terminal:<code>npm start</code>It will run your app and opens the port: <a href="http://localhost:8000/"></a><a href="http://localhost:8000/" rel="noopener noreferrer" target="_blank">http://localhost:8000/</a> Configuration with Cosmic Cosmic is two in one service provider that means it gives the facility of database and server as well. So you need to signup for <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">Cosmic</a> 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:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67fc1480-6ab1-11e9-8e11-73687f4b8132-basic-setting.png" class="fr-fic fr-dib">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.&nbsp;Now open your Gatsby project in any IDE, here I&#39;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:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js" class="embedly-card"></a></div>It is important for you to manage your project properly, so have a look at the screenshot of the folder structure of the project:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4919a090-6ab2-11e9-82e0-8508380770be-folder-structure.png" class="fr-fic fr-dib"> Inbuilt BucketYou can also use an inbuilt bucket. For this, you have to import that inbuilt bucket in your Cosmic account. Here we are providing our bucket for you. You just need to follow these steps:<ol><li>Go to our <a href="https://github.com/a9kitkumar/Gatsby-Ecommerce">Git repo</a> and download the bucket.json file</li><li>Now go to your Cosmic dashboard and click on basic settings</li><li>Click on Import/Export and click on Add import file, and import the bucket.json file</li></ol><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8070290-6ab3-11e9-8e11-73687f4b8132-import-export-file.png" class="fr-fic fr-dib"> Now everything is ready, we can move to implement our app now Home PageNow 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. Location of the home component is <code>src/components/home.js</code>Check the code of the home component, then we will explain it.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js" class="embedly-card"></a></div>This component is stateful, not a stateless component as most of the Gatsby components usually are.&nbsp;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.&nbsp;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.&nbsp;handleiPhone8Close() and handleiPhone8Show(): These are the handlers for bootstrap modals which are used to show the specifications of products.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8d0f69d0-6b64-11e9-8c29-39fe44eff7e3-home-page.png" class="fr-fic fr-dib"> iPhones ComponentThe 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 <code>&nbsp;&nbsp;</code>for this purpose which makes the images loading very fast on websites. Check the code of one image component: <code>components/iPhones/iphone8.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js" class="embedly-card"></a></div> Cart ComponentWhen 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&#39;s check the code of this page: <code>src/pages/cart.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js" class="embedly-card"></a></div>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.&nbsp;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.&nbsp;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.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8654cf0-6b68-11e9-8c29-39fe44eff7e3-place-order.png" class="fr-fic fr-dib"> Cosmic ServiceThis is the only service in this app which hits the Cosmic API and stores the data to Cosmic database. Check the code: <code>src/services/cosmicService.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js" class="embedly-card"></a></div>There is only one method in this service named placeOrder() which accepts the seven arguments. It hits the post request to the Cosmic server to save the data. Here we are providing write access key for taking the permission of writing on the Cosmic database. This is an example of storing information in Cosmic; however, it&#39;s never advised to store credit card data in Cosmic.&nbsp; 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 because of its blazing speed.&nbsp; Conclusion With the help of Cosmic we can create powerful apps and can use the Cosmic database for fast data processing. Here we created and configured a Gatsby.js app with Cosmic without any difficulty. You don&#39;t need to install any extra efforts to configure and use Cosmic APIs. For any query or comment related to building apps in Cosmic, reach out to us on <a href="https://twitter.com/cosmic_js">Twitter</a> and join the conversation on <a href="https://cosmicjs.com/community">Slack</a>.

How to build an Ecommerce Website using Gatsby and Cosmic

In this tutorial I will show you how to build a progressive web app using React.js and <a href="https://cosmicjs.com/">Cosmic</a>. 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 App Server, so let&#39;s get started. <h3>TL;DR</h3><a href="https://cosmicjs.com/apps/react-pwa-with-authentication" rel="noopener noreferrer" target="_blank">Checkout the demo</a> Admin Credentials: email: admin@abc.com password: admin<a href="https://github.com/cosmicjs/react-pwa" rel="noopener noreferrer" target="_blank">Download the codebase</a> 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&#39;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:<ul><li>You can use these apps while you are offline, that means these apps give a response code 200 while internet is disconnected</li><li>Second most important feature is that you can install it on your device ( either desktop or mobile )</li><li>These apps are fully responsive in nature</li></ul>We will be implementing this app using React.js with the power of Cosmic. Let&#39;s start. Requirements<a href="https://nodejs.org/en/">Node.js</a> 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 <a href="https://reactjs.org/docs/getting-started.html">React Docs</a>. Getting StartedNow 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. Go to your any specific folder where you want to place your project and open console (terminal) and type the
following command:<code>npx create-react-app react-pwa</code>here react-pwa is the name of your app and then goto created folder react-pwa and run command:<code>npm start</code>It will compile your basic React.js app and automatically opens in default browser. By default it runs on the port number 3000: <a href="http://localhost:3000/">http://localhost:3000/</a> Configure React App with CosmicTill now, we have just implemented the front-end part of the PWA, now it is time to configure the server i.e. Cosmic server and database. It gives two in one facility.&nbsp;First of all, <a href="https://cosmicjs.com/signup">signup on Cosmic</a>&nbsp; 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.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e4b5bb60-2264-11e9-9c47-091292362f7f-basic-setting.png" class="fr-fic fr-dib"> Now go to <code>Settings &gt; Basic Settings</code> 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: <code>src&gt;config&gt;config.js</code> <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/015276ef3bfc8945670841dc8c1c38c7.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/015276ef3bfc8945670841dc8c1c38c7.js" class="embedly-card"></a></div>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 BucketFor 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 <a href="https://github.com/a9kitkumar/cosmicjs-pwa" rel="noopener noreferrer" target="_blank">git repo</a> and then just follow the steps: Choose default bucket &gt; Go to Settings &gt; go to Import / Export and click the button &quot;Add import file&quot;. It will import the bucket.json file.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6aef9c00-2265-11e9-8a29-e5a70456d705-bucket-import.png" class="fr-fic fr-dib"> Here we have created the platform to implement our PWA, so let&#39;s move to the next one. Admin Login<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b8f3fdb0-2265-11e9-8223-85059151b988-admin-login.png" class="fr-fic fr-dib"> In our bucket, there is an object-type &quot;Admin&quot;. Create an object with title admin, and metafields email &amp; password. You can give the values of email and passwords according to you. Here we gave email: <a href="mailto:admin@abc.com">admin@abc.com</a> and password: admin. Later you can use them for admin login in our demo.&nbsp;Create a login page for admin in <code>src&gt;components&gt;login.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/389d1ae6c54df7b633901119b16a7f45.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/389d1ae6c54df7b633901119b16a7f45.js" class="embedly-card"></a></div>On this page we are simply logging the admin in. We have statically created the email and password in the object-type &quot;admin&quot; 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 ComponentIn 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.&nbsp;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: <code>src&gt;components&gt;dashboard.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/f505a397efaef92b6dab51e4e07f82dd.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/f505a397efaef92b6dab51e4e07f82dd.js" class="embedly-card"></a></div>Add NewsThis 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 &#39;news&#39; on the Cosmic server. Location of this component is: <code>src&gt;components&gt;addnews.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/e576914d1663b013568dc80e4122214a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/e576914d1663b013568dc80e4122214a.js" class="embedly-card"></a></div>Home PageOn home page we are displaying all news which are published by the admin. First of all check its coding:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/678fb3b790a10e1b1b4781f7023b2fa4.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/678fb3b790a10e1b1b4781f7023b2fa4.js" class="embedly-card"></a></div>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.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/294b4c80-2266-11e9-a6c1-df07cd8ae9cb-home-page.png" class="fr-fic fr-dib"> Here you are seeing the title and description of the news and click to &quot;Complete News&quot; to read full story. This link will take you to next component: Single News ComponentThis component is fetching the single news which you clicked from the home page. Check its coding first:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/992c502534877b9e21abccdf5020d562.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/992c502534877b9e21abccdf5020d562.js" class="embedly-card"></a></div>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. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/afc59180-2266-11e9-8223-85059151b988-single-post.png" class="fr-fic fr-dib"> ServicesThere are two services named authentication service and news service. Let us explain them one by one:Authentication Service:&nbsp;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.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/86d155522dc1a3faffeff058ae0e3dbf.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/86d155522dc1a3faffeff058ae0e3dbf.js" class="embedly-card"></a></div>News Service:&nbsp;This is the main service of this project which is handling almost everything here. Go through its coding first:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/c039fad9044e6367155d398b6a55b10a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/c039fad9044e6367155d398b6a55b10a.js" class="embedly-card"></a></div>Let&#39;s explain its methods one by one:<ul><li>addNews(): It takes four parameters: title, description, newsbody and date and saves on the object type news</li><li>getNews(): As the name specifies, it fetch all news from the object-type news</li><li>submitComment(): This method submits the comment in the object type &quot;comment&quot;</li><li>allComments(): This get the submitted comments in object-type &quot;comments&quot; on the Cosmic server</li></ul> Data ModellingWe managed data on Cosmic 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. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2a6e2c30-2267-11e9-8a29-e5a70456d705-object-types.png" class="fr-fic fr-dib"> 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&#39;t have any PWA features, so let&#39;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.&nbsp;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: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d3610ec0-2267-11e9-a6c1-df07cd8ae9cb-console-msgs.png" class="fr-fic fr-dib"> 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:<code>npm run build</code><code>serve -s build</code>Our app is partial-progressive in nature now. It is storing data while offline but it can&#39;t be installed on the device yet. We&#39;ll make that happen in the next step. Make App Complete PWATo 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:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/b93b251a953a819cd889a5cfb2f3fe3e.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/b93b251a953a819cd889a5cfb2f3fe3e.js" class="embedly-card"></a></div> 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. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6cf41730-2268-11e9-a6c1-df07cd8ae9cb-install-option.png" class="fr-fic fr-dib">In ths above screenshot you can clearly check that Chrome browser is giving the option to install this React app on your system.&nbsp;Now we are checking out app with lighthouse tool, which is provided by Google to check PWAs, check output of lighthouse below: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5679bcc0-2269-11e9-a6c1-df07cd8ae9cb-lighthouse-report.png" class="fr-fic fr-dib"> 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 server which supports HTTPs. Deploy on Cosmic ServerNow our app is ready and needs some improvement before deployment on Cosmic server. Make sure the followings:<ol><li>A public GitHub repo ( private also available if you have connected your Git account )</li><li><a href="https://devcenter.heroku.com/" rel="noopener noreferrer" target="_blank">Heroku requirements</a> should be matched</li></ol>You need to follow some steps:<ul><li>Install express with command: <code>npm install --save express</code></li><li>Modify your package.json file, and add the following code</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js" class="embedly-card"></a></div><ul><li>Now create a file app.js in the root folder and add the following code in it</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/de4722ab0b8d503ec6662d0cedc45940.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/de4722ab0b8d503ec6662d0cedc45940.js" class="embedly-card"></a></div>&nbsp;Finally you made all necessary changes and it is now ready to deploy. Now go to: <code>bucket&gt;setting&gt;deployment</code> and click button deploy to Cosmic. After successful deployment you will receive an email and click on &quot;view app&quot; button to view the app.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f4e9e330-2269-11e9-8a29-e5a70456d705-deployment.png" class="fr-fic fr-dib"> VerdictIt is clear that with the help of Cosmic 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&#39;t need to install any extra software to deploy over here.&nbsp;For any query or comment related to building apps in Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

How to Build a PWA in React.js and Cosmic

In this tutorial I&rsquo;ll demonstrate how to build an Authentication app using Angular 6 and <a href="https://cosmicjs.com">Cosmic</a>. Starting from scratch, learn how to build, configure and deploy this Angular 6 Auth app to the Cosmic App Server for testing purposes.&nbsp; TL;DR<a href="https://cosmicjs.com/apps/angular-authentication-app" rel="noopener noreferrer" target="_blank">Checkout the demo</a> <a href="https://github.com/cosmicjs/angular-auth" rel="noopener noreferrer" target="_blank">Download the codebase</a><a href="https://cosmicjs.com/apps/angular-authentication-app" rel="noopener noreferrer" target="_blank"></a> PrerequisitesBefore you start, you will need to have installed the <a href="https://cli.angular.io" rel="noopener noreferrer" target="_blank">Angular CLI</a>, <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> and npm on your system. You can refer to these <a href="https://angular.io/guide/quickstart" rel="noopener noreferrer" target="_blank">Angular docs</a> to get some help in installation.&nbsp; Getting StartedFirst we are going to create an Angular project. For this, go to your desired folder where you want to place your Angular project, open the terminal and type the following command:<code>ng new angular-auth</code>This command automatically creates the Angular project with titled &ldquo;angular-auth&rdquo;. Now go to the project folder and run the following command:<code>cd angular-auth</code><code>ng serve &ndash;open</code>This command opens the project on browser on port 4200, i.e. <a href="http://localhost:4200/"></a><a href="http://localhost:4200/">http://localhost:4200/</a>. That means you have successfully created the basic structure of the Angular project.&nbsp; Setting up Your Cosmic Dashboard&nbsp;Start by signing in to Cosmic and creating your Bucket. After your Bucket is created you can begin by creating an Object Type called &lsquo;Users&rsquo;, which will store the registered users&rsquo; information. You can create different Object Types according to the requirements that fit your data specifications.&nbsp;Now create a Bucket and copy the key from your dashboard, which will allow users to store their data in Cosmic. For this go to Bucket &gt; Settings &gt; Basic Settings and generate new key. Similarly, create a read key which we will use to fetch data from the Cosmic server. Copy these keys and store in a safe place in your system.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2d738fc0-0de9-11e9-896c-6bb8e6fd4bda-Cosmic-JS-basic-setting.png" class="fr-fic fr-dib"> Import Bucket.jsonYou can download your bucket.json file from the <a href="https://github.com/cosmicjs/angular-auth" rel="noopener noreferrer" target="_blank">Angular Auth git repo</a> and directly import to your Bucket. This way you will not have to create Object Types. Just follow the steps: Login to Cosmic &gt; Choose default bucket &gt; Go to Settings &gt; go to Import / Export and click the button &quot;Add import file&quot; to upload the bucket.json file.&nbsp; Configuration of Cosmic in Angular ProjectTo add our Cosmic configuration in our Angular project we created the cosmic.config.ts file under src/config folder. Code is shown below:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/46118c909e089f743ef464fe8bfa532a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/46118c909e089f743ef464fe8bfa532a.js" class="embedly-card"></a></div>Angular Service to Interact with CosmicHere we are creating a service in Angular which will interacts with Cosmic with the help of provided APIs. Let&#39;s create with command:<code>ng g s apicall</code>It will create two files and to separate from the rest of the code, place these files in a folder with name services, in the following location: <code>src/app/services</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/142909ffcbab91d3750b1f58212d9edb.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/142909ffcbab91d3750b1f58212d9edb.js" class="embedly-card"></a></div>In this code we are calling the Cosmic server for several different purposes. Here are the methods which are declared:<ul><li>login(): It is called to login the user with email and password.</li><li>register(): It registers the user when the user provide all details through the register page.</li><li>checkGoogleUser(): It checks the presence of the user in the database when they want to login with Google.</li><li>googleRegister(): It registers the user when they clicked the Google icon to login.</li></ul> Model Creation for AngularHere we are creating a file named user.model.ts in folder models; the location is: <code>src/app/models/user.model.ts</code>Here we declared a class named userModel which contains all the variables we are using in this project.dd<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/3cc66d69107245ab44fdcee5774135bf.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/3cc66d69107245ab44fdcee5774135bf.js" class="embedly-card"></a></div>Register the New UserHere we are implementing the functionality of registering the new user. We are capturing user-supplied info and saving it in the Cosmic backend. We place all components in a single folder named &#39;components&#39;, so the location of this register component will be: <code>src/app/components/register/register.component.ts</code>We can create the register component with the following command: <code>ng g c register</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/240d8129e4f0da22cd6bc41a8291c9a0.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/240d8129e4f0da22cd6bc41a8291c9a0.js" class="embedly-card"></a></div>In this component we are registering a new user. register() is the main function here which is calling login() function in first step to check whether user is already registered or not. If user is already registered she will get the message &#39;email already
exists&#39;, otherwise, it will register the user. On this page we applied full validations on name, email, password and other fields. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5ce626d0-0df0-11e9-a26a-cbc45be2c04a-Angular-Cosmic-JS-Register.png" class="fr-fic fr-dib"> &nbsp;Authentication&nbsp;ComponentAs the name says, it authenticates the registered user with their email and password. If you want to login with Google, you can click on the Google icon. The location of this component is: <code>src/app/components/authentication/authentication.component.ts</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/682f3ad802ef7b9345760af6766ddab8.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/682f3ad802ef7b9345760af6766ddab8.js" class="embedly-card"></a></div>Basically, this component contains two methods: the first is login() and the second is socialSignIn(). The first method calls the login() function from the API service and stores the returned data to local storage on successful attempt and then navigates to the dashboard. Similarly, the socialSignIn() method also first checks the user in Cosmic and depending on the result, registers or logs in the user. Dashboard ComponentThis component is shown only to logged-in users, so this shows the authorization in our app. The location of this component in our project is: <code>src/app/components/dashboard/dashboard.component.ts</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/3ef508dad092a081cb5d6d1eccc4396d.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/3ef508dad092a081cb5d6d1eccc4396d.js" class="embedly-card"></a></div>After a successful login attempt, the user will be redirected to this page, where the local storage of the browser will be checked to fetch the details of the user to display on the dashboard.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/70456c50-0df4-11e9-a26a-cbc45be2c04a-Cosmic-JS-Angular-Dashboard.png" class="fr-fic fr-dib"> What&#39;s Happening Here&nbsp;In this auth app you need to register the first time, and after successful registration you only need to login. As you login, your email and password will be compared to the data on the Cosmic server and only registered
users will be able to navigate to the dashboard where they can see their information (which is coming from the back-end data which you saved during registration).If you&#39;re pressed for time, you can just click on the Google icon in the login form to navigate to the dashboard in single click. The main point is that all
of these functionalities have been done with Cosmic APIs. We stored complete data in the Cosmic server and fetched the data when required. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/425603c0-0df6-11e9-896c-6bb8e6fd4bda-ng-Cosmic-JS-auth-HOme.png" class="fr-fic fr-dib"> Data Modeling in CosmicIt is good practice to create different Object Types to store different data types. We created an Object Type named &#39;Users&#39; to store the registered users with their emails. The second Object Type we created was &#39;googleusers&#39;, which contains the users
which are using Google auth for authentication. Cosmic provides different Object Types to manage data in a simple way and can be accessed easily.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ab758640-0df7-11e9-a434-2592e6fb8493-Cosmic-JS-Users-Object-Type.png" class="fr-fic fr-dib"> Registered users with the registration form <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/44431bd0-0df8-11e9-b57a-55b3efb76867-Cosmic-JS-Main-Dashboard.png" class="fr-fic fr-dib">Above is the main dashboard, with a total of 7 Objects present (meaning there are 7 users that have been registered to our app with email, Google, or both.&nbsp; Deploy on CosmicIn this step we are going to deploy our Auth app to the Cosmic &nbsp;App Server. You should follow these requirements:<ul><li>You must have a public GitHub repo (private available if you connected yourGitHub account)</li><li><a href="https://devcenter.heroku.com/" rel="noopener noreferrer" target="_blank">These requirements</a> must be met</li></ul>Now follow the steps:Modify the package.json file in Angular Project:&nbsp;Specify the versions of angular/cli and compiler/cli, so that at the time of deploy, server can configure according to these versions.&nbsp;Install Express: Now install express on the project with following command:&nbsp;<code>npm install --save express</code>Now you need to add some code in package.json. Add scripts and engines as follows:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/3f35438dd1946fe2b2edcc86388cf8b2.js" class="embedly-card"></a></div>Now it is necessary to create app.js file which will run the with the express, add following code to it:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kit/017171b7cd6f8ac5cf682f570995178a.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kit/017171b7cd6f8ac5cf682f570995178a.js" class="embedly-card"></a></div>Deploy Now:&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ead0dde0-0dfb-11e9-8f8f-dd1c79ca06a8-Cosmic-JS-Deploy.png" class="fr-fic fr-dib">You will find the deploy option under Bucket &gt; Settings &gt; Web Hosting. Provide your git repo and deploy your app in single click. ConclusionWith the help of Cosmic you can create powerful applications. In this example we were able to build an Angular 6 Auth App and deploy in seconds. You don&#39;t need to configure a server or install any software, just click and go. 🚀If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

Blogs by Ankit Kumar

Start building today

Blogs by Ankit Kumar

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today