Internet companies do provide free hosting with different features and functionalities. There are different parameters of hosting like space, bandwidth, ram, type of hosting i.e. HDD or SSD, and many more. Out of all Firebase is being used by many vendors and its Google product so it is also most trustworthy and has lots of features available for free. Though you can check the Firebase pricing page for more details.
Here you will learn how to deploy Angular 12 web application using its Firebase hosting. It is quite easy if you just follow steps properly. So let’s start it out;
What you will require before starting
Obviously, we will need Node and Angular CLI installed if we are working with the Angular project.
Here we are assuming that you have already created an Angular application or you can also check how to successfully create an Angular application with useful Angular development skills.
Steps to deploy Angular 12 Web Application on Firebase
First of all, you need to build your application and check if it has any errors. If your application is error-free then the build will get generated successfully. You can create a build with the below command:
ng build
A dist folder will get created in a root directory after successful execution of the above command.
After that, open Firebase Console,
Click on “Create a project” and follow the instructions as stated.
You can choose if you want to integrate Google analytics else keep it disabled.
After effectively making the undertaking in firebase, again go to the precise task registry in your record pioneer, open the command prompt/terminal, and introduce firebase instruments utilizing the accompanying order.
npm i -g firebase-tools
We need to login to firebase using a password to deploy the Angular 12 application as below:
firebase login
You will be asked about your Gmail account login. Remember to login with the same account which you used in Firebase. It will ask for different permission from your CLI, just follow it and allow them.
After the successful integration of the Firebase tool, you have to initialize firebase in the terminal. To do the same below is the command:
firebase init
You will be asked a couple of questions to host your Angular application as below:
1. Are you ready to proceed? Enter Yes
2. Which Firebase features do you want to set up for this directory? Select Hosting: Configure files
(Please note that you can select more than 1 feature too, here we just need only hosting. Also, remember to press the Space key to select another feature/option, and then press Enter to add that.)
After that, it will ask to select the project directory.
3. Please select an option: Select Use an existing project (if you have already created a project in firebase. If not, you can choose Create a new project)
4. Select your project and hit enter
5. After that, you have to add your directory where the build is created i.e. inside the dist folder.
6. Configure as a single-page app? Enter Yes
7. Setup automatic builds and deploys with Github? Enter No (if you want to set up with GitHub, you can enter Yes)
8. File dist/**/index.html already exists? Overwrite? Enter No
After this, the Firebase tool will create some files and load data. And that’s it, Firebase initialization is done.
Now you only need to run single command to deploy project as below:
firebase deploy
After successful deployment, it will show you your project URL, which you can check in your browser and it will get working
Yoohoo! The application is running now, is your application running or do you face any errors in this process of deploying Angular 12 Web Application on Firebase Hosting? Let us know in the comments or connect us.
Recent Comments