Creating Jumbles (part 5: deploy as p.w.a)

If you are coming here directly and have not yet read part 1, part 2, part 3 and part 4 you should. Over there I go through the structure of the app, wireframe the views and make it look good. However, there are one thing we still like to do before offering our customers to use our application. Make our app into a Progressive Web App (PWA) and then deploy it to the world wide web to give others access to the glorious thing ;)

PWA

To make your React application a progressive web application there are a few steps you need to take. I followed a tutorial called Build your first progressive web app with React by Scott Domes. I started at install Lighthouse and simply followed the tutorial through. It was simple and easy; made for someone like me.

First I added a service worker by changing the public/index.html file created by create-react-app so it would register the service worker if it is supported by the browser

As you can see we are registering a file called service-worker.js and that we have to create as well

And as step 3 in the tutorial states we need to add some progressive enhancements so the application can run without javascript. What we do is add some text to the root element of the index.html

As you can see we are not doing anything fancy here; simply adding some html so the root div will not be empty when the application loads. We also add a simple role property here for accessibility.

The next step is to Add To Home Screen capability that we do by adding a manifest.json and a logo.png to our public folder.

And finally we reference the manifest.json from our index.html to tell the browser about our progressive app

And now we should be ready to deploy our React Progressive Web App. We will be deploying to Github pages here; However, you can follow Scotts tutorial through and deploy to Firebase if you like.

Deploy

What I like to do is deploy Jumbles to Github pages so the code and a running application can stay at the same place. We are in luck since the scripts we are using with create-react-app comes with a deployment feature for GitHub pages.

So, like before we follow a simple tutorial to make this happen so we can go through the steps in the steps in the deployment to GitHub pages section of the create-react-app readme. Simple steps, love those :)

yarn add gh-pages --dev

Add homepage property to the package.json

Add a couple of scripts to package.json

And finally we simply run

yarn run deploy

And the site is deployed to https://bjorgvin.github.io/jumbles and when we go to a nested route our 404.html page will kick into action and redirect us to the root url with the route as query parameter and our index.html will handle that query parameter to locally route correctly to where we wanted to go within the Jumbles application.

Note: To fetch this part of the code you can fetch the pwa branch from GitHub

That’s it :) Now we have created an application from the ground up using create-react-app, react-router, redux, redux-form and etc. This is a small simple application but it has the structure to grow into a large application if that is where you are going.

Hope you enjoyed following it as I had in creating it :)