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 with Angular CLI by this command.

ng build --prod

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 :)

How to make the website offline?

firebase hosting:disable

Reference

1. Deploy Angular CLI Apps to Firebase
2. https://firebase.google.com/docs/cli/

Afterword

This is my first time participating with the IRON MAN tournament, and I really, really had a tough time for writing the consistent articles during these 30 days :)

But what cannot kill you will make you stronger!

See ya next time and may the force be with you, my friends!

Who am I

I am a Star Wars biggest fan, a blogger and a father with a little cute girl names Leia :)

At work, I am a technical project manager and focus on Project/Product management, Scrum and full-stack development. You can find me on Linkedin or my Blog.