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
- 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:
- Install the Firebase CLI globally:
npm install -g firebase-tools
- Log in to Firebase:
- Initialize a Firebase project:
During the initialization process, choose "Hosting" when prompted for features, and select the default options for the other prompts.
firebase.json: Open the
firebase.jsonfile and change the "public" field to "build":
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
- Deploy your React PWA:
Your PWA is now deployed on Firebase Hosting and accessible via the URL provided in the command output.
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.