Developing an Angular application is pretty easy, But to deploy it somewhere for public use you should have a domain hosting/servers. If you don’t have any servers or domain then you can always deploy for free to some providers like Github Pages, Herokuapp, Firebase etc. In this article, I am going to cover how to deploy any Angular app to Firebase hosting.
Photo by Pascal Meier on Unsplash
Before we jump to steps make sure you have Node and npm is installed.
Create a project in Firebase
To use firebase hosting first you need to create an account on firebase. Head toward https://console.firebase.google.com/ & login with your Google account. once you logged in you will be landed to this page, click on create a project.
Now you need to add a Project name & click Continue.
Once you added a project name, you will be landed to below page. If you wish to add a Google Analytics to your project then you can select the checkbox & click continue.
If you have checked the Google Analytics option then you will be asked for Configure Google Analytics. select your Analytics location & click on Create Project.
Yes! You have created your first project on Firebase.
Initialize/Install Firebase-tools
Head over to your project folder & run below command.
npm install -g firebase-tools
-g will install firebase-tools globally to your machine, If you don't want to install it globally then you can remove -g & run the command.
To check firebase-tools is properly installed then run below command, this command will show you the version of firebase-tools installed on your machine.
firebase --version
Now you need to login to your firebase account, remember to login with the same Google account from which we have created a project in the previous step.
firebase login
Once you logged in to Firebase, Now you need to initialize a Firebase project by running the below command.
firebase init
Now you will be asked for some configurations questions.
- Select Hosting option as we are hosting our application, you can select other options as well if you want to use firebase other services.
2. Next, you will be asked to create a new project or choose existing, select choose existing as we have already created a project on firebase console.
3. Next, You will be asked to select a project, you will be able to see the project name which you have created in the first step. select project name & click enter.
4. Next, you will be asked to select the public directory, Public directory is a directory in your project where your all the build files resided. Angular’s default URL for build files is dist/your-project-name/.
5. Next, you will be asked If your application in Single-page app, type Y as all angular app’s are single-page apps(basically firebase will redirect all the Sub URL’s to the index.html file).
6. Once you are done with all the steps you will see this screen.
Once the firebase init is done, Firebase will create a firebase.json file in your project directory. you can change the firebase configuration from this file also.
Now once you are done with the initialization process, Now build your angular application with below command. once your application is built you can see the build files in the “dist/your-project-name” directory of your application.
ng build --prod
Now it’s time to deploy your application to firebase with below command.
firebase deploy
Bingo! you just deployed your first angular app to Firebase hosting.
Heads Up: I am working on one of the cool Chrome extensions which helps to format your code easily & it’s superfast It can format your code within milliseconds. on top of it, it’s completely free for use. So go & hit that Add to Chrome Button. https://chrome.google.com/webstore/detail/code-formatter/njpgcnaadikbannefjibknjopmogeidm
Related Articles
[How to create a Github profile readme
Github recently released GitHub profile readme feature where user can create a customized profile README and show it on…medium.com](https://medium.com/@akashbijwe/how-to-create-a-github-profile-readme-7b33a0cc7ef8 "medium.com/@akashbijwe/how-to-create-a-gith..")
[How to create & deploy github.io page for free
Yes, you read it right, now you can create a Github page & host it for free. Whether you want to deploy your portfolio…medium.com](https://medium.com/@akashbijwe/how-to-create-deploy-github-io-page-for-free-9e672c8b12d2 "medium.com/@akashbijwe/how-to-create-deploy..")
[Custom Domain for your Github pages
Yes, You can add a custom domain name for your Github page. You just need some basic knowledge of git and domain…medium.com](https://medium.com/@akashbijwe/custom-domain-for-your-github-pages-fc4612dd3003 "medium.com/@akashbijwe/custom-domain-for-yo..")