How to deploy Angular App on Firebase hosting

Damon Leong
Google Cloud Platform by Cloud Ace
2 min readDec 31, 2019
Photo by Jeremy Thomas on Unsplash

This topic is a tutorial to deploy the angular app on firebase hosting. There is a step by step tutorial on https://firebase.google.com/docs/hosting/quickstart if you are deploying a normal website. But for the Angular App, there is a slightly different approach.

First to build your angular app in production mode

ng build — prod

It builds and minifies the source to dist/you app folder.

Setup Firebase

The first step you have to install the Firebase CLI

npm install -g firebase-tools

The second step you have to login with your firebase account. It will ask you to enter the email, then it will open the browser to sign in the firebase

firebase login

The third step to initiate the firebase project

firebase init

You should see the screen below:

Then it will ask selection as the screen below.

Select the Hosting by press space, then hit enter

What do you want to use as your public directory? dist/you app folder (if you do not have app folder, the just type dist)

Configure as a single-page app (rewrite all urls to /index.html)? Yes

File dist/index.html already exists. Overwrite? No

Sample setup screen:

Deploy Firebase hosting

The final step is to deploy your app on Firebase hosting

firebase deploy

Now you should have website hosting by firebase. Firebase hosting will give you the default URL. You can change to custom URL on your domain name https://firebase.google.com/docs/hosting/custom-domain

--

--