How to deploy React app using Firebase Hosting?

Deploying react apps can be difficult if you do not choose the right platform. I have been using Firebase Hosting recently and it has been the easiest solution to deploy the react app. The whole process is super easy and you get done within 5-10 minutes. Just follow through the steps as listed below :

Step 1 : Create a Firebase project

The first step is to create a Firebase project where you will deploy your React app. Follow these steps:

Click Create a Project and follow the setup instructions.
Go to the Firebase Console.
Sign in with your preferred Google account.

Step 2 : Set up Firebase in your React project

Run this command to install firebase tools in your react project.

npm install -g firebase-tools --save

You should now be able to login into your firebase project and set it up. Run the below commands :

firebase login

Select the same google account you chose in Step 1. Run the below command.

firebase init

This is the question you would see : Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Choose Hosting from the available options.

You would have an option to use an existing project or create a new project. Select the option to use an existing project and link it your already existing project.

The next question is : What do you want to use as your public directory? Answer should be build.

Answer yes when asked to configure it as a single page application. Answer no to set up automatic builds via Github for now.

Step 3: Deploy your React App using Firebase Hosting

Run the below command to create the build folder for your app.

npm run build

This should create a build folder. Run the below command to finally deploy your react app.

firebase deploy --only hosting

That's it! Your app should be deployed. Check out the default domain and you should be seeing your react app deployed without any issues!

That’s it! You’ve successfully deployed your React app using Firebase Hosting. If you have any issues, let me know in the comments. Happy coding!