Day 10: Deploying the PWA to Netlify, Heroku, or AWS and Making It Installable

Today, you’ll learn how to deploy your Progressive Web App (PWA) to a production environment. Deploying your PWA makes it accessible to users worldwide, allowing them to install it on their devices. You’ll deploy the app to Netlify, Heroku, and AWS—all popular platforms for hosting React PWAs.

What You Will Do Today:

1. Deploy your PWA to Netlify.
2. Deploy your PWA to Heroku.
3. Deploy your PWA to AWS using S3 and CloudFront.
4. Test the PWA for installability and offline capabilities in production.

Option 1: Deploying to Netlify

1. Sign in to Netlify or create an account.
2. Link your GitHub repository to Netlify:

• Click on New Site from Git.
• Select your repository and branch (e.g., main or master).

1. Configure the build settings:

• Build Command: npm run build
• Publish Directory: build

1. Deploy the site. Netlify will automatically build and deploy your React app.
2. Once deployed, your app will have a live URL, e.g., https://your-app-name.netlify.app.

Option 2: Deploying to Heroku

1. Sign in to Heroku or create an account.
2. Install the Heroku CLI if you haven’t already.

   npm install -g heroku

3. In your project root, log in to Heroku:

   heroku login

4. Create a Heroku app and specify the buildpack for static sites:

   heroku create your-app-name
   heroku buildpacks:set mars/create-react-app

5. Push your code to Heroku:

   git add .
   git commit -m "Deploy PWA to Heroku"
   git push heroku main

6. Once deployed, your app will be live at https://your-app-name.herokuapp.com.

Option 3: Deploying to AWS Using S3 and CloudFront

1. Log in to AWS Management Console.
2. Create an S3 Bucket for static hosting:

• Go to S3 and create a new bucket.
• Set Public Access to allow public viewing of objects.
• Enable Static Website Hosting and note the bucket’s URL.

1. Upload the build folder:

• In your terminal, run npm run build to generate the build folder.
• Upload all files from the build folder to your S3 bucket.

1. Set up CloudFront:

• Go to CloudFront and create a new distribution.
• Set the Origin Domain Name to your S3 bucket’s static website endpoint.
• Enable Caching to improve performance.
• Note the CloudFront URL, which will serve as the public URL for your PWA.

Step 4: Testing Your PWA in Production

1. Open your app’s production URL (e.g., from Netlify, Heroku, or CloudFront).
2. Go to Developer Tools > Application in Google Chrome and confirm that:

• Manifest: Ensure it includes the correct settings.
• Service Worker: Verify the service worker is active.

1. Test Offline Mode:

• Switch to offline in the Network tab.
• Refresh the page to see if cached content loads offline.

1. Test Installability:

• You should see an Install button or “Add to Home Screen” prompt in the browser.
• Click Install to add the PWA to your device’s home screen. Confirm it opens in standalone mode without the browser UI.

Summary

Today, you successfully deployed your Progressive Web App to a production environment using Netlify, Heroku, and AWS. You’ve tested its installability, offline functionality, and responsiveness in production.

Congratulations! You’ve completed the 10-day series on Building a PWA with React. Your app is now live, installable, and ready to engage users.