How to deploy your Angular 18 to Firebase Hosting
Using the firebase spark plan, it is free for you to use firebase hosting to deploy your web apps on the fly. In this article i will teach you how to deploy your AngularApp to Firebase Hosting
Creating new Angular Project
Let's create a new Angular Project. To create a new Angular app use the Angular cli command
ng new FirebaseHostingDemo
Open your project in Visual Studio Code
Creating Firebase Project and Firebase WebApp
Go to https://console.firebase.google.com/ . Create new Firebase Project
Disabled Google Analytics, in this blog we will not use Google Analytics.
Wait for it to finish
Next, we need to create a new web app in Firebase. Click the highlighted icon to create web app
Enter your web app nickname, could be anything you want. In this example we called it "FirebaseHostingDemo"
Tick the checkbox "Also set up Firebase Hosting" and click "Register app"
Go back to your AngularApp install firebase using npm
npm install firebase
Initialize Firebase in your Angular App
Go back to console.firebase.com website setup. Copy the configuration to your AngularApp
In Visual Studio Code Angular App, open app.component.ts
Paste the configuration from console.firebase.com to app.component.ts
Install Firebase Tools
Go back to your vs code terminal and install
npm install -g firebase-tools
In VS Code Terminal, login your firebase account, to login simply write the command below
firebase login
Initialize Firebase to your AngularApp
Run the firebase init command to initialize firebase in your angular app
firebase init
Are you ready to proceed ? Y
Which Firebase features do you want to set up? ....
Project Setup > Use an existing Project
List of your projects will be displayed. Select your project "fir-hostingdemo-...." you want to use. In my case here is my project name
Do you want to use public directory? write "public"
Configure as SPA / single page app? Y
Setup automatic builds? N
Congratulations, Now your firebase initialization has been configured
In your AngularApp folder you should see firebase.json and .firebasessrc files created
Go back to firebase.console.com Copy the site value and public and paste it to your firebase.json
change the "public" to "public/browser" too.
Go to angular.json change the outputPath from "dist/,,," to
to public
Now run ng build, to create build files
ng build
After the build, you will see the public folder will have "browser" folders and "server".
These are the build files we will deploy to firebase hosting
Deploying AngularApp to Firebase Hosting
Let's go to Firebase Hosting . To go click "Build" > Hosting
As you can see below you have two hosting environment.
To view your website you can view the domain and preview
By default this what your website should looks like this. if you have not done any deployment / release yet.
Now we will deploy our AngularApp to firebase hosting
Finally we have sucessfully deployed our AngularApp to Firebase Hosting
If you want to change the deployment hosting target of your release you can simply change the
firebase.json file and change the site property to whatever site you want to deploy
In my firebase project i can deploy to this two hosting environment
Thank you for reading my article. Please react or comment if you have any issues.
Top comments (1)
Nice. Keep writing like this.