Deploy Angular 15 App to Production with Firebase Hosting

1. Prerequisite

In order to run an Angular project, you must have a Node JS development environment set up in your system.

If you don’t have Node JS setup in your system then follow this link to Set up Node JS Development Environment

– Install Angular CLI

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

npm install -g @angular/cli

2. Setup Basic Angular Project

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

ng new angular-firebase-app

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

cd angular-firebase-app

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

ng serve --open

You’ll see this in your browser.

3. Create Firebase Account to Deploy Angular Application

Go to Firebase website login using your email id. Click on the large Add project button and create a Firebase app.

Enter your project name, accept the terms and condition and create a project.

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

4. Install the Firebase Tools using Firebase CLI

Setup Firebase tools globally by the following command.

npm install -g firebase-tools

5. Login and Initialize Firebase project using Firebase CLI

Login to Firebase project.

firebase login

Initialize your Firebase project run below command.

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

As you can see in the screenshot I have selected only 2 features with the green circle, but you can select any feature 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 like mentioned in the screenshot below.
  
• Configure as a single-page app (rewrite all URLs to /index.html)? (y/N) y

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

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

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.

ng build --prod --aot

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

7. Deploy your Angular App to Firebase Hosting

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

firebase deploy

Once the app is deployed you’ll get your Angular Firebase app’s Hosting URL as mentioned in the screenshot. Copy the Hosting URL and check your project running on the Firebase server.

8. 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.

firebase open

You’ll see various Firebase configurations when you ran this command in Firebase CLI.

For example: If you select Hosting from the configuration list, ‘Hit Enter’ then you will be able to see your deployed files as mentioned in the screenshot.

Recommended Tutorial

9. Conclusion

We’ve successfully deployed Angular 12 with Firebase Hosting, Firebase has made it super easy to deploy on their server. If you have a better idea or suggestion to improve this topic kindly do share in the comment section.