Skip to content

Hosting Angular App using Firebase

Following is the guide to Host the angular app on Google’s Firebase. Assuming that you already have a working Angular5 App, using Angular CLI we will create ‘dist/’ folder. We will deploy using Firebase tools.

STEP-1: Goto the following url: https://firebase.google.com

Firebase Welcome Screen
Firebase Welcome Screen

STEP-2: GoTo Firebase console https://console.firebase.google.com/, and select the Hosting option as shown in the following image

Screen Shot 2018-03-15 at 10.58.17 PM.png
Select the ‘Hosting’ option

STEP-3: Create Project

Screen Shot 2018-03-15 at 11.28.10 PM
Screen Shot 2018-03-15 at 11.31.57 PM

STEP-4: Now from command line, go to the angular app and install the required packages

Screen Shot 2018-03-15 at 11.19.19 PM.png

STEP-5: Now login to firebase using the command line as shown in the following image

Screen Shot 2018-03-15 at 11.21.18 PM.png
Firebase Login

STEP-6: Initialise firebase in the project

Screen Shot 2018-03-15 at 11.23.16 PM.png

STEP-7:Now setup the project with following options

Screen Shot 2018-03-15 at 11.37.30 PM.png

STEP-8:Creates 2 following files

Screen Shot 2018-03-15 at 11.42.59 PM.png
Screen Shot 2018-03-15 at 11.44.26 PM.png

STEP-9: Add the deploy script

Screen Shot 2018-03-15 at 11.46.21 PM.png

Shashi View All

-== Superman ==-

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: