Releasing to Production with CI/CD

Ship it or it never happened! If you don’t publish your code, you create zero value. This motivation to ship your work is prevalent in many industries. However, delivering a piece of work to someone else or opening it up to public scrutiny can be terrifying. In software engineering, delivering anything is difficult; delivering something to production is even more difficult.

Check out my 2018 talk, Ship It or It Never Happened: The Power of Docker, Heroku, and CircleCI, at https://bit.ly/ship-it-or-it-never-happened.

We live in an era of moving fast and breaking things. However, the latter part of that statement rarely works in an enterprise. You can live on the edge and adopt the YOLO lifestyle, but this doesn’t make good business sense.

Figure 10.1: A creative CLI option for a tool

In an enterprise project, code has to go through numerous quality gates before it can be merged. In this chapter, we will...

Technical requirements

The following software is required to follow along with this chapter:

• Docker Desktop Community version 4+
• Docker Engine CE version 24+
• CircleCI account
• Vercel account
• Firebase account
• Coveralls account

The most up-to-date versions of the sample code for the book are on GitHub at the repositories linked in the following list. The repository contains the final and completed state of the code. Follow the instructions below to find out how to verify your progress as you go through the sections of this chapter.

For Chapter 10:

1. Clone the repositories https://github.com/duluca/local-weather-app and https://github.com/duluca/lemon-mart.
2. Execute npm install on the root folder to install dependencies.

package.json contains builds scripts.

Note that the .circleci folder contains extra YAML files.

For local-weather-app:

1. .circleci/config.stage4.yml represents a simple CI pipeline...

Automated testing

As developers, we integrate code from various sources into our solutions. This can be from coffee-fueled, long, and tiring code sessions, a copy-pasted StackOverflow answer, a snippet from a blog post, an npm package, or a major library like Angular. We are expected to deliver quality results within the confines of an estimate we threw out there. In these conditions, bugs inevitably end up in our code. When deadlines, ambition, or ill-fated architectural decisions intersect with the regular cadence of coding, things only get worse.

Automated tests ensure that the code we write is correct and it stays correct. We rely on CI/CD pipelines for repeatable processes that are not prone to human error, but the pipeline is only as good as the quality of the automated tests we write.

Angular has two main categories of tests, unit and e2e tests. Unit tests are meant to be fast and easy to create and execute, and e2e tests are slower and more expensive. However, there...

Continuous integration

Before pushing your code to production, you should enable CI. This simple tool helps ensure we don’t ship broken code to production by executing automated tasks, including the execution of tests, every time we make changes to our code.

CircleCI

CircleCI makes it easy to get started, with a free tier and excellent documentation for beginners and pros alike. If you have unique enterprise needs, CircleCI can be brought on-premises, behind corporate firewalls, or as a private deployment in the cloud.

CircleCI has pre-baked build environments for the virtual configuration of free setups, but it can also run builds using Docker containers, making it a solution that scales to the user’s skills and needs:

1. Create a CircleCI account at https://circleci.com/.
2. Navigate to Projects to add a new project.
3. Search for local-weather-app and click on Set Up Project.
4. Follow the on-screen prompts to create a sample .yml file...

Deploying to the cloud

If delivering something to production is difficult from a coding perspective, it is very complicated to do it right from an infrastructure perspective. Deploying solutions in the full-fledged versions of Azure, AWS, and Google Cloud is complicated. To deliver quick results, we can leverage cloud services that can serve the dist folder of our Angular app within minutes.

One such service is Vercel, and another is Firebase, which can leverage the ng deploy command.

Vercel

Vercel, https://vercel.com, is a multi-cloud service that enables real-time global deployments of applications directly from the CLI. Vercel works with static files, Node.js, PHP, Go applications, and any custom stack of software you’re willing to write a custom builder for, making it quite straightforward. Vercel has a free tier that you can use to deploy the dist folder of your Angular applications very quickly.

Install the vercel package to your project and run the login...

DevOps

DevOps is the marriage of development and operations. It is well established for development that code repositories like Git track every code change. In operations, there has long been a wide variety of techniques to track changes to environments, including scripts and various tools that aim to automate the provisioning of operating systems and servers.

How often have you heard the saying, “It works on my machine”? Developers often use that line as a joke. Still, it is often the case that software that works perfectly well on a test server ends up running into issues on a production server due to minor differences in configuration.

Earlier, we discussed how GitHub flow can enable us to create a value delivery stream. We always branch from the main branch before making a change, enforce that change to go through our CI pipeline, and, once we’re reasonably sure that our code works, merge back to the main branch. See the following diagram:

...

Containerizing web apps using Docker

Docker, which can be found at https://docker.io, is an open platform for developing, shipping, and running applications. Docker combines a lightweight container virtualization platform with workflows and tooling that help manage and deploy applications. The most obvious difference between Virtual Machines (VMs) and Docker containers is that VMs are usually dozens of gigabytes in size and require gigabytes of memory, whereas containers take up megabytes in terms of disk and memory size requirements. Furthermore, the Docker platform abstracts away host Operating System (OS)-level configuration settings, so every piece of configuration that is needed to successfully run an application is encoded within a human-readable format.

Anatomy of a Dockerfile

A Dockerfile consists of four main parts:

• FROM – where we can inherit from Docker’s minimal “scratch” image or a pre-existing image
• SETUP –...

Working with containers in the cloud

