Hosting an Angular app with Firebase
03/08/2017
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.
Prerequisites
Process
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: https://console.firebase.google.com/project/xxx/overview
Hosting URL: https://xxx.firebaseapp.com