How to run/test PWA locally | Serving local app via HTTPS

At Limehome we recently converted our Guest Hub to PWA. You can read all about this in my previous article about generating a dynamic PWA manifest and passing authentication data between browser and the PWA instance.

In this article I will describe a simple way of serving the local app via HTTPS while developing and testing a PWA.

serving local app via https during development and testing

Before browser can recognize the PWA and allow installation some conditions must be met:

• The app has to be served via HTTPS.
• Valid Service Worker has to be registered.
• Valid web manifest file has to be present.

So after setting up the manifest and Service Worker the browser still won’t allow us to install the PWA to device unless its served via HTTPS.

To achieve this we can use a local http server to serve static files from the dist folder and then use ngrok secure tunnel to access our local app via HTTPS. After that the browser will allow installation of our PWA.

Serving the app via HTTPS

We need a running local http server and ngrok secure tunnel to allow access to our local build of the app via HTTPS link.

Steps:

• Make sure we have http-server installed globally — http-server
  To install it globally via NPM:
  npm install --global http-server
• Make sure we have ngrok installed globally — ngrok
  To install globally: npm install ngrok -g
• Run the build for our app, for example: npm run build
• Then cd into dist/ folder (or wherever the built app resides) and serve files with the command http-server .

Serving the dist folder locally with http-server

• This will give us the port number where the http-server is running (by default its 8080 but can be another port number if 8080 is taken).
• Then, in another terminal, we can serve the files over https with ngrok by providing a port number of your http-server, like this: ngrok http 8080
• ngrok will then provide the links where our local build of the app can be accessed. We need the one with https.

ngrok output provided the https url forwarding to our localhost port 8080

Setting up the Web Manifest for testing

Now that we have the https link provided by ngrok we need to update our manifest file. In order to properly test the PWA routing and other features we need to update the start_url value inside the web manifest.

We need to set the start url like so:
"start_url" : "https://df9f-79-101-139-224.ngrok.io"

After this we need to build our app once again. After this point we are serving our local app via ngrok over https. That is pretty much it.

Happy coding and check out the open roles in our Tech and Engineering team.

We are hiring!!