Cloud Ace Blog

Dec 31, 2019 | Firebase

by Damon Leong

Cloud Solutions Architect

How to deploy an Angular app with Firebase hosting

Galaxy

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

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:

firebase02

Then it will ask selection as the screen below.

firebase023

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:

firebase04

Deploy 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

We also publish articles on Medium. Take a look and follow us to see when we publish new articles.

Contact Us