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":
json
{
  "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.

Conclusion​

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.