Configuring CI Using CircleCI and Nx

Nx is a smart, fast and extensible build system, and it works really well with monorepos. Monorepos provide a lot of advantages:

Everything at that current commit works together. Changes can be verified across all affected parts of the organization.
Easy to split code into composable modules
Easier dependency management
One toolchain setup
Code editors and IDEs are "workspace" aware
Consistent developer experience
And more ...

But they come with their own technical challenges. The more code you add into your repository, the slower the CI gets. Adding Nx to your CI pipeline makes this more efficient.

Setting up CircleCI

The CircleCI can track the last successful run on main branch and use this as a reference point for the BASE. The Nx Orb provides conventient implementation of this functionality which you can drop into you existing CI config. To understand why knowing the last successful build is important for the affected command, check out the in-depth explanation at Orb's docs.

Below is an example of a Circle CI setup for an Nx workspace only building and testing what is affected. For more details on how the orb is used, head over to the official docs.

1version: 2.1
2orbs:
3  nx: nrwl/nx@1.4.0
4jobs:
5  main:
6    docker:
7      - image: cimg/node:lts-browsers
8    steps:
9      - checkout
10      - run: npm ci
11      - nx/set-shas
12
13      - run: npx nx workspace-lint
14      - run: npx nx format:check
15      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=lint --parallel=3
16      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=test --parallel=3 --ci --code-coverage
17      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=build --parallel=3
18workflows:
19  build:
20    jobs:
21      - main

The pr and main jobs implement the CI workflow.

Using CircleCI on private repository

To use the Nx Orb with a private repository on your main branch, you need to grant the orb access to your CircleCI API. You can do this by creating an environment variable called CIRCLE_API_TOKEN in the context or the project.

Note: It should be a user token, not project token.

Distributed CI with Nx Cloud

A computation cache is created on your local machine to make the developer experience faster. This allows you to not waste time re-building, re-testing, re-linting, or any number of other actions you might take on code that hasn't changed. Because the cache is stored locally, you are the only member of your team that can take advantage of these instant commands. You can manage and share this cache manually.

Nx Cloud allows this cache to be shared across your entire organization, meaning that any cacheable operation completed on your workspace only needs to be run once. Nx Cloud also allows you to distribute your CI across multiple machines to make sure the CI is fast even for very large repos.

In order to use distributed task execution, we need to start agents and set the NX_CLOUD_DISTRIBUTED_EXECUTION flag to true. Once all tasks are finished, we must not forget to cleanup used agents.

1version: 2.1
2orbs:
3  nx: nrwl/nx@1.4.0
4jobs:
5  agent:
6    docker:
7      - image: cimg/node:lts-browsers
8    parameters:
9      ordinal:
10        type: integer
11    steps:
12      - checkout
13      - run: npm ci
14      - run:
15          command: npx nx-cloud start-agent
16          no_output_timeout: 60m
17  main:
18    docker:
19      - image: cimg/node:lts-browsers
20    environment:
21      NX_CLOUD_DISTRIBUTED_EXECUTION: 'true'
22    steps:
23      - checkout
24      - run: npm ci
25      - nx/set-shas
26      - run: npx nx-cloud start-ci-run
27
28      - run: npx nx-cloud record -- npx nx workspace-lint
29      - run: npx nx-cloud record -- npx nx format:check
30      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=lint --parallel=3
31      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=test --parallel=3 --ci --code-coverage
32      - run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=build --parallel=3
33
34      - run: npx nx-cloud stop-all-agents
35          when: always
36workflows:
37  build:
38    jobs:
39      - agent:
40          matrix:
41            parameters:
42              ordinal: [1, 2, 3]
43      - main

You can also use our ci-workflow generator to generate the configuration file.

Learn more about configuring your CI environment using Nx Cloud with Distributed Caching and Distributed Task Execution in the Nx Cloud docs.