This tutorial covers:
- Cloning a sample application
- Creating and setting up a project on Firebase
- Initializing and deploying the project
Developers use JavaScript frameworks like Angular, React, and Vue.js to build every kind of single page application, from simple to complex. By separating JavaScript and CSS, frameworks let dev teams structure applications in modular chunks of code that carry out a single function.
That is great, but once your application is ready for deployment to production, you will need a command to compile and bundle the separate files into a single one. Then you will need to deploy to a platform like Firebase hosting.
Firebase is a development platform developed by Google that provides file storage, hosting, database, authentication, and analytics. Firebase is free, provides an SSL certificate by default, and offers impressive speed across multiple regions.
In this tutorial, I will show you how to set up continuous deployment for an Angular application to Firebase hosting.
Prerequisites
For this tutorial, you will need:
- Node.js installed on your system
- Angular CLI installed globally
- A CircleCI account
- A GitHub account
- A Firebase account
- Familiarity with building web applications using Angular.
- Some knowledge of TypeScript.
Our tutorials are platform-agnostic, but use CircleCI as an example. If you don’t have a CircleCI account, sign up for a free one here.
Cloning the demo project
To get started, run this command:
git clone https://github.com/CIRCLECI-GWP/circleci-angular-demo.git angular-ci-firebase
Git will clone the demo application into a new folder named angular-ci-firebase. Move into the newly cloned app and install all its dependencies:
// Change directory
cd angular-ci-firebase
// Install dependencies
npm install
// Run the application
ng serve
Open the application by going to http://localhost:4200.
This application retrieves the list of dummy users from a free Rest API for testing.
Running the test locally
Run the test for the application with:
npm run test
The following output will be something like this:
> circleci-angular-demo@0.0.0 test
> ng test --no-watch --no-progress --browsers=ChromeHeadless
06 02 2022 10:10:27.402:INFO [karma-server]: Karma v6.3.9 server started at http://localhost:9876/
06 02 2022 10:10:27.406:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
06 02 2022 10:10:30.530:INFO [launcher]: Starting browser ChromeHeadless
06 02 2022 10:10:37.570:INFO [Chrome Headless 97.0.4692.99 (Mac OS 10.15.7)]: Connected on socket njOp1_5ETVTaRVo-AAAB with id 68498281
Chrome Headless 97.0.4692.99 (Mac OS 10.15.7): Executed 4 of 4 SUCCESS (0.001 secs / 0.055 secs)
TOTAL: 4 SUCCESS
The demo application is now set up locally and working perfectly.
Creating a project on Firebase
If you have not yet done so, open up a Firebase account, navigate to the Firebase homepage and click Create A Project.
Next, use the following steps:
- Click the Add project button.
- Enter a name for your project. I have named mine
angular-ci-project. Keep in mind that project IDs are unique in Firebase. - Click Continue.
- Disable Google Analytics; it is not required for this project.
- Click Continue again.
There you have it. You have successfully created a project on Firebase.
Setting up Firebase hosting
To successfully host your application on Firebase, you need to install its tools and initialize it within your project.
Install the Firebase CLI
Open a new terminal. To install Firebase tools globally, run this command:
npm install -g firebase-tools
You now have global access to Firebase Command Line interface tools. You can use them to deploy code and assets to your newly created Firebase project.
Initializing a Firebase project
From the terminal, sign in to your Firebase account:
firebase login
Next, initialize the project:
firebase init
You will be prompted to respond to some questions.
- Choose hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
- Use an existing project: Select the Firebase project you created earlier:
angular-ci-project. - Enter
dist/angular-ci-firebaseas the public directory. Note thatangular-ci-firebaseis the name of the folder for the project. Change this if yours is different. - Configure as a single-page app: Yes.
- Set up automatic builds and deploys with GitHub: No. For this tutorial we are using CircleCI to run tests and handle deployment.
Here is the output and screenshot of the steps.
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/yemiwebby/tutorial/circleci/angular/angular-ci-firebase
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally)
set up GitHub Action deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: angular-ci-project (angular-ci-project)
i Using project angular-ci-project (angular-ci-project)
=== 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? dist/angular-ci-firebase
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔ Wrote dist/angular-ci-firebase/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
The project’s initialization process also generated two unique files at the root of your project. These files are required for successful deployment and must be checked into source control. They are:
firebase.jsoncontains your project’s hosting configuration. Its content instructs Firebase CLI about the files in your project directory to upload and deploy..firebasercspecifies the project to connect to the uploaded code once you successfully deploy to Firebase.
Changing the output path
Once you are ready to build your production application, the Angular CLI will compile it into an output path specified in the angular.json file. Open this file and make sure that the outputPath points to dist/angular-ci-firebase:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-ci-firebase",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": []
},
Configuring CircleCI
Next, replace the content of .circleci/config.yml with this:
version: 2.1
orbs:
browser-tools: circleci/browser-tools@1.2.3
jobs:
build:
working_directory: ~/ng-project
docker:
- image: cimg/node:16.13.1-browsers
steps:
- browser-tools/install-chrome
- browser-tools/install-chromedriver
- run:
command: |
google-chrome --version
chromedriver --version
name: Check install
- checkout
- restore_cache:
key: ng-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
- run: npm install
- run: npm install --save-dev firebase-tools
- save_cache:
key: ng-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
paths:
- "node_modules"
- run:
name: "Run test"
command: npm run test
- run:
name: "Build application for production"
command: npm run build
- run:
name: "Deploy app to Firebase Hosting"
command: "./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN"
This configuration specifies all the required tools to install and run the test for your application on CircleCI. The config installed the Firebase tool with npm install --save-dev firebase-tools and set up a command to automatically deploy your application to Firebase once the tests are successful.
The deployment will require the FIREBASE_TOKEN. Since you are logged in from the terminal, you can easily create a token using the Firebase CLI. Enter this command:
firebase login:ci
This opens a browser where you can authenticate your account. The token is then printed in your terminal.
Copy this and save it somewhere convenient. You will need it later on CircleCI.
The next step is to set up a repository on GitHub and link the project to CircleCI. Review Pushing a project to GitHub for instructions.
Log in to your CircleCI account. If you signed up with your GitHub account, all your repositories will be available on your project’s dashboard.
Next to your angular-ci-firebase project, click Set Up Project.
You will be prompted to either write a new configuration file or use the existing one. Select the existing one and enter the name of the branch where your code is housed on GitHub. Click Let’s Go.
Your first workflow will start running, but as expected, the build will fail because you have not yet created the FIREBASE_TOKEN environment variable.
To fix that, you will need to add FIREBASE_TOKEN as an environment variable. Click Project Settings.
Click Environment Variables on the left sidebar and create this variable:
FIREBASE_TOKENis the value of the token you generated from the terminal earlier.
Go back to the dashboard. Click Rerun Workflow from Failed.
Your build should finish successfully!
Navigate to the hosting URL shown in the last step. For me the URL is: https://angular-ci-project-4c4cf.web.app.
Conclusion
You have reached the end of this Angular to Firebase deployment tutorial. With the Firebase tools installed locally on your system, you could just deploy to Firebase directly, but that defeats the purpose of continuous integration and deployment. The ideal approach is to run tests using a platform like CircleCI, then once the tests pass, deploy immediately to your hosting provider, Firebase in this case.
With what you have learned in this tutorial, you can easily run tests and deploy your application every time you make changes to your codebase.
I hope that you found this helpful. The complete source code for this tutorial can be found here on GitHub.
Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. With a keen interest in solving day-to-day problems encountered by users, he ventured into programming and has since directed his problem-solving skills at building software for both web and mobile. A full-stack software engineer with a passion for sharing knowledge, Oluyemi has published a good number of technical articles and blog posts on several blogs around the world. Being tech-savvy, his hobbies include trying out new programming languages and frameworks.
Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. With a keen interest in solving day-to-day problems encountered by users, he ventured into programming and has since directed his problem solving skills at building software for both web and mobile. A full stack software engineer with a passion for sharing knowledge, Oluyemi has published a good number of technical articles and blog posts on several blogs around the world. Being tech savvy, his hobbies include trying out new programming languages and frameworks.
