Building an Angular application is exciting, but let’s be honest, manually deploying an angular application can be a drag. Every small change means ng build, deploy, and waiting. What if I told you there’s a better way a way to instantly deploy your app to Firebase Hosting every time you push to GitHub?

That’s where Firebase Hosting and GitHub Actions come together to create a powerful, free, and incredibly efficient CI/CD pipeline for your Single Page Applications (SPAs).

In this guide, we’ll walk through setting up automatic deployments for your Angular app to Firebase Hosting (the classic way, for maximum flexibility and cost-efficiency) using GitHub Actions.

Why CI/CD for SPAs?

Speed: No more manual deployments. Push your code, and the magic happens.

Reliability: Automated builds reduce human error.

Collaboration: Everyone on your team benefits from consistent deployments.

Preview Environments: (My favorite!) Get unique URLs for every pull request to test features before merging.

Step 0: Ensure Firebase Hosting is Ready (and working)

First things first, let’s ensure your Angular app builds correctly and can be deployed manually. This verifies your firebase.json and public directory settings.

Build your Angular app for production:

npm run build
# or if you prefer the Angular CLI directly:
# ng build --configuration=production

This command will output your compiled index.html, JavaScript, and CSS files into a directory like dist/your-app-name/browser.

Deploy manually to Firebase Hosting:

firebase deploy --only hosting

Step 1: Initialize GitHub Actions with Firebase CLI

Firebase makes setting up GitHub Actions incredibly easy. Navigate to your project root in the terminal and run:

firebase init hosting:github

This command kicks off an interactive wizard. Here’s how to answer the prompts for an Angular SPA:

"For which GitHub repository would you like to set up a GitHub workflow?"

Enter your repository in the format: your-github-username/your-repo-name (e.g., prasunchakra/areteshala).

(A browser window might open for GitHub authentication – follow the prompts to grant access.)

"Set up the workflow to run a build script before every deploy?"

Yes

What script should be run? Enter npm ci && npm run build

Why npm ci && npm run build? npm ci ensures a clean, fast, and consistent dependency installation crucial for CI environments by adhering strictly to package-lock.json. npm run build then compiles your Angular application.

"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?

Enter main (or master, depending on your primary branch). This should be enough and you should see something like this.

Step 2: Commit and Push the Workflow Files

The firebase init hosting:github command made a few important changes to your project:

.firebaserc: Contains your Firebase project ID.

firebase.json: Updated with hosting rules and potentially a target if you’re deploying multiple sites.

.github/workflows/firebase-hosting-merge.yml: This is your main CI/CD workflow. It defines the steps to build and deploy your app to the live channel when changes are merged into your main branch.

.github/workflows/firebase-hosting-pull-request.yml: (If you enabled preview channels) This workflow handles deploying temporary preview versions of your app for each pull request.

It’s necessary to commit and push these files to your GitHub repository, making sure you have .firebase (the local cache directory) in your .gitignore file to avoid accidentally committing temporary files.

git add .
git commit -m "Setup Firebase Hosting CI/CD with GitHub Actions"
git push origin main

Step 3: Watch the Magic Happen!

Now, the automation is live!

For live deployments: Every time you merge a Pull Request into your main branch, GitHub Actions will automatically kick off, build your Angular app, and deploy it to your Firebase Hosting live channel (your-project-id.web.app). You can monitor the progress under the "Actions" tab in your GitHub repository.

This setup provides a solid foundation. You can further enhance your .github/workflows/*.yml files to include:

Unit Tests: Run npm test or ng test –watch=false –browsers=ChromeHeadless before the build step to ensure code quality.

Linting: Add npm run lint to catch style and error issues.