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

Create a Firebase Project

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

Install Firebase-tools NPM package

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

Build Your Project for Production

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

or

npm run-script build -- --prod

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

Initialize Your Project

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?
Yes
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?
dist
Configure as a single-page app (rewrite all urls to /index.html)?
yes

In above config,

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

Deploy!

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.

Conclusion

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!

Banujan Balendrakumar

Written by

Bsc (Hons) Information Technology(Data Science) Student @ SLIIT. Software Engineer and Cloud Architecture Enthusiast.

More From Medium

Also tagged Deploy

Also tagged Firebase

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