Publishing Angular Apps Using Firebase Hosting

Among other things, Firebase provides web hosting for Angular apps. It has various plans, free and paid. For demo purposes, we can use the Frebase free plan.

Creating a Firebase Project

First, open the https://firebase.google.com/ and sign up if you don’t have a Google account, otherwise go to the sign in.

Then, click Add project as shown in Figure 1.

Figure 1.

Creating Angular Application 

Now, create a new Angular application using the ng new command as shown in Figure 2.

ng new hello-world

Figure 2.

Now get inside the project at the command prompt using the following command as shown in Figure 3.

cd hello-world

Figure 3.

Running the application 

To run the Angular app use the  “ng serve” command to check if everything is fine as shown in figure 4.

Figure 4.

Open the http://localhost:4200 in a web browser to open the hello-world Angular application and see the output as shown in Figure 5.

Figure 5.

To stop the running application press “Ctrl + c” on the command prompt and enter “Y” and hit enter to stop the running application as shown in Figure 6.

Figure 6.

Creating the build 

Everything looks good and now it’s  time to create a build of an Angular app for web hosting inside Firebase.

To create the build run the “ng build --prod” command at a command prompt as shown in Figure 7.

Figure 7.

After completion of the ng build command, you must have noticed that a new folder gets created named “dist” inside the app root folder which contains build files as shown in Figure 8 and Figure 9.

Figure 8.

Figure 9.

Installing Firebase Tools 

Install the fFrebase tools, using the “npm install -g firebase-tools” command. This command will install all the required Firebase packages which need to perform Firebase actions as shown in Figure 10. 

Figure 10.

Before publishing the application, we need to log in the Firebase console using the command prompt. 

Firebase Login

To login run the following command “firebase login” and follow the instruction as shown Figure 11. 

Figure 11.

After running the “firebase login” command you will get redirected to the web page for authenticating your firebase account, 

Figure 12.

Enter your valid user ID and password and click next for allowing the permission as shown in Figure 13. 

Figure 13. 

Click allow to give permission to the Firebase account to perform Firebase actions using the command as shown in Figure 14. 

Figure 14.

After successful Firebase authentication and permission, you will redirect to the web page where you will see the “Firebase CLI Login Successful”. It means everything is setup successfully as shown in Figure 15 and Figure 16. 

Figure 15.

Figure 16.

After  login, we have to initialize Firebase which will set up the environment where we need to host the application. 

To initialize Firebase run the following command “firebase init” as shown in figure 17.

Figure 17.

Now, you need to follow the following instructions to initialize Firebase and set up for deployment. 

Press Y and hit enter as shown in Figure 18.

Figure 18.

Then you need to select the Firebase feature which you are going to choose to perform the action, I am going to choose Database and hosting indicated by (*), use up/down arrow key and space to select the options and hit enter. 

Figure 19.

After that, you need to select the project in which you are going to deploy the application. In Firebase, you may have multiple projects so you need to select one and hit enter as shown in Figure 20. 

Figure 20.

Some part of Angular may be using the Firebase database so, as you see above, I have selected the database option in Figure 19, so I need to pass the database rules for the database. In this project we are not going to use the database. But I choose the database as an option to demonstrate this step. To move to the next step just hit enter. 

Figure 21.

Now, we need to pass the name of the directory or folder which contains build files. In figure 7, I have shown you how to create a build, so, just type the name of the folder “dist” which contains our build files and hit enter as shown in Figure 22. 

Figure 22.

As shown in figure 23 Firebase initialization is completed successfully. 

Figure 23.

Now, it’s time to run our final command; i.e. “firebase deploy”, which will publish all the build files in the hosting environment. See Figure 24 for more details. 

Figure 24.

You will see the published URL as a result of the command prompt. In our case we have https://redux-5fe8c.firebase.com. Open the URL in the web browser to see the result as shown in Figure 25. 

Figure 25.

Now, run the “firebase logout” command in the command prompt to log out of the firebase session from the command prompt.

Firebase provides a great environment for publishing Angular applications, and it also has many features like a database, push notifications, analytics, and more. Explore Firebase to learn more.