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

Tirth Bodawala
1 min readNov 14, 2017

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 https://github.com/Atyantik/react-pwa.git 

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: https://www.reactpwa.com/docs/en/initial-setup.html

--

--

Tirth Bodawala

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