Deploying An Angular CLI App To Firebase Hosting

 

 

Angular CLI

 

Angular CLI is a command line interface which helps to setup Angular applications easily. By default, it will structure the app and create the necessary files. With Angular CLI, it is even more easy to create production-ready applications.

 

Once the application finished where we can deploy? While there are many ways to deploy but here comes the Firebase which makes deployment super easy.

 

Firebase is a mobile and web application development platform developed by Firebase later acquired by Google in 2014. Firebase offers many great features.

 

Let’s see how to create an angular app and deploying it to firebase.

 

Install Angular CLI

 

We have to install Angular CLI to create an app. Use the below command to install.

 

npm install -g @angular/cli

 

Creating An Angular App

 

After installing angular CLI, you can able to create a new angular app.

 

ng  new app-name

 

Change it to the name you like, here I am naming it as angular-firebase.

 

ng new angular-firebase

 

Running An Angular App 

 

Once the app created, follow the steps to run the app.

 

cd angular-firebase/

 

ng serve --open

 

Deploy Angular app to firebase

 

 

Now our app is running up and working fine. Let’s start setting Firebase up for deployment.

 

 

Creating Firebase App

 

We have to create a Firebase account and a Firebase app to deploy.  Once you log in to your account create a new app.

 

 

Deploy Angular app to firebase

 

 

Now, I am creating an app with the name Angular Firebase App.

 

 

Deploy Angular app to Firebase

 

 

Install Firebase CLI Tools

 

Now we have to install Firebase CLI Tools to deploy the angular app to firebase.

 

npm install -g firebase-tools

 

After installing firebase tools we have to login to firebase using the terminal. Use the below command to login.

 

firebase login

 

Deploy Angular app to Firebase

 

After running login command, it will generate a link so open that link and authenticate it then logging from the terminal will become successful.

 

Deploy Angular app to Firebase

 

 

 

Also Read: How To Build Login Page Using Angular Material Design Clearly Explained

 

 

Link Your App To Firebase App

 

Now we have to link our local angular app to firebase app that we have created and to do this run the below command.

 

firebase init

 

After running the above firebase tools will ask the following questions

 

Deploy Angular app to Firebase

   

 

       1) Which Firebase CLI features do you want to setup for this folder?  (use space to select the option and press enter to confirm)

       Ans: Hosting

 

     2) Select a default Firebase project for this directory (Use arrow keys to select and press enter)

      Ans: Select the project to which you want to deploy.

 

      3) What do you want to use as your public directory?

      Ans: dist/angular-firebase (If you are using different name give that one)

 

     4) Configure as a single-page app (rewrite all urls to /index.html)?

      Ans: Yes

 

     After answering the above questions it will create two files in our application.

 

     1. firebaserc :  Sets the Firebase app which we linked to,

 

Deploy Angular app to Firebase   

 

    2. firebase.json : Sets the hosting folder and rewrites

 

Deploy Angular app to Firebase

 

 

Deploying An Angular App To Firebase

 

Connecting our local app to firebase is completed. Now we have to create a production build of our angular app.

 

ng build --prod

 

Once the build created, run the below command to deploy the application.

 

firebase deploy

 

Deploy Angular app to Firebase

 

Successfully the app is deployed. To check whether the app is working or not, visit the Hosting URL that we got in the console. There is also another way to open the application from the terminal itself.

 

firebase open hosting:site

 

It’s simple as like that! Try out deploying your angular apps to production with firebase hosting. In future, we will try with other hosting providers too. Post your comments below, we had like to hear from you!

 

Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer