How to Deploy and Host an Angular application on Firebase?
Introduction:
In this article, we will see how we can deploy an Angular application on Firebase. It is very simple and straight forward.
?
Description:
?
1) Make sure you have Firebase account. If not, create a Firebase account here:?https://firebase.google.com/
2) Create a GitHub account and create one repository as well. Sample repository:?https://github.com/PranamBhat/angular-firebase-hosting
?
3) Create a new Angular application using this command:
ng new angular-firebase-hosting?
4) cd?angular-firebase-hosting
5)?ng serve --open
6) Create a GitHub Repository and add your code in GitHub Repository.
7) Go to?https://console.firebase.google.com/u/0/
8) Click on "Add Project" and name it as "Firebase Test Application"
?
9) Click on "Select an account" and "Create a new account". Give some account name.
?
?
10) Chose "Analytics location". Select "I accept the?Google Analytics terms" and click on "Create project".
?
11) Go to Angular CLI and run this command.
npm install -g firebase-tools
If there is any error, then run with sudo.
12)?firebase login
13)?firebase init
14) It will prompt with couple of questions. Answer them carefully.
?
? What do you want to use as your public directory?
领英推è
Give "dist/project-name" In my case, it is : dist/angular-firebase-hosting
?
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File dist/angular-firebase-hosting/index.html already exists. Overwrite? Yes
?
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
Give your GitHub username followed by repository name. In my case : PranamBhat/angular-firebase-hosting
?
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm ci && npm run build
?
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master
?
15) Now the Firebase initialisation complete!
16) Execute these commands:
ng build --prod --aot
firebase deploy
??
17) That's all. Now the?Deployment is completed!
18) Open the "Hosting URL" to see the hosted application on Firebase.?
?
Conclusion:
In this article, we have learned deploying an Angular application on Firebase with step by step guide. Hope you liked it. Give a thumbs up and share it across your friend's and network. Thank you.
?
Center Developer II en Ntt Data Europe & Latan
11 个月Hello there! I've been following this tutorial and it was very helpful. I just had a small issue when deploying because the app wouldn't show up until I manually modified the URL. After doing some research, I found out that the command to generate the distribution (ng build --prod --aot) is deprecated, and currently, we use ng build --configuration production. Thank you very much for sharing, it was immensely helpful!