Hosting an Angular app with Firebase



Firebase hosting comes with a generous free tier and great tooling. Keep in mind that if you expect any serious traffic, you will have to upgrade to a paid plan and at that point it’s probably worth considering dedicated hosting unless you are using any of the other Firebase services.



Create a new application with the CLI:

ng new myapp
cd myapp

Build the app:

ng build --target=production --aot

The CLI stores build articfacts in a dist directory by default. We’ll use that to deploy our app. We use the target and aot options so that the CLI does some optimizations.

Install the firebase tools:

npm install -g firebase-tools

Login to firebase:

firebase login

Initialize firebase for the project. You’ll be prompted to set the public directory, make sure it is set to the angular-cli build directory, which is dist by default:

firebase init

Deploy the app:

firebase deploy

And that’s it! You should see something like:

=== Deploying to 'xxx'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: x files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Project Console:
Hosting URL: