Deploy an Angular Web Application Powered by Firebase to Firebase Hosting
The last step we'll take is to make our application public.
We'll use the Angular CLI to generate a production build of our application, and then we'll use the Firebase CLI to deploy our application to Firebase hosting servers.
Firebase hosting is a great choice for us because Firebase Hosting will incorporate the services that we use in the app by default.
Man 1: [0:00] Now that our application is ready, we want to be able to share this application with our users. For that, we are going to use Firebase Hosting. This is Firebase Hosting solution it will let you deploy your application here so that it is going to be accessible on the web.
[0:17] Since we set everything up during the initialization process, we can come here and cancel our terminal and we are going to type Firebase deploy. When you type Firebase deploy, it's going to deploy all of the services that you have in our application. For example, if you're using Cloud Functions, it's also going to deploy your functions.
[0:39] Right now we can safely use Firebase deploy and it will only deploy our applications because we are not using different services. If you want in the future to only deploy storage, only deploy functions or to only deploy hosting, you would add this only flag and the name of the service that you want to deploy.
[1:07] Here, we get an error that www folder doesn't exist. That's because we haven't generated a build for our project. I'm going to do an ng build. This is going to be a production build since I'm going to deploy this to our server.
[1:24] After the build is done, we want to verify that the build is happening in the www folder. This doesn't have to be this folder necessarily. You just need to make sure of something.
[1:36] You can go into Firebase.json, and here you have the hosting configuration. It's telling you where it is going to get the data. If your Angular application is set up to create the builds in a dist folder, output folder, public folder, you could just adjust that here.
[1:55] Now, we can go back to our application and rerun our firebase deploy command. Now, after it's deployed, we can go back to our Firebase console and here, in hosting, we're going to reload the page.
[2:10] You will see that it is going to tell you when the latest deployment was, and it's going to give you two domains where you can access your application from.
[2:24] If I got this, you see that here it says eggheadtasklistexample.web.app. This application is deployed on the web. Now, our application is live and we can use this link to send to everyone to use it.