Are you developing an Angular application and would like to see it running with production configuration live on the browser? Firebase hosting enables us to deploy any JS based application for free. Let me show you how you can achieve it.
Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). You can also pair Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices on Firebase.
All you need is access to Google workspaces, so a Gmail account will do the job.
- Go to https://console.firebase.google.com.
- Click on Add Project box.
Give your project a name. Since the domain is free, then you should find a slug which is not used, in order to create a meaningful hosting.Since I am using this domain for a Progressive Web Application built with Angular I will call it ng-pwa-hosting. I will also publish an article on how to get started with PWA in Angular soon.
You can Enable Firebase Analytics for the project.
Create your project. You’ll see some loaders and in the end it should look something like this
Press Continue, and there you have it. The project is set up and waiting for a deployment.
- Create a production build of your application → ng build (or if you’re in any older version use the flag — prod).
- Install firebase tools package globally → Open a terminal and run
npm i -g firebase-tools
- Login to firebase → Run the following command on the terminal
It should redirect you in the browser window asking for permissions. You need to grant those and when its done, you can just close the browser tab and see that you authenticated successfully message on the terminal.
- Initializing firebase → Run the command (if it’s not the first time doing it then you can skip it).
firebase init hosting
It will give you some options to be selected.
- Choose Use an existing project.
- Choose the default Firebase project for this directory (the name we just created above). ng-pwa-hosting
- Now it will ask for the public directory. This is the local production build folder. Mine is dist/angular-pwa.
- Choose to rewrite all url’s to index.html in order to be used as an SPA application.
If you want to setup automatic github deployments, you can do so, but I chose no, since I will build and deploy from my machine.
6.Don’t overwrite the existing index.html
Deploy to firebase
This will take your local files and upload them to firebase hosting. When it’s done you should see the domain where you can access your production running application. You can visit mine here: https://ng-pwa-hosting.web.app
Yuhuu🏋️🚀. Our app is live.
If you want to save some time with your local build and deployment you can create a custom command and put it in the script section of package.json. This way you don’t need to write build and then firebase deploy commands but do it all at once:
"deploy": "ng build && firebase deploy --only hosting"
And then you can run:
npm run deploy
and it will build and deploy your application to firebase.
Link of the bitbucket repository: https://bitbucket.org/klajdiavdiaj/angular-pwa/src/master
As usual, thank you for reading. I appreciate the time you take to read my content and stories. I hope you can find this article useful. If you like it give it 👏👏 and don’t hesitate to follow. Also check out my twitter profile: https://twitter.com/klajdiavdiaj6 and medium: https://medium.com/@klajdiavdiaj6
Stay tuned and happy coding!