Deploy Angular on Firebase Hosting for free!

Hi! there,

Here we gonna see, How to deploy angular app on firebase hosting for free. Let’s move on Step-By-Step

Login to your firebase account and Go to console. Click on Add Project & Name your project.

firebase-tools provides CLI interface to connect and manage your firebase project.

Install firebase-tools in your project.

npm install -g firebase-tools

Firebase CLI reference

Firebase won’t serve angular development server. It only supports static files such as HTML,CSS,Javascript and other assets.

You need to build your angular application for production to generate static & optimal resources.

To build your angular for production,

ng build --prod


npm run-script build -- --prod

Now you can see a folder called dist which has the production build resources.

Now you need to login your google account to authenticate your firebase-cli account.

Run the following command in your directory to login,

firebase login

It will re-direct you to browser to select/login to your google account.

After above process, You need to Initialize your angular project for firebase deployment. Run the following command in your project to initialize.

firebase init

This command will ask you some information about deployment. Choose following options for each…

Are you ready to procees?
Which Firebase CLI features do you want to set up for this folder?
Hosting: Configure and deploy Firebase Hosting sites
Please select an option?
Use an existing project
Select a default Firebase project for this directory?
** will list your filebase project, Select correct project **
What do you want to use as your public directory?
Configure as a single-page app (rewrite all urls to /index.html)?

In above config,

Our production build is located in dist directory, So the public directory is dist.


Now it’s time to deploy the app to firebase.

Run following command to deploy,

firebase deploy

After running this command, Firebase will deploy your app source on firebase server and setup a URL to access your app.

After deployment you will find your app url in terminal, Or you can find it out in firebase console.


Firebase is a great service of google. Using free plan, You can only host application upto 1GB. which means the hosted resources cannot be exceeded 1GB.

If you have resources more than 1GB such as images/videos, The best way is put those assets in Firebase Storage. It provides storage upto 5GB for free. But It also has some upload/download restrictions.

See firebase pricing for more info…

Always build your angular app for production before deploy to optimize the app performance and size.

You can also setup your own custom domain name for your hosted app.

Thank you!

Senior Software Engineer | Auth0 Ambassador | Blogger | Stackoverflower