2017 iT 邦幫忙鐵人賽
DAY 30
Modern Web

Learning ASP.NET core + Angular2 系列 第 31

[Angular2] Deploy to Firebase (n' See ya !)


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


  • 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 our Angular2 website with Angular CLI by this command.

ng build --prod

The ready-to-deploy files are in /dist


Before deployment, we should set up the Firebase options.

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?

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


  1. Deploy Angular CLI Apps to Firebase


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.

[Angular2] Deploy to Github-pages
Learning ASP.NET core + Angular2 31