How to Deploy an Angular App to Firebase Hosting

In this episode, we're going to deploy an Angular 4 app to Firebase hosting. After some initial configuration, you can deploy your app to firebase in a matter of seconds. The best part is that its free for low volume usage and you'll be prepared to scale up as your app grows.

Step 1 - Compile your App

Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.

Step 2 - Install Firebase Tools

Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account.

Step 3 - Initialize your Project

Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app.

For the most part, you can stick with the default settings, except in the follow cases:

Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes

Step 4 - Deploy

Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good.

That's all for firebase deployment, see you next time.

[akinoreiki]

Looked all over just to figure out why I was receiving an error on the "public directory" part. As soon as I typed "dist" like you said, it worked. Thanks! Saved my time!

[TechnicalCoffeeLogic]

Thanks for this video, still really helpful 5 years later.

Great video but it needs a correction. My angular build doesn't build under /dist it builds under /dist/myapp so when I execute firebase init I have to choose /dist/myapp as the public folder and then it works

[rattaponwannaphat]

Great video, short and into point .
Thank you

[Emekaelo]

For angular applications, public directory is dist/<app-name>

[bryan.canelas]

😱 After 4 years, still useful! Definitely, developers don't trust their memories. LOL

[ebereuzodufa]

Awesome video.
Just a little add - use firebase login --interactive if you get 'Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.' on firebase login.

[CarlosCarvajal]

Excellent, short but with all, thanks!

[samredmond]

Awesome video, love it. Also that music is awesome.

[Aiviymatoc]

worked like a charm, thanks alot mate :)

[RajKumar-mvom]

Hey when i deployed my angular project this way I get a firebase docs page instead of my angular home page

[alexisdauli]

Thanks bro. this was simple and wonderfull.

[mctrjalloh]

That's cool. Now what the url where it is deployed looks like?

[wendysanarwanto]

So dead simple compared with deploying web SPA into S3 through using either AWS-CLI or Serverless

[ctransit]

Gives me an error when I run firebase init. How to fix? The error says failed to create google cloud project.

[vitaliyduvalko]

can you make a video when we might to compare the data of auth with the data on database? for example check if the visitor is user or admin?

[SonreirJMusic]

What is the title of the background music?

[ejusius]

How about not single page applications deployment?

[thebaconbreadful]

Hey guys and girls, if you are beeing redirected to the firebase documentations I highly suggest to clear your cache if you've already tried to fix it. Thanks to ​ @Richard Degenne

[JFkingW]

All it shows me when I finished is a Dialog with "Welcome
Firebase Hosting Setup Complete"