DEV Community

Cover image for How to Deploy/Host a React App to Firebase in few minutes: A Step-by-Step Guide
codeek
codeek

Posted on

How to Deploy/Host a React App to Firebase in few minutes: A Step-by-Step Guide

#react #firebase #web #devops

Taking a React application live doesn't have to be complicated. If you've built a React app and want a fast, secure, and reliable hosting solution, Firebase Hosting is one of the best options available.

In this guide, you'll learn how to deploy your React application to production using Firebase Hosting in just a few minutes.

Why Firebase Hosting?

Firebase Hosting provides:

  • ⚡ Fast global CDN delivery
  • 🔒 Free SSL certificates
  • 🌍 Custom domain support
  • 🚀 Easy deployment with a single command
  • 🔄 CI/CD integration with GitHub

Whether you're deploying a personal project, portfolio, SaaS dashboard, or production application, Firebase Hosting offers a simple and scalable solution.

Step 1: Install Firebase CLI

To interact with Firebase services from your terminal, install the Firebase Command Line Interface globally:

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

After installation, verify that the CLI is available:

firebase --version
Enter fullscreen mode Exit fullscreen mode

Step 2: Login to Firebase

Authenticate your local machine with your Firebase account:

firebase login
Enter fullscreen mode Exit fullscreen mode

You may be asked whether you want to enable anonymous usage reporting.

Allow Firebase to collect CLI usage and error reporting information? (Y/n)
Enter fullscreen mode Exit fullscreen mode

Choose your preferred option.

A browser window will open automatically. Sign in using the Google account associated with your Firebase project and grant the required permissions.

Once authenticated successfully, you'll see a confirmation message in your terminal.

Step 3: Initialize Firebase Hosting

Navigate to your React project directory and run:

firebase init hosting
Enter fullscreen mode Exit fullscreen mode

The Firebase CLI will guide you through several configuration steps.

Configuration Options

✔ Ready to proceed? 

Y
Enter fullscreen mode Exit fullscreen mode

✔ Select a Firebase project

Choose:

Use an existing project
Enter fullscreen mode Exit fullscreen mode

Then select your Firebase project from the list.

✔ Public directory

If you're using:

  • Vite → dist
  • Create React App → build 
dist
Enter fullscreen mode Exit fullscreen mode

or

build
Enter fullscreen mode Exit fullscreen mode

✔ Configure as a Single-Page Application? 

Configure as a single-page app (rewrite all urls to /index.html)?
Enter fullscreen mode Exit fullscreen mode

Choose:

Y
Enter fullscreen mode Exit fullscreen mode

This is extremely important for React Router applications. It ensures that refreshing routes such as:

/products
/profile
/settings
Enter fullscreen mode Exit fullscreen mode

won't result in a 404 error.

✔ GitHub Actions Setup 

Set up automatic builds and deploys with GitHub?
Enter fullscreen mode Exit fullscreen mode

Choose:

N
Enter fullscreen mode Exit fullscreen mode

unless you want to configure CI/CD immediately.

✔ Overwrite Existing Files?

If Firebase asks to overwrite existing files such as index.html, select:

N
Enter fullscreen mode Exit fullscreen mode

This prevents accidental replacement of your application files.

Step 4: Build Your React Application

Before deploying, create a production build.

Vite 

npm run build
Enter fullscreen mode Exit fullscreen mode

Create React App 

npm run build
Enter fullscreen mode Exit fullscreen mode

This generates the optimized production assets inside your configured output directory.

Step 5: Deploy to Firebase Hosting

Now deploy your application:

firebase deploy --only hosting
Enter fullscreen mode Exit fullscreen mode

Firebase will:

  1. Upload your production build
  2. Configure hosting infrastructure
  3. Generate a public URL

Example output:

✔ Deploy complete!

Hosting URL:
https://your-project.web.app
Enter fullscreen mode Exit fullscreen mode

Open the URL in your browser and your React application is now live 🎉

Common React Router Fix

If you're using React Router, always answer:

Configure as a single-page app?
Enter fullscreen mode Exit fullscreen mode

with:

Y
Enter fullscreen mode Exit fullscreen mode

Firebase will automatically create the required rewrite rules:

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

This prevents route refreshes from returning 404 errors.

Final Thoughts

Firebase Hosting is one of the easiest ways to deploy a React application. The setup takes only a few minutes, and you get global hosting, SSL, and excellent performance out of the box.

The complete deployment workflow is:

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy --only hosting
Enter fullscreen mode Exit fullscreen mode

That's it! Your React application is now live and accessible worldwide.

Happy Coding! 🚀

🎥 Prefer a Video Tutorial?

Watch the full deployment tutorial here:

https://www.youtube.com/watch?v=1av63EJzyhg

If you enjoy React, TypeScript, and Full-Stack Development content, follow Codeek on YouTube and Medium for more production-grade tutorials, courses, and real-world engineering practices.

Top comments (0)