How to deploy an Angular 7 + app on Firebase Hosting for free

After finishing your amazing Angular app you want to show it to the world. A good and easy option to deploy your Angular app is on Firebase hosting. This story will explain the required steps to do this.

Initialize Firebase

For this you need the firebase tools, which you can install using NPM which comes bundled with Node.

Assuming that you have already created your app and are ready to deploy it, head over to your project from within your terminal. Install firebase tools using the following command:

npm install -g firebase-tools

In order to use the firebase CLI you need to log in using:

firebase login

This will open up a window in your main browser, where you can use your Google credentials to log in.

Before proceeding make sure you have created a project for your angular app.

Firebase project creation

With your project now created, you have to initialise Firebase Hosting.

firebase init

use Space to select an option and Enter to initialise the selected options

Alternatively you could use the following command, to directly initialise only hosting:

firebase init hosting

After initializing your project you have to select your recently created Firebase project.

Use the arrow keys to select your project. Hit Enter to confirm your selection

After this you will be asked the following question “What do you want to use as your public directory?” In Angular 7 you must include your application’s name in this field: “dist/YourProjectName.” . Before Angular 6 using “dist” was sufficient.
Next specify “yes” to configuring as a single-page application and “no” to overwriting your existing index.html (if applicable).

A new file “firebase.json” should now be added to your folder, which should look like this:

The Firebase part is now finished!

Deploying your Angular app

In order to fill up the dist folder with your compiled app, we use the following command:

ng build --prod

Note: the addition of the “ — prod” flag to use the production rules found in “environment.ts.prod”.

After this is done we finish the process by exactly deploying your app:

firebase deploy

That’s all folks! Your app is now online and will be available for access through the link provided in the console.

Your amazing app is now live for the world to see!