Hosting React Apps on Firebase

🔥 Why Firebase for React Hosting?

Firebase Hosting is a fast, secure, and reliable way to deploy web apps—backed by Google’s infrastructure. It’s perfect for single-page applications (SPAs) like those built with React. With built-in SSL, global CDN, and simple CLI tools, Firebase makes hosting effortless. 🌐

📦 Step 1: Build Your React App

If you’ve developed your app using Create React App (CRA), you need to create a production-ready build before deploying:

npm run build
  

This generates a build/ folder containing static files that Firebase can serve.

🧰 Step 2: Install Firebase CLI

Firebase offers a powerful CLI to deploy and manage your projects directly from your terminal.

npm install -g firebase-tools
  

Once installed, login to your Firebase account:

firebase login
  

⚙️ Step 3: Initialize Firebase in Your Project

Navigate to your project directory and initialize Firebase Hosting:

firebase init
  

During setup:

• Select Hosting: Configure files for Firebase Hosting
• Choose the Firebase project you’ve created on the console
• Set build as your public directory
• Answer No for single-page app rewrite if asked, then manually configure it (see below)
• Say Yes to configure as an SPA if prompted

🛣️ Step 4: Handle SPA Routes

React apps using React Router need a fallback to index.html to handle deep routes.

Edit your firebase.json file:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}
  

This ensures any unknown route is handled by React Router instead of returning a 404. ✅

🚀 Step 5: Deploy Your App

Once everything is ready, deploy your React app with:

firebase deploy
  

After a few seconds, Firebase will provide you with a live project URL (e.g., https://your-app-name.web.app).

🔐 Adding Environment Variables (Workaround)

Firebase Hosting does not support runtime environment variables directly. Instead:

• Create a .env file for build-time values like:

REACT_APP_API_URL=https://api.example.com
  

Then access them in your React code using process.env.REACT_APP_API_URL.

💡 Firebase Hosting Features

• Free SSL — HTTPS out of the box
• Custom Domains — Connect your own domain easily
• Fast CDN — Global content delivery
• One-Command Deploys — firebase deploy
• Preview Channels — Test changes before going live

🌍 Adding a Custom Domain

To use your own domain:

1. Go to Firebase Console → Hosting → Add custom domain
2. Verify ownership by updating DNS settings in your registrar
3. Firebase will provision an SSL certificate automatically

🔁 Optional: Continuous Deployment with GitHub

Firebase can automatically deploy your app whenever you push to GitHub.

1. Run firebase init hosting:github
2. Follow prompts to link your GitHub repo
3. Firebase sets up a GitHub Actions workflow to deploy on push

✅ Final Thoughts

Hosting React apps on Firebase is fast, secure, and highly scalable. From drag-and-drop deployment to advanced CI/CD setups, Firebase supports all stages of your frontend workflow.

If you're looking for a reliable and developer-friendly hosting solution backed by Google, Firebase is a fantastic choice for your next React project. 🚀

---