How to Deploy Angular 12 Application Using Firebase Hosting?

Some companies offer free app hosting, irrespective of size. They each have specific characteristics and uses. Firebase can save up to 10GB in your hosting content, store 1GB in real-time, and download 10GB/month.

Synopsis

This tutorial will show how simple it is to deploy an Angular 12 app on Firebase using its hosting component.

Basic requirements

Node and the Angular CLI have already been installed.

I'm assuming you've already built your angular app. If not, use the following code to start a new project: ng new project-name

The title of the new project is variable; the project that I have designed is angular12-hosting.

We are now finished with the project. So, let's take the steps outlined below to host our app.

Deploy an Angular 12 app with Firebase Hosting.

To begin, navigate to your project's directory and launch a command prompt/terminal.

We must now generate a build for our project. As a result, run the resulting code: ng build

Check that the dist folder in your project has been created after the build has been completed successfully.

The next step is to create a project in Firebase. Navigate to the Firebase console.

When you click the Create a Project button, you will be prompted to enter a project name.

My firebase project is called angular12-hosting; you can add yours as well. Then press the Continue button.

You can enable Google Analytics if you are already using it. Otherwise, please disable it and click Create Project.

Following the successful completion of the project npm i -g firebase-tools

We have to log into our Firebase account with the following code to host the Angular 12 app on Firebase. firebase login

You will be asked to select your Gmail account and some Firebase CLI permissions. Please remember that you select and accept such access to select the account you established the firebase project.

We have to initialize the Firebase after successful login. Run the command below to do this. Init of Firebase

The initialization procedure for Firebase consists of questions we have to answer to host successfully correctly.

1. Are you ready for action? Enter Yes
2. What functions do you wish to configure for Firebase?

(Note that you can select multiple features too, but for now, we need only hosting. Also, make sure you need to press the Space key to select a feature/option, and then press Enter to confirm that.)

They can then ask you to choose the project folder

3. Kindly choose one of the following options: Select Use an existing project (if you have already created a Firebase project). If not, select Create a new project.)

4. Choose your project; in my case, it was angular12-hosting. So I chose that by pressing the enter key.

After that, check what your angular project's public directory is. You can check by going to the dist folder.

My project's directory is dist/angular12-hosting.

The following firebase initialization question will be to add enter our directory. I'm adding mine; please enter according to your project.

5. What will you use as your public directory? Enter dist/angular12-hosting into the command line.

6. Set up as a single-page app? Please enter Yes.

7. How do I set up automatic builds and deployments with Github? Enter the number No (if you want to set up with github, you can enter Yes)

8. Is the file dist/**/index.html already present? Overwrite? Type No.

Some of the files will be generated by Firebase.

Finally, Firebase initialization is finished.

Setups are now complete. To deploy our project, let's use firebase deploy.

Following the completion of the deployment process, Firebase will provide you with a URL to deploy your Angular 12 app using the Firebase hosting feature.

Open a browser and enter this Hosting URL.

Angular 12 hosting app is running successfully on this URL

So that was how to Deploy an Angular 12 app using Firebase hosting. I hope you found the tutorial useful and that you attempted to host your app as well. If you want to create an app you need to find the top-notch angular development company that will work according to your requirements and will provide skilled developers.