1. 28
    Deploy an Angular Web Application Powered by Firebase to Firebase Hosting
    2m 40s

Deploy an Angular Web Application Powered by Firebase to Firebase Hosting

Jorge Vergara
InstructorJorge Vergara
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated a year ago

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.

egghead
egghead
~ 26 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today