Deploying an Angular App to Firebase Hosting

To develop an angular project, you must have a Node JS development environment set up in your system.

If you don’t have Node JS setup then follow this link to Click here to setup Node JS Development Environment

Install Angular CLI, ignore if Angular CLI is already installed.

C:\Users> npm install -g @angular/cli

Setup Basic Angular Project

Let’s create a fresh new Angular project using Angular CLI

C:\Users>ng new sw-demo

Once the Angular project is setup then get into the project folder by using the following command.

C:\Users>cd sw-demo

Your basic Angular app is almost ready just hit the below command in terminal.

C:\Users>ng serve --port=4300

You’ll see application launching in your browser in the mentioned port.

Basic Angular App

Existing angular app can also follow from this step to host it using firebase.

Create Firebase Account to Deploy Angular Application

Go to Firebase website login using your email id. Click on the Add project button and create a Firebase app, you will see the firebase console as shown below.

Logged in firebase console

Click on Add project (highlighted in above screenshot) you will land up in the following screen .

Add Project Window

Enter your project name, accept the terms and condition and create a project.If everything is valid then on clicking create project we will get the resultant dialog as shown below

Project Creation Success

We’ve successfully created the Firebase app, in the next step we will be setting up Firebase deployment environment in our system.

To include firebase in to our web app follow as mentioned in the below screenshot.

Adding script to web app link

Click on highlighted hyperlink to get the script as shown below

Add Firebase to webapp

Install the Firebase Tools using Firebase CLI

Setup Firebase tools globally by the following command.

C:\Users>npm install -g firebase-tools

Login and Initialize Firebase project using Firebase CLI

Login to Firebase project.

C:\Users>firebase login

You will be notified when the login in successful as shown below

login success in firebase console

Initialize your Firebase project run below command.

C:\Users>firebase init

After initializing the Firebase project you will see the following properties in Firebase CLI.

• Database: Deploy Firebase Real-time Database Rules
• Firestore: Deploy rules and create indexes for Firestore
• Functions: Configure and deploy Cloud Functions
• Hosting: Configure and deploy Firebase Hosting sites
• Storage: Deploy Cloud Storage security rules

You can select any feature(use space to select) from the list then ‘Hit Enter’.

Firebase CLI will ask you a few questions, here are the answers to the corresponding questions.

• Which Firebase CLI features do you want to set up for this folder?
  Press space to select required feature then enters to confirm your choices.
• Select a default Firebase project for this directory:
  Select whichever app you have created.
• What file should be used for Database Rules? (database.rules.json)
  Press enter to continue with database.rules.json
• What do you want to use as your public directory? (public) dist/your-project-name
  This is a very important step, Angular creates the dist/your-project-name folder where all your compiled files go. To get your project name go to your-project-folder > package.json file, copy your app name that you can find in the package.json.
• Configure as a single-page app (rewrite all URLs to /index.html)? (y/N) y

Create Production Build using the Ahead-of-Time (AOT) Compilation

Before we create production Build we must know the difference between AOT and JITcompilation.

Angular provides 2 ways to compile your Angular app.

• Just-in-Time: JIT compiles your app in the browser at runtime, It’s a default compilation process.
• Ahead-of-Time: AOT compiles your app at build time, Best used for Production Build.

Let’s create production build using AOT compilation.

C:\Users> ng build --prod --aot

Here you can see your project’s all compiled files dist > your-project-name.

Deploy your Angular App to Firebase Hosting

Use the following command using Firebase CLI to deploy the Angular app to Firebase hosting.

C:\Users>firebase deploy -m "commit message" --only hosting

Always follow the convention of giving deployment commit message as it would help to identify and revoke the deployment in case if needed. Once the app is deployed you’ll get your Angular Firebase app’s Hosting URL as mentioned below. Copy the Hosting URL and check your project running on the Firebase server.

Finally, It’s Deployed on Firebase Server

Your app is deployed on Firebase server and it’s working fine now, you can access Firebase configuration from the following command.

C:\Users>firebase open

The following will be shown when executing the above command

firebase open command

You’ll see various Firebase configurations when you ran this command in Firebase CLI. To see the deployed site, choose that option using arrow keys and find the deployed site or you can directly go to hosting tab in firebase console and find the deployed website.

Place to find hosted URL

Your web app will run in secure protocol (https) having host url as highlighted above.

To find the demo click here…

(: Happy Coding :)