How to deploy an Angular 2 App using Firebase hosting?

Question

I want to know the steps necessary to deploy a simple Angular 2 Application using Firebase-hosting.

Answer 1

These are the steps:

1) npm install -g firebase-tools 

This will install firebase CLI that we will use in the following steps.

Firebase CLI requires Node.js version 0.10.0 or greater.

2) firebase init

Project setup

This will trigger Firebase project setup and store all settings in a local file firebase.json.

• ? What Firebase CLI features do you want to setup for this folder? Make sure [Hosting: Configure and deploy Firebase Hosting sites] is checked and press INTRO.

• ? What Firebase project do you want to associate as default? Choose [create a new project]

Hosting setup

• ? What do you want to use as your public directory? You need to choose the (build) folder for your Angular 2 Application. Default is (public).
• ? Configure as a single-page app (rewrite all urls to /index.html)? Answer Yes.

Note: anything under this folder will be served as static assets.

4) You need to go to (https://console.firebase.google.com) to create a new Project.

• Click on (CREATE NEW PROJECT).

• Pick up a cool name for your project and select a Country/region. Eg: United Kingdom.

Your project name will look something like cool-f5b0d.

5) firebase use --add

Pick up the project you just created.

• ? Which project do you want to add? Choose the new project you created.

• ? What alias do you want to use for this project? You can use an alias for easy reference

6) firebase deploy

This will deploy your asset folder set up during step 2. Make sure this matches the (build) folder for your Angular 2 Application.

Answer 2

Below steps shows How to deploy Angular 2 project to firebase hosting:

1. Build your project, for example in webstorm inside terminal run command:

   pub build

The command will run and create a build/web directory which include your compiled project

2. In your command line initialize your firebase project by run:

   firebase init

follow the instructions until you reach below question:

What do you want to use as your public directory?

3. Here you've to give the full path of your project directory build/web starting from home directory. In windows for example the home directory is:

   c:\users\YOU-USER-DIRECTORY

so if your project available in c:\users\YOU-USER-DIRECTORY\projects\MyProject, then give below directory to firebase:

projects/MyProject/build/web

make sure to use front slash / not backslash \

4. After finishing rest firebase questions, run:

   firebase deploy

it will take some time to upload all project files, then enjoy!