In this tutorial, we will discuss how to easily deploy Angular 9/8 production applications on Firebase hosting.
Firebase provides many cloud-based services which prove very helpful to optimize and standardize application development process including Authentication, Realtime Database, Storage, Analytics, Performance Quality, A/B Testing, Cloud Messaging, and Hosting.
The hosting is our target of discussion today on which we are going to host an Angular production version so that it can be available publically around the world. It is a free as you go service with fair unlimited usages. We can easily host small applications and sample projects to share with others. Firebase operations can be done from its CLI tool, which makes it straightforward to use any of its services.
To install various npm packages, you need to install Node Js which also provide npm service to install other packages.
You can download the Node Js setup file to install and set up on the system.
Install Angular CLI
We’ll create new Angular project using Angular CLI tool, run following npm command to install
Create the production buildNow we'll create the production by executing below command
$ ng build --prod --aot</pre> The <code>--aotis used for (Ahead Of Time) compilation which is used to compile the project on build time. It is more optimized for a Production build. During development, we don't use this which builds using JIT (Just In Time) which compiles the app in the browser at runtime. The build process will create a dist folder with production files as shown below
Setup Firebase AccountNow visit Firebase Console and Signup for a new account or login if you already have one. In the Firebase Console, follow these steps to create a new project and enable Hosting service. Step 1) Click on the "Create a project" button, then create a Firebase application Step 2) Enter the Firebase Project name then click "Continue" button to create a Firebase project Now we have successfully created the Firebase project. Next, we will install the Firebase tools to use its services from the CLI console.
Setup & login Firebase from CLITo use Firebase commands using CLI console, we'll install the firebase-tools globally by running npm command below
nameproperty 4) Configure as a single-page app (rewrite all urls to /index.html)? Hit
yesfor this as our application is a single page application so hosting will be configured to treat routes as pages not directory. By this we are done with Hosting configuration, next, we will create the production of our Angular project to host on Firebase hosting.
Deploy the Angular Project to Firebase HostingFinally, we'll upload the Angular production files in our
dist > angular-deploy-to-firebase-appfolder to the Firebase Hosting by executing below firebase command
$ firebase deploy
This command will upload the files to the server and will return the url where our Angular project deployed
That's it you can now visit this URL to see your Angular project up and running and using Firebase Hosting service for deployment.