Creating Progressive Web Application in 2 simple steps with React.JS

This tutorial uses the boiler plate “ReactPWA” created by my team at Atyantik Technologies Private Limited, and assumes that you have nodejs ≥ 8.4 installed on your machine.

While working on many challenging project we faced a common requirement of creating a boilerplate that takes care of SEO, Progressive nature of app and optimization. Thus we created a boilerplate that supports Server Side Rendering, Code Splitting, Social Sharable cards (yes even for dynamic pages), Image optimizations etc.

NOTE: The boilerplate is production ready and have been used on live sites but is still in beta phase. We are looking for contributors! So if you have good experience with ReactJS. Please help us improve the code.

So lets get started with Progressive Web Application.

Step 1) If you are already familiar with git, clone the repo or you can click this link to download the copy

git clone 

Step 2) Install the dependencies

cd react-pwa && npm install

To view the example application you can simple start the application with

npm start

and open http://localhost:3007 (default port) to view it. TADA, your “Hello, World!” program is up and ready

Well you will need to do a lot more to add your custom icons and default SEO details to create a full fledged PWA, but this is just to get you started.

For detailed documentation please visit:

Written by

Co-Founder at @atyantik_tech. Love to code, big fan of #PHP, #ReactJS, #BackboneJS, #AngularJS and #NodeJS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store