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.

References

Innovance LOgRocket