Skip to main content

Deploy to firebase hosting

Step 14 — Building and Deploying your Angular 13 Application to Firebase Hosting​

In this step, we'll see how to build and deploy our example application to Firebase hosting using the ng deploy command available in Angular 8.3+.

We'll only see how to deploy the frontend application without the fake JSON server.

Angular CLI 8.3+ introduced a new ng deploy command that makes it more easier than before to deploy your Angular application using the deploy CLI builder assocaited with your project. There are many third-party builders that implement deployment capabilities for different platforms. You can add any of them to your project by running the ng add command.

After adding a deployment package it will automatically update your workspace configuration (i.e the angular.json file) with a deploy section for the selected project. You can then use the ng deploy command to deploy that project.

Let's now see that by example by deploying our project to Firebase hosting.

Head back to your command-line interface, make sure you are inside the root folder of your Angular project and run the following command:

$ ng add @angular/fire

This will add the Firebase deployment capability to your project.

The command will also update the package.json of our project by adding this section:

        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }

The CLI will prompt you to Paste authorization code here: and will open your default web browser and ask you to give Firebase CLI permissions to administer your Firebase account:

https://www.diigo.com/file/image/rscqpoqzoceqeredbzdspcrcra/Angular+8+Deploy+To+Firebase.jpg?k=8ef75889c953e29aa719225581f11738

After you signin with the Google account associated with your Firebase account, you'll be given the authorization code:

https://www.diigo.com/file/image/rscqpoqzoceqerecrzdspcrcqs/Angular+8+Deploy+To+Firebase.jpg?k=87a2aeaf4e473ba024eba6909794346a

Next, you'll be prompted: Please select a project: (Use arrow keys or type to search). You should have created a Firebase project before.

The CLI will create the firebase.json and .firebaserc files and update the angular.json file accordingly.

Next, deploy your application to Firebase, using the following command:

$ ng deploy

The command will produce an optimized build of your application (equivalent to the ng deploy --prod command), it will upload the production assets to Firebase hosting.

Conclusion​

Throughout this Angular 13 tutorial, we've built a complete working Angular application example using the latest version.

As a recap, we've particularly seen by example how to set up HttpClient and send HTTP GET requests with parameters using the HttpClient.get() method, how to handle HTTP errors using the RxJS throwError() and catchError() operators, unsubscribe from RxJS Observables for the cancelled HTTP requests using the takeUntil() operator and retry failed requests with the retry() operator and finally how to deploy our application to Firebase hosting using the latest ng deploy feature available from Angular 8.3+.