Jsaddicts

Deploy ReactJs Progressive Webapp On Heroku

Aug 22
190 Views

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

Create reactJs project :

2. Install javascript package managers :

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

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.

2. Edit the manifest.json file:

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

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

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.

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:

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

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:

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:

3. Deploy to Heroku:

  • You need to enter the credentials of Heroku after successfully login create an application on Heroku by running the following command in terminal
  • 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:

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:

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.

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.

Leave a Reply

Your email address will not be published.