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

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:

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

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

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

A note to our visitors

This website has updated its privacy policy in compliance with changes to European Union data protection law, for all members globally. We’ve also updated our Privacy Policy to give you more information about your rights and responsibilities with respect to your privacy and personal information. Please read this to review the updates about which cookies we use and what information we collect on our site. By continuing to use this site, you are agreeing to our updated privacy policy.