Image for post
Image for post

Hosting Angular 2 Applications On Firebase

In this tutorial you’ll learn how to initiate a new Angular 2 application, get it up and running on your local system and finally deploy it to the free Firebase hosting plan and make it available in the WWW.

Step 1: Use Angular CLI To Initiate A New Project

Angular CLI is a command line interface & scaffolding tool which makes it very easy to initiate and manage Angular 2 projects from the command line. First make sure Angular CLI is available on your system by using the following command for download and installation via NPM:

$ npm install angular-cli -g

Once installed the ng command becomes available and we can initiate a new Angular 2 project by executing:

$ ng new fb-host-test

A new folder is created with the name of the project () and the initial project structure is created and all dependencies are downloaded. Having completed that step you can switch into the new project directory:

$ cd fb-host-test

and test if the application is already working by executing:

$ ng serve

This is starting up the web server and making the application available at http://localhost:4200. The result which is displayed in the browser should look like the following:

Image for post
Image for post

Step 2: Building For Production

To prepare deployment we need to build our application for production. This step can be completed by using the ng command in the following way:

$ ng build --prod

This runs a project build which contains additional steps like bundling and minification which optimizes the result for production usage. The result of this build process is made available in the folder. The content of that folder will be used in the final deployment step.

Step 3: Creating A Firebase Project And Installing Firbase Command Line Tool

Now that we have a running Angular 2 project which is prepared for beeing deployed on our local system we’re able to continue to prepare Firebase hosting. The first thing we need to do is to open the Firebase console at https://console.firebase.google.com/ and create a new Firebase project:

Image for post
Image for post

To deploy our local Angular 2 application to the Firebase hosting service we need to install the Firebase command line tools first by using NPM again:

$ npm install -g firebase-tools

After the installation has been completed the new command should be available. In the next step we'll make use of this command to complete the deployment.

Step 4: Deploying To Firebase

With the firebase command available the deployment process can be started next. First, use the following command to login to firebase:

$ firebase login

Executing this command will open the browser and ask you for authentication. Login with your Firebase account. Afterwards you can close the browser window. On the command line you'll receive the message the login has been performed successfully.

Image for post
Image for post

Being authenticated you can now use the command again. This time we're using the init option :

$ firebase init

First of all you're being asked which of the Firebase client features you want to use. Select the option . Next the Firebase client will ask which folder to use for deployment. Type in . That is important because that is the location where our production build is stored.

Next the question is ask if this app is a single page app and if it should rewrite all URLs to index.html. In our case we need to answer .

Last question is if Firebase should over write file index.html. The answer to that question is .

Image for post
Image for post

Having provided all the answers the app is now ready for being deployed to Firebase. The Firebase configuration for our project is stored in the firebase.json. You can now perform the deployment process by using the following command:

$ firebase deploy

Firebase will provide a URL which you can use to access your application online. You can also use a custom domain. The custom domain configurtion can be found in the Firebase console backend.

Image for post
Image for post

Finally you should see the same result in the browser as before (when running the application on localhost):

Image for post
Image for post

Video Tutorial

This video tutorial contains the steps described in the text above:

CodingTheSmartWay.com Blog

CodingTheSmartWay.com

Sebastian Eschweiler

Written by

Full-stack Web Developer, CodingTheSmartWay.com

CodingTheSmartWay.com Blog

CodingTheSmartWay.com is a blog about latest web and mobile technologies.

Sebastian Eschweiler

Written by

Full-stack Web Developer, CodingTheSmartWay.com

CodingTheSmartWay.com Blog

CodingTheSmartWay.com is a blog about latest web and mobile technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store