When developing any project we must host it somewhere so that the whole world can see our hard-work. Hosting websites can be hectic sometimes, but you don't need to worry as we can now host our React project on Firebase within a minute or two with a very simple setup.
The Steps to deploy react project on firebase are:
Step 1: First we shall set up our Firebase project, go to its official website, and create a project as shown below.
Step 2: Then we will enable Firebase Hosting by going into the hosting section under Build dropdown.
Step 3: Then we will go through the hosting setup as described below.
Creat React Project
Step 1: Create a React application using the following command:
npx create-react-app react_hosting
Step 2
: Install Firebase Tools:
npm install -g firebase-tools
Project Structure:Project Structure
Deploy React Project on Firebase
Deploying your React project on Firebase is a great way to host your applications. Below are the steps to depoly your website
Step 1: First, we will initialize a firebase project in our React app by running the following command in the console in our root directory.
firebase init
Now type
y
as we are ready to proceed.
Step 2: Select Hosting from the options provided.
Step 3: Select the Use an existing project option.
Step 4: As the build folder of react apps is generated in the build folder by default, we will use the same as our public directory.
Step 5: Type y as we want to configure our app as a single-page app.The initialization is complete, now we just need to run a few commands and our application will be ready to go.
Step 6: Now we will run the following command to build our react app.
npm run build
Step 7: Now we just need to run the last command and our application will be deployed.
firebase deploy
This will deploy our project and also provide us the
hosting
link which we can visit.
Output:We can verify that our website was successfully deployed by visiting the hosting link provided by firebase in the console as shown below:
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
The initialization is complete, now we just need to run a few commands and our application will be ready to go.
