Leveraging Nx Caching in Software Development

This article discusses Nx caching, a smart solution within many software development processes. The focus will be on the configuration, implementation, and benefits of Nx caching in terms of time efficiency and computational resources. To aid comprehension, practical examples of the Nx caching process will be provided.

The journey begins with creating the Nx configuration file, placed at the root level of the application. The Nx system calculates the cache based on its inputs and outputs, preserving the cache as long as these parameters remain unchanged. Let's look at a basic configuration:

Nx calculates the cache based on its inputs and outputs. As long as the inputs and outputs are the same, it will be keeping the cache.

---
title: Leveraging Nx Caching in Software Development
description: Configure caching strategies based on your project's requirements
privateVideoUrl: https://stream.mux.com/UQosdlt01Zrx9A02BZpmaD01d6yWYADxox00qMy3ANmnboQ.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/sean-amarasinghe-monorepos-for-enterprise-developers-app/-/tree/main/Course%20App/module_5
---

# Leveraging Nx Caching in Software Development

## Introduction

This article discusses Nx caching, a smart solution within many software development processes. The focus will be on the configuration, implementation, and benefits of Nx caching in terms of time efficiency and computational resources. To aid comprehension, practical examples of the Nx caching process will be provided.

## Creating the Nx Configuration File

The journey begins with creating the Nx configuration file, placed at the root level of the application. The Nx system calculates the cache based on its inputs and outputs, preserving the cache as long as these parameters remain unchanged. Let's look at a basic configuration:

```bash
touch nx.json
```

Nx calculates the cache based on its inputs and outputs. As long as the inputs and outputs are the same, it will be keeping the cache.

Add basic configuration information in `nx.json` as shown below:

```jsx
{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build"]
      }
    }
  }
}
```

In this configuration, cacheable operations, in this case, "build," are defined. Other cacheable operations like "test" or "lint" can also be added, but we don't have the "test" and "lint" in our worskpace so stick to "build" here.

Now let's run our build command for `shared-ui`

```bash
npx nx build shared-ui
```

So the build ran in two seconds. Now the build is cached. 

![Build cache](https://d2uusema5elisf.cloudfront.net/courses/monorepos-for-enterprise-developers/module_05/lesson_05.02/public/assets/build-1.png)

Let's run that command again. 

![Build cache](https://d2uusema5elisf.cloudfront.net/courses/monorepos-for-enterprise-developers/module_05/lesson_05.02/public/assets/build-2.png)

This time the build ran fast. It took only 41 milliseconds this time. And it also says in “Nx read the output from the cache instead of running the command for 1 out of 1 tasks”. Nx used that hash to check and invalidate caches. Every time we change something on your project, it will invalidate the cache and run the build again.

Sean Amarasinghe

Configure caching strategies based on your project's requirements

Let's start by creating the NX configuration file at the root level of our

Now NX calculates the cache based on its inputs and outputs. As long as the

the same, it will be keeping the cache. I will paste a basic configuration here

And what it does here is that we will be defining the cacheable operations. So

and also we can add other cacheable operations like test and linked. But we don

and link so we'll be just using build here. Now let's run our build command.

So the build ran in two seconds. Now the build is cached. Let's try and run

This time the build ran fast. You can see it took 41 milliseconds. And it also

in next read the output from the cache instead of running the command for one

So an excuse that hash to check and invalidate caches. So every time we change

project, it will invalidate the cache and run the build again. Let's go and

Let's run the command again. So in next identify that there has been a change.

again and cache the output. Let's run this again. Now it's cached. Now you may

changes for certain file types that you make to affect your caching. For

running snapshot tests and you don't want to cache them. And you don't want to

to invalidate the cache. So in order to do that, we can add target defaults.

With target defaults, you can define the targets that you want an extra listen

We can explicitly specify that certain files we don't want to be addressed by

Let's use snapshot test for this example.

So here, build will ignore any snapshot files. Now if you want this same glob

other targets like lint or testing, we can create another section called name

And that will be a name section where you can reuse the attribute name instead

same glob again and again. So for example, if you wanted to add

lint and you want lint to follow the same glob as build, if you're writing the

glob, we can specify a name inside the named input section.

And here we can give it a name, something like no snapshot.

And we can copy over the glob and then instead of

this, we can replace that with no snapshots. And same goes here with for lint.

And now we can also make sure that any dependent packages follow the same

by adding till the and no snapshots here.

Share UI has been used by the front end app, so anything that's

dependent on that will follow the same. So in this lesson, we learned about how

Enix cache works by intelligently caching computation results. We also looked

capabilities into our app by configuring our mono repo to cache builds to save

And that concludes the caching module. See you in the next one.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript