How to Deploy React App to Firebase Hosting Easily

To deploy a React app to Firebase, first build your app using npm run build, then initialize Firebase in your project with firebase init, and finally deploy using firebase deploy. This uploads your app to Firebase Hosting, making it live on the web.

Syntax

Here are the main commands to deploy a React app to Firebase Hosting:

• npm run build: Creates a production-ready build of your React app in the build/ folder.
• firebase init: Sets up Firebase Hosting in your project folder and creates configuration files.
• firebase deploy: Uploads your build files to Firebase Hosting and makes your app live.

bash

npm run build
firebase init
firebase deploy

Example

This example shows how to deploy a React app step-by-step:

1. Run npm run build to create the build folder.
2. Run firebase init and select Hosting. Choose the build folder as the public directory and configure as a single-page app.
3. Run firebase deploy to upload and publish your app.

bash

npm run build
firebase init
# Select Hosting, set public directory to 'build', configure as SPA
firebase deploy

Output

✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/YOUR_PROJECT_ID/overview
Hosting URL: https://YOUR_PROJECT_ID.web.app

Common Pitfalls

Watch out for these common mistakes:

• Not running npm run build before deploying, which means Firebase uploads old or missing files.
• Choosing the wrong public directory during firebase init. It must be build for React apps.
• Forgetting to configure as a single-page app (SPA) during firebase init, causing routing issues.
• Not logging into Firebase CLI with firebase login before deploying.

bash

Wrong:
firebase init
# Set public directory to 'public' (wrong)
firebase deploy

Right:
firebase init
# Set public directory to 'build' (correct)
firebase deploy

Quick Reference

Summary tips for deploying React apps to Firebase:

• Always run npm run build before deploying.
• Set the public directory to build during firebase init.
• Enable single-page app rewrite to support React routing.
• Use firebase login to authenticate before deploying.
• Check your Firebase project ID matches your Firebase console.

Key Takeaways

Run 'npm run build' to prepare your React app for deployment.

Use 'firebase init' to configure Firebase Hosting with 'build' as the public folder.

Enable single-page app support during initialization to handle React routes.

Deploy your app with 'firebase deploy' after setup and build.

Always log in with 'firebase login' before deploying.