Let's assume you have an Angular 2 app that was created using the Angular 2 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 2 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
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 2 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