In this article we going to learn how to host an Angular application on Firebase Hosting so your app is live on the internet with a proper HTTPS URL in just a few minutes.
You've built your Angular app, it runs perfectly on localhost, and now you want to share it with the world. You could go with Azure Static Web Apps, Netlify, Vercel — all good options. But Firebase Hosting is one of the fastest and cleanest ways to get an Angular app live, especially if you're already using Firebase for authentication or Firestore in the project.
Even if you're not using any Firebase services at all, Firebase Hosting is still a great choice for Angular. It's free for most small to medium projects, gives you a CDN out of the box, HTTPS is automatic, and deployment is one command — firebase deploy. Once you've set it up the first time, deploying an update literally takes 30 seconds.
Let me walk through the whole setup from scratch.
This tutorial shows how to:
- Create a Firebase project from the Firebase Console
- Install the Firebase CLI on your machine
- Build your Angular app for production
- Initialize Firebase Hosting in your Angular project
- Deploy your Angular app to Firebase Hosting
- Set up a custom domain for your live app
- Configure rewrites so Angular routing works correctly on Firebase
Why Firebase Hosting for Angular
Before jumping in, a quick word on why Firebase Hosting works so well for Angular specifically.
Angular apps are Single Page Applications — there's one index.html and Angular handles all routing in the browser. The problem with most hosting setups is when a user directly visits a route like https://yourapp.web.app/dashboard, the server looks for a file called dashboard which doesn't exist, and returns a 404.
Firebase Hosting has a rewrite feature that solves this out of the box — you tell it to serve index.html for every route, and Angular's router takes it from there. We'll set that up during the initialization.
Also — Firebase Hosting is backed by Google's CDN. Your files are served from edge nodes close to your users, so load times are fast globally.
What You Need Before Starting
Make sure these are ready :
- Node.js installed on your machine. Check with
node -vin terminal. - An Angular project ready to deploy. Any Angular app works.
- A Google account. Firebase is a Google product so you'll sign in with Google.
- npm or yarn for installing packages.
Step 1 : Create a Firebase Project
Go to console.firebase.google.com and sign in with your Google account.
Click Add project. Give it a name — something like my-angular-app. Firebase will generate a project ID based on the name. You can customize it if you want but the default is usually fine.
Firebase asks if you want to enable Google Analytics. For a simple hosting project it's optional — you can enable or skip it. Click Create project.
Takes about 30 seconds. Once done, click Continue. You'll land on the Firebase project dashboard.
That's the only setup needed on the Firebase Console side for now. Everything else happens in the terminal.
Step 2 : Install the Firebase CLI
Open your terminal and install the Firebase CLI globally :
npm install -g firebase-tools
After installation, verify it worked :
firebase --version
You should see a version number like 13.x.x. If you get an error, try running the install command with sudo on Mac/Linux or as administrator on Windows.
Now log in to Firebase with your Google account :
firebase login
This opens a browser window and asks you to sign in. Sign in with the same Google account you used to create the Firebase project. After signing in, go back to the terminal — it should say "Success! Logged in as your@email.com".
Step 3 : Build Your Angular App for Production
Before deploying, you need a production build. Angular's production build minifies code, removes debug info, and optimizes for performance.
In your Angular project folder, run :
ng build
In Angular 17 and above, ng build defaults to production mode. In older versions you might need :
ng build --configuration production
After the build completes, check that a dist folder was created in your project root. Inside you'll see a folder with your project name — something like dist/my-angular-app/browser in Angular 17+ or dist/my-angular-app in older versions.
Open the folder and confirm index.html is there. That's what Firebase Hosting will serve.
Make a note of this path — you'll need it in the next step.
Step 4 : Initialize Firebase Hosting
In your Angular project root folder, run :
firebase init hosting
The CLI asks you a series of questions. Here's exactly what to answer :
Which Firebase project do you want to associate with this directory? Select Use an existing project and choose the Firebase project you just created.
What do you want to use as your public directory? This is the path to your build output. Type the path to your dist folder :
- Angular 17+ :
dist/my-angular-app/browser - Angular 16 and below :
dist/my-angular-app
Replace my-angular-app with your actual project name from angular.json → defaultProject.
Configure as a single-page app (rewrite all URLs to /index.html)? Type yes. This is the important one for Angular routing. Without this, any direct URL navigation will 404.
Set up automatic builds and deploys with GitHub? Type no for now. You can set this up later if you want automatic deployments on every git push.
File dist/your-app/browser/index.html already exists. Overwrite? Type no. You don't want Firebase to overwrite the index.html you just built.
After answering all questions, Firebase creates two files in your project root :
firebase.json— hosting configuration.firebaserc— project association
Open firebase.json and verify it looks like this :
{
"hosting": {
"public": "dist/my-angular-app/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The rewrites section is what makes Angular routing work. Every URL that doesn't match a static file gets served index.html and Angular's router handles the rest.
If the public path looks wrong, edit it directly in firebase.json to match your actual dist folder path.
Step 5 : Deploy to Firebase Hosting
You're ready to go live. Run :
firebase deploy
The CLI uploads your build files to Firebase and shows progress. When it's done you'll see something like :
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/my-angular-app/overview
Hosting URL: https://my-angular-app.web.app
Open that Hosting URL in your browser. Your Angular app is live on the internet with HTTPS — no certificate setup needed, Firebase handles all of that automatically.
The default domain is your-project-id.web.app. Firebase also gives you your-project-id.firebaseapp.com — both work.
Step 6 : Test Angular Routing
After deployment, test that Angular routing works correctly. Navigate to your app and click through to different routes. Then try directly typing a deep URL in the browser — something like https://your-app.web.app/dashboard or https://your-app.web.app/profile/settings.
If you set up the rewrites correctly in Step 4, these should all load fine. If you get a 404, open firebase.json and make sure the rewrites section is exactly as shown above. Then redeploy.
Also test browser refresh on a deep route. Refreshing on a client-side route should still load the app correctly, not 404. This is the most common issue people hit when hosting Angular apps and the rewrite config is what fixes it.
Step 7 : Set Up a Custom Domain
By default your app is on your-project.web.app. For a real project you'll want your own domain like www.yourapp.com.
Go to console.firebase.google.com → your project → Hosting → Add custom domain.
Enter your domain name. Firebase will give you two DNS records to add :
- A TXT verification record — proves you own the domain
- An A record pointing to Firebase's servers
Go to your domain registrar (GoDaddy, Namecheap, Google Domains, Cloudflare — wherever you bought the domain). Add both records in your DNS settings.
Come back to Firebase Console and click Verify. DNS propagation can take anywhere from a few minutes to a few hours depending on your registrar.
Once verified, Firebase automatically provisions an SSL certificate for your custom domain. Takes a few more minutes. After that your Angular app is live at your custom domain with HTTPS — completely free.
Step 8 : Update and Redeploy
When you make changes to your Angular app and want to push an update, the process is :
ng build
firebase deploy
Two commands. That's it. Firebase deploys only the changed files so updates are fast even if your build output is large.
If you want to deploy only hosting (not other Firebase services if you've added them), use :
firebase deploy --only hosting
Want to preview changes before pushing to production? Firebase Hosting has a preview channels feature :
firebase hosting:channel:deploy preview-name
This creates a temporary URL like https://my-angular-app--preview-name-xxxx.web.app that you can share for review. The preview channel expires automatically after 7 days and doesn't affect your main production deployment.
Common Issues
404 on direct URL navigation or page refresh
The rewrites config in firebase.json is missing or wrong. Make sure the rewrites section has "source": "**" pointing to /index.html. Redeploy after fixing.
App deploys but shows blank page
The public path in firebase.json is pointing to the wrong folder. The folder it points to must contain index.html directly. Open the folder in file explorer and check. Common mistake — pointing to dist/my-app when Angular 17 outputs to dist/my-app/browser.
firebase deploy gives permission error
Run firebase login --reauth to refresh your authentication. Sometimes the login session expires.
Changes not showing after deploy
Browser cache. Hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). Firebase deploys the latest files immediately — if you're seeing old content, it's cached in your browser.
Custom domain stuck on "Awaiting DNS propagation"
DNS takes time — sometimes up to 48 hours but usually much less. Check that you added both the TXT record and the A record correctly. Use a tool like dnschecker.org to verify the records are propagating.
Automate Deployment with GitHub Actions (Bonus)
Once your project is on GitHub, you can automate deployment so every push to main branch automatically deploys to Firebase.
Run this in your project folder :
firebase init hosting:github
The CLI will ask for your GitHub repo and which branch to deploy from. It generates a GitHub Actions workflow file in .github/workflows/. After committing and pushing that file, every push to your selected branch triggers a build and deploy to Firebase automatically.
The workflow file looks something like this :
name: Deploy to Firebase Hosting on push to main
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install dependencies
run: npm ci
- name: Build Angular app
run: npm run build
- name: Deploy to Firebase
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: your-firebase-project-id
Push to main, GitHub builds and deploys automatically. No manual steps at all.
Summary
You learned how to host an Angular application on Firebase Hosting. You covered :
- Creating a Firebase project from the Firebase Console
- Installing Firebase CLI with
npm install -g firebase-toolsand logging in - Building the Angular app for production with
ng build - Initializing Firebase Hosting with
firebase init hostingand setting up the public directory path - The rewrite configuration in
firebase.jsonthat makes Angular routing work correctly - Deploying with
firebase deployand getting a live HTTPS URL instantly - Testing Angular routing and page refresh on deep URLs
- Adding a custom domain with automatic SSL through Firebase Console
- Updating and redeploying with just two commands —
ng buildandfirebase deploy - Preview channels for testing before going live
- Automating deployment with GitHub Actions
Firebase Hosting is genuinely one of the smoothest ways to get an Angular app live. Free tier is generous, CDN is built in, HTTPS is automatic, and once the initial setup is done — deploying an update is just two commands. Hard to beat for Angular projects of any size.
I hope you like this article...
Happy coding! 🚀
0 Comments