You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
- Sortable Drag and Drop Lists in Firestore
Continuous Integration and Delivery for Angular Firebase AppsEpisode 115 written by Jeff Delaney
Source code available to pro members. Learn more
Full source code for Continuous Integration and Delivery for Angular Firebase Apps on Github
Have you ever spent weeks working on a new feature, only to find that everything breaks when it comes time to merge it with the master branch? Continuous Integration and Delivery are processes that automate code testing and deployment to avoid Integration Hell. Many companies now employ dedicated individuals and teams to orchestrate these tasks, which fall under the umbrella of DevOps. My goal with this lesson is to break down the most important DevOps responsibilities so you can test, maintain, and deploy a reliable Angular/Firebase project. These techniques can lead to large productivity gains for individual developers, large teams, and open source projects alike.
In order to produce a fullstack DevOps example, we will build an Angular v6 app, along with a Cloud Functions backend. We have covered Angular Component Testing and Cloud Functions Testing with Jest in past episodes, so this article assumes you have some existing specs created in your project.
Whenever new code is committed to the Github repo with
git push some-branch, the following events will happen:
- CircleCI listens to Github commits, then builds a Docker container to test the app.
- Runs all Angular specs
- Runs all Cloud Functions specs
- If all specs pass and we’re on the master branch, deploy to Cloud Functions and Firebase Hosting
Get started by signing up for a free CircleCI account, then link an existing Github project to it.
CircleCI is popular right now, but shop around for other CI/CD alternatives like Travis, Jenkins, Gitlab, and Bitbucket. Create a config folder and file in the root of your project called
Our first job will run our Angular tests on every commit to Github. (1) First, we specify the
node8-browsers Docker container runtime, then (2) provide steps to build and test the app. These should match the NPM scripts you have in your
Now change something in your codebase and commit it to github. You should see something like this on the dashbord - in my case we have a failing test:
CircleCI Pro Tip - Watch the favicons on your browser tabs when running tests. They will cycle between blue, red, and green based on the state of your CI server.
The last example was very simple, but most CI tasks need to be orchestrated in complex ways. When deploying code, for example, we only want the job to run on the master branch IF the test suite is passing. Let’s see how we might combine multiple jobs into a workflow that can deploy both Angular and Firebase Cloud Functions.
Before we can deploy code to Firebase, we need to authenticate our CircleCI container. We can do this by generating a token by logging into our Firebase project locally, then setting it as an environment variable. First, run the following commands:
npm i -D firebase-tools
Then grab the token string it returns, and save it as
FIREBASE_DEPLOY_TOKEN by going to your-project >> settings >> environment variables on the CircleCI dashboard.
We want ours tests to run on every commit, but only deploy on passing commits to the master git branch. Our config will now add an additional job for deployment and run it only if specific conditions are met. Also, notice how we need to pass the
--token flag to Firebase tools to authenticate the CI server.
Congrats! You now have fullstack continuous integration for your Angular Firebase project. Every new commit fill follow a consistent workflow that can increase reliability and developer productivity.