Deploy Angular 16 Firebase App to GitHub using Firebase CLI
Firebase is an intuitive mobile and web development platform provided by Google. It provides a wide array of tools and services to make the developers capable of creating high-quality apps, improve user engagement, and scale their applications effectively.
Here are some key features and services of Firebase:
Real-time Database: Firebase provides a cloud-hosted NoSQL database that allows developers to store and sync data in real-time across clients. It enables real-time data synchronization, making it ideal for collaborative and real-time applications.
Authentication: Firebase Authentication provides an easy-to-use authentication system that allows developers to authenticate users using email and password, social logins (e.g., Google, Facebook, Twitter), phone number authentication, and more. It handles user management, password resets, and identity verification.
Cloud Firestore: Firestore is a flexible and scalable NoSQL document database that allows developers to store, sync, and query data for mobile, web, and server applications. It offers strong offline support, real-time updates, and powerful querying capabilities.
Cloud Storage: Firebase Storage offers secure file uploads and downloads for your apps. It provides scalable cloud storage for media files, user-generated content, and other application data. It also integrates with Firebase Authentication for secure access control.
Cloud Functions: Firebase Cloud Functions lets you run server-side code in response to events triggered by Firebase features and HTTPS requests. You can use it to automate tasks, process data, and extend the functionality of your Firebase apps.
Hosting: Firebase Hosting allows you to deploy and host your web apps and static content quickly. It provides fast and secure global content delivery with a free SSL certificate and supports custom domains.
Cloud Messaging: Firebase Cloud Messaging (FCM) enables you to send push notifications and messages to users across multiple platforms, including Android, iOS, and web. It helps you engage with your users and keep them informed in real-time.
Performance Monitoring: Firebase Performance Monitoring allows you to gain insights into your app’s performance and user experience. You can track app startup time, network latency, and other performance metrics to identify and fix bottlenecks.
Analytics: Firebase Analytics provides detailed app usage and engagement data, including user demographics, in-app events, and user behavior. It helps you understand how users interact with your app and make data-driven decisions.
Test Lab: Firebase Test Lab offers a cloud-based infrastructure for testing your app on real devices. It allows you to run automated tests, perform compatibility checks, and identify issues before releasing your app to production.
1. Prerequisite
In order to run an Angular project, you must have a Node JS development environment set up in your system.
If you don’t have Node JS setup in your system then follow this link to Set up Node JS Development Environment
– Install Angular CLI
Install Angular CLI, Ignore if Angular CLI is already installed.
npm install -g @angular/cli2. Setup Basic Angular Project
Let’s create a fresh new Angular project using Angular CLI.
ng new angular-firebase-deployOnce the Angular project is setup then get into the project folder by using the following command.
cd angular-firebase-deploy
Your basic Angular app is almost ready just hit the below command in terminal.
ng serve --openYou’ll see this in your browser.
3. Create Firebase Account to Deploy Angular Application
Go to Firebase website login using your email id. Click on the large Add project button and create a Firebase app.
Enter your project name, accept the terms and condition and create a project.
We’ve successfully created the Firebase app, in the next step we will be setting up Firebase deployment environment in our system.
4. Install the Firebase Tools using Firebase CLI
Setup Firebase tools globally by the following command.
npm install -g firebase-tools
5. Login and Initialize Firebase project using Firebase CLI
Login to Firebase project.
firebase login
Initialize your Firebase project run below command.
firebase initAfter initializing the Firebase project you will see the following properties in Firebase CLI.
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase productsWhen you see given question, make sure to use space to select the feature of hosting that you want to use.
? Which Firebase features do you want to set up for this directory? Press Space to select features, then
Enter to confirm your choices.
Firebase CLI will ask you a few questions, here are the answers to the corresponding questions.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
✔ Wrote public/index.html
i Detected a .git folder at /Users/d5/Desktop/angular-firebase-app
i Authorizing with GitHub to upload your service account to a GitHub repository’s secrets store.
Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=xxxxxxxxx
Waiting for authentication…
✔ Success! Logged into GitHub as SinghDigamber
⠼ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxx
⠸ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxx
⠼ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
SinghDigamber
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxxx
⠼ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
SinghDigamber
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxxx
⠙ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxxx
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
SinghDigamber
⚠ The provided authorization cannot be used with this repository. If this repository is in an organization, did you remember to grant access?
i Action required: Visit this URL to ensure access has been granted to the appropriate organization(s) for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxxx
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
SinghDigamber/angular-firebase-deploy
✔ Created service account github-action-xxxxx with Firebase Hosting admin permissions.
✔ Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_FIR_xxxxx.
i You can manage your secrets at https://github.com/SinghDigamber/angular-firebase-deploy/settings/secrets.
? 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
✔ Created workflow file /Users/d5/Desktop/angular-firebase-app/.github/workflows/firebase-hosting-pull-request.yml
? 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? main
✔ Created workflow file /Users/d5/Desktop/angular-firebase-app/.github/workflows/firebase-hosting-merge.yml
i Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/xxxxxx
i Action required: Push any new workflow file(s) to your repo
i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…
✔ Firebase initialization complete!
We’ve successfully deployed Angular Firebase app to GitHub using Firebase CLI.
