Deploying Angular App to Firebase Hosting
In this tutorial, we will learn how to deploy our angular application to firebase hosting with step by step guide.
What is Firebase?
Firebase is a mobile and web application development platform developed by Firebase, it offers so many great features for development.
so, let’s get started…
Also read,
How to deploy Angular app to firebase hosting step-by-step Guide:
Step 1. Login to Firebase Console
Go to Firebase Console and create a new account if you don’t have one or continue if you already have one.
Step 2. Create Project in the Firebase console
Now go to Firebase Console and you will be able to see your recently added project if you have any or create a new project for your angular app by clicking on "Add Project".
Now Give your Project name and after that click on the "Create Project" button.
Once the project is created successfully you will see a welcome page.
Step 3. Generate API Key
Click on the code icon as shown below to generate the API key for our APP, which will be used for our Application deployment.
You will see a popup box with API Key, ProjectID, Auth Domain, and other details as below screenshot
Step 4. Install Firebase
Now go to the Terminal of your angular application and type the below command to install the angular fire and Firebase package into it.
npm install firebase @angular/fire --save
After package added successfully we need to configure it to our app, so go to environment.ts and environment.prod.ts add firebase configuration same as shown below screenshot:
Step 5. Import Firebase Module
Go to the app.module.ts file in the project and import the firebase module and environment configuration as shown below screenshot:
Step 6. Install Firebase Command line tools using NPM
Now go back to firebase console and click on Hosting section and then click on Get Started button.
You will see the popup message box as below and then copy the command given in the popup box to install firebase tools
Type below command on your terminal to install Firebase Tools globally on your system using NPM.
npm install -g firebase-tools
Step 7. Login to Firebase using CLI
Now type the following command in Terminal to authorize your application, it will ask for your login credentials to authorize the app.
firebase login
Make sure to login with same login credential which you have used for creating project before
After successful login you will get a success message on the terminal as well as on the browser as below screenshot:
Step 8. Initialize Project
In your Terminal type the below command to initialize the project
firebase init
Here you will be asked some questions for the initialization process same as below:
- Are you ready to proceed? Yes
- Which Firebase CLI features? Hosting
- Select a default Firebase project? Angular Host Demo (Select your created project)
- What do you want to use as your public directory? dist/myapp (here myapp is our angular project name)
- Configure as a single-page app? Yes
After that, you will get a message that your project initialization complete.
Step 9. Create Build for your Angular Application
Go to your project directory using CMD and Type the following command to create a production version of your application:
ng build --prod
It will generate a dist folder in your Application root directory, which will be used for deploy our Angular Application
Step 10. Deploy to Firebase Hosting
Now our build for production is ready, we need to deploy the build using the below command
firebase deploy
After deployment completed you will see the hosting URL of your application in the terminal, By clicking on it you will be able to see the latest uploaded application live on the firebase.
So, Finally, we have deployed our angular application to firebase hosting.
Conclusion:
Thanks for reading.
Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestion then please inform us by commenting.
Don’t forget to share this tutorial with your friends on Facebook, and twitter.