One of the advantages of using Docker is that we can deploy it on any number of operating environments, from personal PCs to servers and cloud providers. In any case, we expect our container to function the same across the board.

Earlier in the chapter, I mentioned that working with full-fledged cloud providers like Azure, AWS, and Google Cloud is complicated. To deploy your containers in the cloud you will likely need to use one of these providers. Now and then, a provider that offers easy and seamless container hosting pops up, but over the years, these options have disappeared.

Cloud services offer a wide variety of methods for running containers ranging from managed to unmanaged solutions. The key difference between managed and unmanaged is the level of control and responsibility shared between the user and the cloud provider. This is referred to as the Shared Responsibility Model. In a managed configuration, you concede more control...

Continuous deployment

CD is the idea that code changes that successfully pass through your pipeline can be automatically deployed to a target environment. Although examples of continuously deploying to production exist, most enterprises prefer to target a development environment. A gated approach is adopted to move the changes through the various stages of development environment, test, staging, and, ultimately, production. CircleCI can facilitate gated deployment with approval workflows, which is covered later in this section.

In CircleCI, you need to implement a deploy job to deploy your image. You can deploy to many targets in this job, such as Google Cloud Run, Docker Hub, Heroku, Azure, or AWS ECS. Integration with these targets will involve multiple steps. At a high level, these steps are as follows:

1. Configure an orb for your target environment, which provides the CLI tools required to deploy your software.
2. Store login credentials or access keys specific...

Code coverage reports

A code coverage report is a good way to understand the amount and trends of unit test coverage for your Angular project.

To generate the report for your app, execute the following command from your project folder:

$ npx ng test --watch=false --code-coverage

The resulting report will be created as an HTML file under a folder named coverage; execute the following command to view it in your browser:

$ npx http-server -c-1 -o -p 9875 ./coverage

You may need to specify --project for the ng test command. Similarly, the coverage report may be generated in a sub-folder under coverage. You can select the folder to view it.

Here’s the folder-level sample coverage report generated by istanbul for LemonMart:

Figure 10.20: Istanbul code coverage report for LemonMart

You can drill down on a particular folder, such as src/app/auth, and get a file-level report, as shown here:

Figure 10.21: Istanbul code coverage...

Summary

In this chapter, you learned about creating a value delivery stream using CI/CD pipelines. We covered the importance of automated unit testing to enable the delivery of quality code at speed in an enterprise context. You configured a CI pipeline using CircleCI. You learned about trunk-based development using GitHub flow and enforcing quality gates. You deployed a web application to Vercel and leveraged ng deploy for Firebase.

Next, we covered DevOps and IaC techniques using Docker and npm scripts. You containerized your web app, learned about working with containers in the cloud, and learned how to implement gated CI workflows. Also, you became familiar with orbs, workflows, and code coverage tools.

We leveraged CircleCI as a cloud-based CI service and highlighted that you can deploy the outcome of your builds to all major cloud hosting providers. You have seen how you can achieve CD. We covered an example deployment to Vercel via CircleCI demonstrating how you can...

Exercises

1. Add CircleCI and Coveralls badges to the README.md file on your code repository.
2. Implement Cypress for e2e testing and run it in your CircleCI pipeline using the Cypress orb.
3. Implement a Vercel deployment and a conditional workflow for the LemonMart app. The resulting config.yml file is in the lemon-mart repo, named .circleci/config.stage9.yml.

Further reading

• Working Effectively with Legacy Code, Michael Feathers, 2004
• The Three Laws of TDD, Robert “Uncle Bob” Martin, 2005, http://butunclebob.com/ArticleS.UncleBob.TheThreeRulesOfTdd
• Succeeding with Agile: Software Development Using Scrum, Mike Cohn, 2009
• TestPyramid, Martin Fowler, 2012, https://martinfowler.com/bliki/TestPyramid.html
• Jasmine 2 Spy Cheat Sheet, Dave Ceddia, 2015, https://daveceddia.com/jasmine-2-spy-cheat-sheet
• The Practical Test Pyramid, Ham Vocke, 2018, https://martinfowler.com/articles/practical-test-pyramid.html
• SOLID Principles, Wikipedia, 2019, https://en.wikipedia.org/wiki/SOLID
• Dockerfile reference, 2020, https://docs.docker.com/engine/reference/builder/
• CircleCI orbs, 2020, https://circleci.com/orbs/
• Deploying container images, 2020, https://cloud.google.com/run/docs/deploying
• ECS Fargate Threat Modeling, Kaizhe Huang, 2019, https://sysdig.com/blog/ecs-fargate-threat...

Questions

Answer the following questions as best as possible to ensure you’ve understood the key concepts from this chapter without googling anything. Do you know if you got all the answers right? Visit https://angularforenterprise.com/self-assessment for more:

1. What is the testing pyramid?
2. What are fixtures and matchers?
3. What are the differences between a mock, a spy, and a stub?
4. What is the benefit of building Angular in prod mode?
5. How does GitHub flow work?
6. Why should we protect the main branch?
7. Explain the difference between a Docker image and a Docker container.
8. Why do you prefer a managed container runtime over an unmanaged one in the cloud?
9. What is the purpose of a CD pipeline?
10. What is the benefit of CD?
11. How do we cover the configuration gap?
12. What does a CircleCI orb do?
13. What are the benefits of using a multi-stage Dockerfile?
14. How does a code coverage report help maintain the quality...