How to deploy an Angular 2 application using Firebase?

Question

I want to know the steps required to deploy a simple Angular 2 application using Firebase hosting.

Answer 1

These are the following steps:

1) npm install -g firebase-tools 

This will install the Firebase CLI, which we will use in the next steps.

Firebase CLI requires Node.js version 0.10.0 or later.

 2) firebase init 

Project setup

This will start the configuration of the Firebase project and save all the settings in the local firebase.json file.

• ? What CLI Firebase features do you want to configure for this folder? Make sure that [Hosting: Configuring and Deploying Firebase Hosting Sites] is checked and press INTRO.

• ? Which Firebase project do you want to link by default? Select [create new project]

Hosting setup

• ? What do you want to use as your shared directory? You need to select the (build) folder for your Angular 2 application. The default value (public).
• ? Configure as a one-page application (rewrite all URLs in /index.html)? Answer Yes.

Note: everything under this folder will be used as static assets.

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

• Click (CREATE NEW PROJECT).

• Pick a cool name for your project and select a country / region. For example: UK.

The name of your project will look something like cool-f5b0d .

 5) firebase use --add 

Take the project you just created.

• ? Which project do you want to add? Select the new project that 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 expand your resource folder, which you installed in step 2. Make sure that it matches the (build) folder for your Angular 2 application.

Answer 2

Create a project using the Angular CLI. Get more information here https://cli.angular.io/

Step 1: Create an Application

Run below cmd to build

 ng build --prod 

Step 2. Create a FireBase project and install the Firebase CLI

Open the Firebase console at https://console.firebase.google.com/ and create a new Firebase project.

To install the Firebase command-line tools, follow these steps:

 npm install -g firebase-tools 

Step 3. Deployment in FireBase

Run the below firebase cmd to log in:

 firebase login 

It will open a browser and ask you to authenticate. Log in to your Firebase account. After that, you can close the browser window. At the command line, you will receive a message stating that the login was successful.

Now run below cmd:

 firebase init 

First of all, you are asked which of the Firebase client features you want to use. You must select the "Hosting: Configure and Deploy Firebase Hosting Site" option. The Firebase client will then ask which folder to use for deployment. Type dist . This is important because this is the place where our assembly is stored.

The next question asks if this application is single-page and if it should rewrite all the URLs in index.html. In our case, we need to answer yes.

Last question: if Firebase should write index.html file. The answer to this question is no.

Now run below cmd to deploy:

 firebase deploy 

Firebase will provide a URL that you can use to access your application online.

Answer 3

The following are instructions for deploying an Angular 2 project for firebase hosting:

• Create your project, for example, in the webstorm command inside the terminal:

  pub build

The command starts and creates a build / web directory that includes your compiled project

2. At the command prompt, initialize the firebase project, run:

   firebase init

follow the instructions until you find the question below:

 What do you want to use as your public directory? 

3. Here you must specify the full path to the build / web project directory, starting from the home directory. On Windows, for example, the home directory:

   C: \ Users \ YOU-USER Directory

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

 projects/MyProject/build/web 

be sure to use the forward slash / , and not the backslash \

4. After you have finished the weather questions, do:

   firebase deployment

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

Answer 4

Below are the complete steps that I followed and successfully posted my site. 1. First of all, you need to create a project / application in the firebase console ( Firebase Console ).

After creating the application / project, you will see how myfirstfbhosting-b0ae ...... Now you are ready to install the tools for downloading the files of your site.

2. Install CLI Firebase

The Firebase command line interface requires Node.js and npm, which can be installed by following the Node instructions . js software . Installing Node.js also installs npm.

The Firebase command line requires Node.js version 0.10.0 or higher. After installing Node.js and npm, you can install the Firebase CLI through npm:

3. After installing Firebase CLI with npm

Run the command - "npm install -g firebase-tools" in cmd This installs the globally accessible firebase command. To upgrade to the latest version, just run the same command.

4. Initialize the application After you select the Firebase application that you want to deploy, enter cd in the project directory, for example D: / pradeep / website / and run the command: "firebase init" in cmd

By running the init firebase command, you will see that the file "firebase.json" is created in the root of your project (D: / pradeep / website /) Important note: Open the firebase.json file in notepad, if it {}, change it to {" hosting ": {" public ":". " }} and save.

One more thing, the index.html file along with other files should be in the same directory (D: / pradeep / website /)

5. Select the application created in the firebase console. If you have created more than 1 application, select any application, enter cmd - "firebase list" - a list of all applications will be displayed. then - "use of the fire base" and then

6. Expand your website To deploy your website, simply do: write cmd - "deploy firebase"

Finally, your application will be deployed to the .firebaseapp.com domain