Sending front-end cache artifacts to NxCloud

Introduction

As companies grow and scale their applications, more and more teams start focusing more on improving their existing developer experience.

Faster build speeds, AI code integrations and preview environments started to appear more often on the backlogs of many projects. But, with applications increasing in size and becoming more complex, scaling the development processes can become a tough challenge.

In this post, we'll explore how teams can use NxCloud to speed up build times by storing task results for multiple applications in the cloud.

Using a build system

A visualization of a large project with multiple applications handled by a build system

Nx is a build system that focuses on handling large monorepo projects. It allows developers to manage large codebases with multiple projects, and comes with a few great benefits:

• Modularization — breaking down large applications into smaller, manageable modules or libraries, making the project easier to maintain.
• Dependency graph — providing a visual representation of a project's dependency graph, helping developers get a better overview and manage dependencies more effectively.
• Incremental builds — ensuring that only the affected parts of the project are rebuilt, reducing build times and improving developer experience.

One of the key features of Nx is being able to cache task results, which decreases build times and cuts costs on resource usage.

How does caching work?

A visualization of cache inputs and outputs

The caching mechanism used by Nx is based on inputs (e.g., source files, environment variables) and outputs (e.g., build artifacts).

If the same task is executed again with the same inputs, Nx can reuse the cached results instead of performing the task again.

A visualization of Nx using local and cloud caching to store task results

By default, Nx stores cache artifacts locally. Local caching is fast as the cache artifacts are stored on the same machine. It's also easy to set up and requires no external dependencies.

In the project's nx.json, the cacheableOperations property specifies the list of tasks that are cached, and cacheDirectory sets the directory where cache artifacts are placed:

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/workspace/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "test", "lint"],
        "cacheDirectory": ".nx/cache"
      }
    }
  }
}

Integrating NxCloud

Storing cache locally is great, but placing it in the cloud and sharing it across multiple environments is even better. To use NxCloud, you need to first install and set it up in your workspace.

👉 Install NxCloud

In order to get NxCloud to work, you need to install it first as part of your project's devDependencies:

$ npm install @nrwl/nx-cloud --save-dev

👉 Configure the nx.json

To get NxCloud to handle your cache, you need to set the runner to @nrwl/nx-cloud and provide your unique accessToken:

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "test", "lint"],
        "accessToken": "your-nx-cloud-access-token"
      }
    }
  }
}

👉 Run a task

If done correctly, all tasks that were specified in cacheableOperations should now be cached in the cloud using NxCloud.

By running the task multiple times, notice how it fetches the same cache artifact, as long as none of the inputs have changed:

// 1st try: No cache available
$ pnpm nx build application-1

// 2nd try: Fetched from cache
$ pnpm nx build application-1

// 3rd try: Fetched from cache
$ pnpm nx build application-1

What's next?

A visualization of various areas where NxCloud can be used for caching

Using NxCloud is not only relevant for local development. Cloud caching of task results can be used across various environments, with the ability to share artifacts and prevent redundant reruns.

👉 PR Previews

If your development process includes spinning up previews on PR creation, NxCloud can help a lot with making that setup even better by generating and reusing cached build artifacts, decreasing the build times and making sure changes are visible faster.

👉 CI/CD Pipelines

By sharing cache artifacts between pipeline runs and preventing compiling the same code over and over, NxCloud can decrease resource usage and improve build times. If configured correctly, subsequent builds are not starting from scratch, but rather reusing previous build results, making the entire pipeline more efficient.

Here’s an simple example of a pipeline with NxCloud caching configured in GitHub Actions:

name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npx nx affected --target=build --parallel --maxParallel=5
        env:
          Nx_CLOUD_ACCESS_TOKEN: ${{ secrets.Nx_CLOUD_ACCESS_TOKEN }}

Conclusion

When working on large projects, keeping the development process in good shape is essential for maintaining great developer experience.

Using Nx as a build system comes with many great benefits for teams that are working on multiple applications that are part of a monorepo. One of the powerful features that Nx comes with is the ability to store and retrieve task results as local or cloud cache artifacts.

By using cloud caching tools like NxCloud, teams can have faster builds and a more consistent workflow across local development, PR previews, and CI/CD pipelines.