Manual migration of existing code bases
The easiest way to start using Nx is to run the nx init command.
❯
npx nx@latest init
If you don't want to run the script, this guide will walk you through doing everything the script does manually.
Install nx as a devDependency
We'll start by installing the nx package:
❯
npm add -D nx@latest
Create a Basic nx.json File
Next, we'll create a blank nx.json configuration file for Nx:
1{}
2Add .nx directories to .gitignore
Next, we'll add the Nx default task cache directory and the project graph cache directory to the list of files to be ignored by Git. Update the .gitignore file adding the .nx/cache and .nx/workspace-data entry:
1...
2.nx/cache
3.nx/workspace-data
4Set Up Caching For a Task
Now, let's set up caching for a script in your package.json file. Let's say you have a build script that looks like this:
1{
2 "scripts": {
3 "build": "tsc -p tsconfig.json"
4 }
5}
6In order for Nx to cache this task, you need to:
- run the script through Nx using
nx exec -- - configure caching settings in the
nxproperty ofpackage.json
The new package.json will look like this:
1{
2 "scripts": {
3 "build": "nx exec -- tsc -p tsconfig.json"
4 },
5 "nx": {
6 "targets": {
7 "build": {
8 "cache": true,
9 "inputs": [
10 "{projectRoot}/**/*.ts",
11 "{projectRoot}/tsconfig.json",
12 { "externalDependencies": ["typescript"] }
13 ],
14 "outputs": ["{projectRoot}/dist"]
15 }
16 }
17 }
18}
19Now, if you run npm build or nx build twice, the second run will be retrieved from the cache instead of being executed.
Enable More Features of Nx as Needed
You could stop here if you want, but there are many more features of Nx that might be useful to you. Many plugins can automate the process of configuring the way Nx runs your tools. Plugins also provide code generators and automatic dependency updates. You can speed up your CI with remote caching and distributed task execution.