Deploy your Angular app in Firebase

For those who don’t want to read full story and bit familiar with firebase, i listed only commands so that they can deploy angular apps.

• npm install -g firebase-tools
• Ng build — prod
• Firebase login
• Firebase init
• Hosting
• Select existing project
• dist/app-name ( ex- dist/counter-app)
• Single page app- yes
• Deploy with github — N
• Firebase deploy
• Enjoy with firebase hosting link.

Hoping that your angular application is up and running in your local machine and you want to make it live globally. Here we will discuss with you how you can deploy an angular app in firebase.

Note- this tutorial will be useful if you have an angular project running.

Install Angular CLI, ignore if Angular CLI is already installed. (Inside your project folder).

bittu Counter-App (main) $ npm install -g @angular/cli

Step 1-

Check once your app to be sure it’s working properly.

Type ng serve in your project folder.
bittu Counter-App (main) 🤟 $ ng serve
Open localhost:4200 in browser.

So it’s running now on your local machine. We can go ahead for deployment in the firebase.

Step -2

Go to this google firebase link and login

https://firebase.google.com/

After successful login from your google account, go to the console option in home page.

Create a new project.

Enter your project name- Counter-App (you can keep it according to your project)

Choose or create a Google Analytics account — select Default Account for firebase

Now the project will be created on the name you have given. (Here in my case- Counter-App)

And you can see this in firebase-

-> go to the hosting section and you see an option to get started and you will get some steps to follow.

Now you have successfully made a project in firebase.

Step 3-

Now you come to your project folder,

Run this command.

npm install -g firebase-tools (If this doesn’t work out, try with sudo. )

Now time to build your project-

Run ng build — prod

After this, firebase login

And sign in with your google account.

Then

Run firebase init

Here you will be asked some question

Select Hosting after pressing the space and enter button on the keyboard.

In the next question, choose an existing project, it will be asked to select the project from firebase.

Select the same which we made in the firebase.

Next question.

? What do you want to use as your public directory? dist/counter-app ( this is important)

Now it’s time to deploy our project.

Enter firebase deploy

It will take some time to deploy the project and it will provide a link to check your application live.

If you are able to see this, then you have successfully deployed an angular application in firebase.

Hosting URL: https://counter-app-9337d.web.app

You can check the deployed app in the link above which is deployed in firebase.