Deploying an Angular App to Firebase Hosting

Let's assume you have an Angular 2+ app that was created using the Angular CLI. The CLI gives you easy access to a build command that makes it easy to prepare a project to be deployed to production. Then, the Firebase CLI npm package makes it a breeze to deploy to a Firebase Hosting instance.

Here's the step by step breakdown:

1. Build your Angular app for production with ng build

Use the following command in your project folder to instruct the Angular CLI to build a production-ready set of assets for your app in the dist folder:

$ ng build --prod

2. Create a Firebase account & project

If you haven’t already, open up a Firebase account account, go to the Firebase console and start a new project for your app.

3. Install the Firebase command line tools

Install the Firebase CLI with the following command:

$ npm install -g firebase-tools

4. Login using the Firebase CLI & initialize your project

Login to your Firebase account with the following command:

$ firebase login

Then initialize the project using this command:

$ firebase init

The Firebase CLI and Init settings

Upon initializing the project you’ll be asked a few questions:

  • Firebase CLI features…: Hosting.
  • Database rules file: You can keep that default file name that they provide, or change it if you prefer. This file will be created and will contain the database rules for your app.
  • Public directory: Type in dist, because this is where your production-ready Angular app assets are.
  • Configure as single-page app: Most of the time you’ll say yes (y) for this one.
  • Overwrite index.html: No.

5. Deploy to Firebase Hosting

Use this command to deploy your production-ready app to Firebase Hosting:

$ firebase deploy

6. And done!

Your app is now deployed and you can launch it straight from the command line with this command:

$ firebase open

And then choosing Hosting: Deployed Site

  Tweet It

🕵 Search Results

🔎 Searching...