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 (fb-host-test) 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:
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 dist 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:
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 firebase 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.
Being authenticated you can now use the firebase 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 Hosting: Configure and deploy Firebase Hosting site. Next the Firebase client will ask which folder to use for deployment. Type in dist. 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 yes.
Last question is if Firebase should over write file index.html. The answer to that question is no.
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 configuration can be found in the Firebase console backend.
Finally you should see the same result in the browser as before (when running the application on localhost):
ONLINE COURSE: Angular - The Complete Guide
- This course covers Angular 4
- Develop modern, complex, responsive and scalable web applications with Angular
- Use their gained, deep understanding of the Angular 2 fundamentals to quickly establish themselves as frontend developers
- Fully understand the architecture behind an Angular 2 application and how to use it