Creating Progressive Web Application in 6 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 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:3003 to view it. But we want to create our “Hello World!” PWA so lets do that.

Step 3) Removing the example application

  • Remove everything from `src/app/components`.
  • Remove all files from `src/pages` folder.
  • Edit `src/routes.js` and remove all the previous routes.
// File: src/routes.js
import { configureRoutes } from "core/utils/bundler";

// routes

export default configureRoutes([
]);

Step 4) Creating Home Component

// File: src/app/components/home.js
import React, { Component } from "react";

export default class Home extends Component {

render() {
return (
<h1>Hello World!</h1>
);
}
}

Step 5) Creating new page

// File: src/pages/home.js
import Home from "../app/components/home";

const routes = [
{
path: "/",
exact: true,
component: Home
}
];
export default routes;

Step 6) Updating routes to add new Home page

// File: src/routes.js
import { configureRoutes } from "core/utils/bundler";

// routes
import * as Home from "./pages/home";

export default configureRoutes([
Home
]);

That’s all folks! Now you may start the application “npm start”.

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
We are working on documentation and will get all the sections updated soon.