Deploying an Angular App to Firebase

You can host your Angular app anywhere and still take advantage of the Firebase backend, but nothing is easier than hosting it on Firebase directly. After some initial configuration, deploying updates to your app can be handled with a single command.

Building the Production Code

ng build --prod

Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.

Deploying to Firebase

Install

First, make sure you have the firebase tools package installed.

npm install -g firebase-tools

Second, log into your existing firebase account. You should have already created a firebase project for your production app. If not, create a new project now.

firebase login

Initialize

Third, initialize the project. You will only need to go through this process once. Make sure you are in the top level directory of your angular app.

You should see this after running firebase init from the command line.

firebase init

For the most part, you can stick with the default settings, except for the following questions:

1. Choose hosting on the first question.


2. Change public folder to dist/your-app-name when asked (it defaults to public).


3. Configure as single page app? Yes


4. If firebase asks to overwrite your index.html file, just say NO.

Deploy

Finally, deploy the app.

firebase deploy

If all went well, your app should be alive and well on the firebase project URL.