How to Deploy a React JS application to Firebase from Scratch
Once you completed your application, the last step is to introduce it to the world online. There are many deployment services, one of the famous and easy deployment services for React JS application is Firebase. In this tutorial, we are going to deploy our React JS project to Google Firebase.
Step 1: Create a Firebase Project
Go to the https://console.firebase.google.com/. Login with your Gmail. Click on Add Project, enter your desired project name. A simple hack here to create a project is, if the ID is not available, firebase is going to assign some id after your project name as you see in the picture. That ID is going to be a part of your website’s URL.
Try for available project names like this. The ID is going to be pretty important for the website’s URL
Click Continue, Enable Google Analytics to monitor your Website. Learn more about analytics here. Click Create Project to create your project. That’s it, your project is created.
Step 2: Create a build folder
Open the terminal/command prompt in your existing react application directory and run the below command
- npm run build
The command will merge all content from the public folder and src folder and turns it into a single-page application in the index.html file in it. We are going to use this in the next steps.
Step 3: Install the Firebase CLI
Now, we are going to install firebase CLI through node packages globally. Remember to update using firebase CLI using this command as well.
- npm install -g firebase-tools
Link your Firebase account to firebase CLI using this command. It navigates to your default browser for Google authentication. Give the necessary permissions.
- firebase login
Step 4: Initialise Firebase
This can be done using the following command
- firebase init
Click Y to proceed
You will be displayed like below. Go to the Hosting part and click Space to select and press Enter.
Click Use an existing project
Navigate to the created project in the Firebase and click Enter
For directory selection, type build. For single-page app type Yes. For overwriting type N and click Enter.
Step 5: Deploy React JS application
After initialization completes, the last step is to deploy your React JS project into Firebase. This can be done by typing a simple command
- firebase deploy
Note: If you want to make changes and re-deploy your application, follow step 2 and step 5. Your website will be updated on the respective URL.
After successful deployment, you will be displayed these links, copy the Hosting URL part and paste it in the browser
Hurray…!!!
Your React JS application is live now. Share the URL with your friends, family to show your achievement.
Thanks for reading the article. Keep Rocking…
