[Angular] Deploy to Firebase

 Angular    Firebase CLI     Firebase    Build    Deploy

▌Introduction

---

Let’s learn how to deploy our Angular2 website to Firebase hosing via Firebase CLI.

▌Environment

---

▋Angular CLI 1.0.0-beta.19.3

▋Firebase CLI 3.2.1

▌How to Deploy

---

▋Install Firebase CLI

$> npm install -g firebase-tools

▋Build

Build our Angular2 website in Angular CLI by this command.

$> ng build --prod

PS. The ready-to-deploy files are in /dist

▋Deploy

Before deployment, we should set up the Firebase options.

Type

$> firebase init

for setting the following options,

1.What Firebase CLI features do you want to setup?

 Choose Hosting.

2.What Firebase project fo yu want to associate as default?

 Select your default project.

3.What file should be used for Database Rules?

 Use default file: database.rule.json, which will be initialized with the settings in the Firebase database rules.

4.What do you want to use as your publis directory?

 Of course that will be “dist”.

5.Configure as a single-page app (rewrite all urls to /index.html)?

 Choose yes will make every route shows the url as http://XXX/index.html but not the route url in the browser.

6.File dist/index.html already exists. Overwrite?
 
  No

The above settings will create 3 files in your website,

1.database.rules.json
2.filebase.json
3..firebaserc

Notice .firebaserc keeps the default Firebase project name associated with our website.

Okay, everything is done, use the command to deploy.

$> firebase deploy

And we will successfully deploy our website to Firebase J

▋Make the website offline

$> firebase hosting:disable

▌Reference

---

▋Deploy Angular CLI Apps to Firebase

▋https://firebase.google.com/docs/cli/