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:
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:
After you signin with the Google account associated with your Firebase account, you'll be given the authorization code:
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
.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.
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
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+.