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
Build Your Project for Production
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.
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,
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.
This command will ask you some information about deployment. Choose following options for each…
Are you ready to procees?
YesWhich Firebase CLI features do you want to set up for this folder?
Hosting: Configure and deploy Firebase Hosting sitesPlease select an option?
Use an existing projectSelect 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?
distConfigure 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,
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.