How to Deploy an Angular App to Firebase Hosting in 2019…

Nathan K
Nathan K
Jun 24 · 3 min read

My fellow Angular wizards,

Why does it have to be SO hard to deploy your awesome Angular app to the cloud for others to admire?

If you’re like me, you’d rather focus on coding. Deploying should be something a toddler could do. But say…

…what are all these Firebase options about data storage, authentication, URL re-writes and distribution directory’s?

I thought coding was hard. Does deploying have to be harder?

Well… not any more code whiz! Let’s make you a deploying rock-star by following some simple steps to deploy a basic Hello World Angular website to Firebase Hosting.

  1. Begin by going to the Firebase Console and adding a new project. All you’ll have to do is give it a name and click “Create Project”.
Add a Firebase Project

2. Install Firebase by opening a terminal (or command prompt) and typing npm i firebase -g

3. Inside of a terminal (or command prompt) cd into the directory with your Angular app. In my case cd /home/daniel/Angular/hello-world

4. Build the app by running ng build

Build Angular App

5. Once the build has finished we’ll run firebase init to initialize the Firebase project.

6. Select the “Firebase Hosting” option by using your arrow keys and then hitting Enter.

Select the Hosting option

7. Select the Firebase project that you created in the Firebase Console.

8. You will be asked to select your public directory. This is the directory where your built app was saved to. In my case, it’s dist/hello-world.

Select the public directory

9. You will be asked if you want to redirect all request’s to index.html. Note: If you use Angular Routing select Yes. Otherwise, you can probably select No.

10. You’ll be asked if you want to overwrite index.html. Select No.

And you are ready to deploy!

Type firebase deploy and give it some time to upload your files.

Deploy successful!

Bravo! You’re done!

Please click that 👏 button. And don’t forget follow me on Medium for more tips like this. Thank-you!

P.S. — Here’s a link to the Angular app that I deployed.

Nathan K

Written by

Nathan K

JavaScript developer. TypeScript lover. Writing code since 16. Working professionally since 18. Part-time freelancer. And you?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade