Build and deploy your Angular app to Firebase Hosting

[00:01] I used the Angular CLI to generate here a brand new Angular project. As you can see, it loads up here in our browser.

[00:07] I also created a new firebase project at firebase.google.com. What we would like to do now is to basically deploy our Angular app to the new firebase hosting offer they have.

[00:19] In order to prepare our application for firebase deployment, what we have to do first is to install the coding firebase tools. Once we have the tools, we have to authenticate ourselves with firebase. We can do that by firebase log in. In my case I'm already logged in and set up.

[00:39] Next we need to initialize the firebase project. We need to basically connect our local Angular project here with our firebase project online. We can do that by simply typing firebase in it.

[00:52] Great. We get on our post a couple of questions. First of all, whether we would like to set up here a database project, and let's do that. We also want to set up the hosting project here.

[01:06] Next, we need to obviously associate our project with the online firebase project, which is in this case the Egghead NG Deploy demo, which we have seen previously. We can just confirm because we are not going to take a look at the database rules now.

[01:19] Now we also need to give firebase the public directory. If we compile our application with the Angular CLI, what it's going to create is a disc directory where it puts the compiled assets. In this case it isn't public, but we have to indicate this here.

[01:35] Next, we obviously want to confer this as a single page application. Now our firebase JSON is complete.

[01:42] We are now ready to build our project and deploy it to firebase. For that purpose let's switch briefly in our package JSON and add here a new build command, which will execute the underlying Angular CLI production belt. We do that by invoking NG build minus minus production.

[02:06] We can now switch back to our terminal here and type NPMrunbuilt.prod which will now execute the production belt of our Angular application. As you can see here, we get our disc directory with a series of compiled and optimized assets.

[02:28] We can now invoke the firebase deploy command to deploy our application to firebase. If we switch over to firebase, we can see that our hosting page here is already refreshed. We have here an URL where our project will be available publicly as well as the deployment history. In fact, if we open up that page, we can see our DM application being served.