How to deploy React app in Firebase

A React Single Page Application (SPA) is essentially a static website and can be easily hosted using platforms like Firebase or Netlify.

Here I am explaining the steps for hosting React app on Firebase:

  1. Login to Firebase Account:

    • Log in to your Google Firebase account.
  2. Create a Project:

    • Create a new project and choose a name for it. Proceed to the next step by clicking the continue button.
  3. Configure Analytics (Optional):

    • On the Analytics page, you can choose to disable Google Analytics if you prefer.
  4. Project Creation:

    • Click the “Create Project” button. After a few seconds, you will be redirected to the project dashboard.
  5. Setup Hosting:

    • In the sidebar, navigate to the “Hosting” section under the Build menu.
    • Click the “Get Started” button to begin the hosting setup process.
  6. Install Firebase CLI:

    • Install Firebase in your project by running the command npm install -g firebase-tools.
  7. Firebase Login and Initialization:

    • Log in to your Google account with the command firebase login.
    • Initialize Firebase in your app using firebase init.
    • Select the option “Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys” by pressing the spacebar and then enter.
    • Choose “Use an existing project” and select the project you created earlier.
    • Set your public directory as dist if you are using Vite.
    • Configure your app as a single-page app by selecting “Yes” and “No” for other options.
  8. Deploy Your App:

    • Once configuration is complete, deploy your app with firebase deploy.
    • Firebase will deploy the app and provide you with a link to access it.

By following these steps, you can easily host your React SPA on Firebase and make it accessible to users.

Read More