Deploy-Host React App on Google firebase for FREE:)

If you're looking for an efficient and straightforward way to deploy your React.js project, then Google Firebase is an excellent choice. Firebase offers hosting services that make it a breeze to deploy and manage web applications at free of cost. In this blog post, we'll walk you through the process of deploying your React.js project to Firebase using simple commands.

Prerequisites

Before we get started, make sure you have the following prerequisites in place:

1. Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your computer.
2. React.js Project: Have your React.js project ready for deployment.

Step 1: Install Firebase CLI

The Firebase Command Line Interface (CLI) allows you to interact with Firebase services. To install it globally, open your terminal and run:

sudo npm install -g firebase-tools        

Step 2: Log in to Firebase

Next, you'll need to log in to Firebase using your Google account. Run the following command and follow the authentication process:

firebase login        

It may ask you below question hit yes and continue to login process. You will need to carefully follow the instructions given in the terminal in order to login. It may redirect you to google for login or you will need to copy the URL given in order to login.

Once the login is successful google will show ask you to go back to terminal. So jump back to terminal now and follow below steps.

Step 3: Initialize Firebase in Your Project

Navigate to your #React.js project's root directory in the terminal and initialize Firebase for the project:

firebase init hosting        

This command will prompt you to select the Firebase services you want to use. For hosting, select "Hosting" and follow the setup instructions.

It will show you something like below image. Here you can choose use existing project. ( note : Make sure you have created a project inside google firebase. If you did then it will show all existing projects in below option.)

Step 4: Build Your React Project

Before deploying, you need to build your React project. Run the following command:

npm run build        

This command will create a production-ready build of your React app in the build folder.

Step 5: Deploy Your Project

Now, it's time to deploy your React.js app to Firebase Hosting:

firebase deploy --only hosting        

Firebase will provide you with a unique URL where your app is hosted. Congratulations! Your React.js project is now live on the web.

Step 6: Making Updates

Whenever you make changes to your React app and want to update the live version, simply run the build command again:

npm run build        

Then, use the deploy command to update your hosted app:

firebase deploy --only hosting        

Conclusion

Deploying your React.js project on Google Firebase is a straightforward process, thanks to the Firebase CLI. With just a few simple commands, you can take your web application from development to production. Firebase hosting also provides other features like SSL support, easy custom domain setup, and continuous integration.

Now that your project is live, share it with the world and let your creativity shine! Firebase makes it easier than ever to showcase your React.js skills to a global audience.

Happy coding and deploying! ????