How to deploy Angular App on Firebase?

[ws-jm]

Select Topic Area

Question

Body

How to deploy React App on Firebase?

[mxdvf]

Hi @ws-jm! Just follow the simple steps given below to host your react app on firebase:

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.

Step 4: Install Firebase Tools in your current react project using the command npm install -g firebase-tools

Step 5: We will initialize a firebase project in our React app by running the following command in the console in our root directory. Use the command firebase init

• Now type y as we are ready to proceed.
• Select hosting from the options provided.
• Select the use an existing project option.
• Type build to use the build directory as your default public directory
• Type y as we want to configure our app as a single page application

Step 6: Now we will run the following command to build our react app. Use the command npm run build

Step 7: Now we just need to run the last command and our application will be deployed. Use the command firebase deploy

This will deploy our project and also provide us the hosting link which we can visit.
We can verify that our website was successfully deployed by visiting the hosting link provided by firebase in the console

[Ld-star]

Hi , @ws-jm
I hope my article will be helpful to you.

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.

#Creating React Application:

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

#Hosting 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.
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.
Step 6: Now we will run the following command to build our react app.
Step 7: Now we just need to run the last command and our application will be deployed.