Skip to main content

Deploying PWAs

In this tutorial, you will learn how to deploy your Progressive Web App (PWA) built with React. Deploying a PWA ensures that it is accessible to users and can be installed on their devices for an optimal user experience.

Build your React PWA

Before deploying your PWA, make sure to create a production build:

npm run build

This command generates a build folder with optimized files ready for deployment.

Choose a Hosting Service

Select a hosting service to deploy your React PWA. Some popular options include:

  • Firebase Hosting
  • Netlify
  • Vercel
  • GitHub Pages

For this tutorial, we will use Firebase Hosting.

Deploying with Firebase Hosting

To deploy your React PWA on Firebase Hosting, follow these steps:

  1. Install the Firebase CLI globally:
npm install -g firebase-tools
  1. Log in to Firebase:
firebase login
  1. Initialize a Firebase project:
firebase init

During the initialization process, choose "Hosting" when prompted for features, and select the default options for the other prompts.

  1. Configure firebase.json: Open the firebase.json file and change the "public" field to "build":
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
"source": "**",
"destination": "/index.html"
  1. Deploy your React PWA:
firebase deploy

Your PWA is now deployed on Firebase Hosting and accessible via the URL provided in the command output.

Enabling HTTPS

Ensure that your PWA is served over HTTPS to maintain the security and integrity of your app. Most hosting services, including Firebase Hosting, provide HTTPS by default.

Test your PWA

Visit your PWA's URL, and verify that it works as expected. You can also use Lighthouse to audit your deployed PWA and check for any issues.


Deploying your React PWA makes it accessible to users and allows them to install it on their devices. By choosing a reliable hosting service, serving your app over HTTPS, and regularly testing and auditing your PWA, you can ensure an optimal user experience.