Deploy ReactJs Progressive Webapp On Heroku

https://medium.com/@rocksinghajay

In this article, I will tell you how we can convert our reactJs application into progressive web app also we are deploying this on Heroku with simple and easy steps. So, let’s start.

What is Progressive Webapp?

Progressive web applications are a type of mobile application given by the web, developed in common web technologies like HTML, CSS and JavaScript.

Installation

1. Create reactJs project :

npx create-react-app reactjs-pwa

2. Install javascript package managers :

Run yarn installor ( npm install, if using npm) inside your new reactjs-pwa directory:

cd reactjs-pwa && yarn install

3. Open the project in any IDE I would favour visual studio code.

Start Implementing PWA

1. Open manifest.json from project view the below screenshot.

public/mainfest.json

2. Edit the manifest.json file:

Generate the icons for mainfest from this link https://app-manifest.firebaseapp.com/

{
  "short_name": "React PWA",
  "name": "This is my first React PWA",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
       "src": "icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
    }
  ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#2196F3",
 "background_color": "#ffffff"
}

3 Open index.js file from the project views the below screenshot.

src/index.js

4. Edit the index.js :

In this, we are change serviceWorker.unregister() to serviceWorker.register() for enabling the features like work on offline and load faster and of course for PWA support also.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
if (process.env.NODE_ENV === 'development') {
  serviceWorker.unregister()
} else {
 serviceWorker.register()
}

And PWA features will work only if your application is running on https server and your project process.env.NODE_ENV is production only.

Now you’ve completed all the necessary steps to make the reactJs application progressive web app.

Deploy it on Heroku

1. Create an Express JS server to serve your production build on Heroku. In your project, create a server.js file:

touch server.js

2. In server.js, copy and paste the below code:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
  return res.send('ping');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html')); //serving build folder
});
app.listen(port);

This code will create a new NodeJs server for serving build directory which is created when we ran yarn build command.

Make sure you add express to your dependencies:

yarn add express

In your package.json file, change the start script for serving build folder on Heroku when we deployed the code and then it will create the build folder and ran it on the live https URL to the following:

"start": "node server.js"

package.json

3. Deploy to Heroku:

• If you don’t any Heroku account then create one here: https://signup.heroku.com/
• In your terminal run the following:

heroku login

• You need to enter the credentials of Heroku after successfully login create an application on Heroku by running the following command in terminal

heroku create react-pwa

• This command will create a new app in your Heroku account. Then push your code to Heroku with the following git command in your terminal:

yarn install
git init
heroku git:remote -a react-pwa
git add . 
git commit -m "initial commit"
git push heroku master

Now you’ve completed all the necessary steps to deploy a ReactJs Progressive Webapp On Heroku. To view your app, run the following in the terminal:

heroku open

At the last open the URL on android device in the google chrome then wait for some seconds the add to home screen prompt will come at the bottom.

I hope you enjoyed and learned from my article on Deploy ReactJs Progressive Webapp On Heroku.

Clap 👏 for this article if you find it useful 😃

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.

Want to learn more about JavaScript, Reactjs, React-native? Check out my other articles:

How to setup react navigation and redux with react native

How to add a splash screen to react native(Android)

PAYPAL INTEGRATION IN REACT-NATIVE

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.