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.
Let’s create a fresh new Angular project using Angular CLI.
Go to Firebase website login using your email id. Click on the large Add project button and create a Firebase app.
4. Install the Firebase Tools using Firebase CLI
Setup Firebase tools globally by the following command.
Login to Firebase project.
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.
Use the following command using Firebase CLI to deploy the Angular app to Firebase hosting.
Your app is deployed on Firebase server and it’s working fine now, you can access Firebase configuration from the following command.
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/cli2. Setup Basic Angular Project
Let’s create a fresh new Angular project using Angular CLI.
ng new angular-firebase-appOnce the Angular project is setup then get into the project folder by using the following command.
cd angular-firebase-appYour basic Angular app is almost ready just hit the below command in terminal.
ng serve --open3. 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.
4. Install the Firebase Tools using Firebase CLI
Setup Firebase tools globally by the following command.
npm install -g firebase-tools5. Login and Initialize Firebase project using Firebase CLI
Login to Firebase project.
firebase loginInitialize your Firebase project run below command.
firebase init6. 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 --aot7. Deploy your Angular App to Firebase Hosting
Use the following command using Firebase CLI to deploy the Angular app to Firebase hosting.
firebase deploy8. 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
No comments:
Post a Comment