In this tutorial, I am going to share with you How to Deploy Angular 10/9 App to Production with Firebase Hosting?.
Before we go further, Let’s see what Firebase’s free plan offers?
- A/B Testing
- Crash Analytics
- Cloud Messaging
- Performance Monitoring
- App Indexing
Step by step Explanation
- Setup Basic Angular Project
- Create Firebase Account to Deploy Angular Application
- Install the Firebase CLI
- Login and Initialize Firebase project using Firebase CLI
- Create Production Build using the Ahead-of-Time (AOT) Compilation
- Deploy your Angular App to Firebase Hosting
- Finally, It’s Deployed on Firebase Server
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.
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.
Initialize your Firebase project run below command.
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
- What do you want to use as your public directory? (public)
This is a very important step, Angular creates the
dist/your-project-namefolder where all your compiled files go. To get your project name go to
your-project-folder > package.jsonfile, copy your app name like mentioned in the screenshot below.
- Configure as a single-page app (rewrite all URLs to /index.html)? (y/N)
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.
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.
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.
We’ve successfully deployed Angular 10/9 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.
Thanks in Advance