Core Nx Tutorial - Step 5: Automatically Detect Dependencies
Manually telling Nx about the dependencies between your projects is helpful, but as your repo grows it becomes difficult for a person to keep track of all the dependencies that are introduced. If you miss a dependency, the guarantees of the affected command are voided.
Luckily, Nx core can automatically detect dependencies that are created in .ts
or .js
files.
Analyze Source Files
Because we chose npm
for the preset when we created the nx workspace, the nx.json
is set to extend the npm preset settings.
1// nx.json
2{
3 "extends": "nx/presets/npm.json"
4}
5
This preset is set to only load dependencies from package.json
or project.json
files. To enable automatically detecting dependencies from source code, you can add the following configuration to your nx.json
file:
1{
2 "pluginsConfig": {
3 "@nx/js": {
4 "analyzeSourceFiles": true
5 }
6 }
7}
8
Other presets default this property to true.
Side note: If you want Nx to automatically detect dependencies for other languages, you can install a plugin for that language. There is a list of Nrwl maintained and third party plugins on the community page.
Create Messages Library
Make two files.
packages/messages/package.json
:
1{
2 "name": "messages"
3}
4
packages/messages/index.js
:
1const message = 'Welcome to the Restaurant at the End of the Universe';
2
3module.exports = { message };
4
This library is exporting a single message
string.
Create Cow Application
Install the cowsay
npm package at the root of the workspace.
❯
yarn add -W cowsay@1.5.0
Make an application that uses the messages
library. Note that you won't specify the dependency manually in the package.json
file.
packages/cow/package.json
:
1{
2 "name": "cow",
3 "version": "0.0.1",
4 "scripts": {
5 "serve": "node index.js"
6 }
7}
8
packages/cow/index.js
:
1var cowsay = require('cowsay');
2var { message } = require('../messages');
3
4console.log(
5 cowsay.say({
6 text: message,
7 })
8);
9
Now if you run nx serve cow
, you'll see this:
~/workspace❯
node index.js
1______________________________________________________
2< Welcome to the Restaurant at the End of the Universe >
3------------------------------------------------------
4 \ ^__^
5 \ (oo)\_______
6 (__)\ )\/\
7 ||----w |
8 || ||
9 Done in 0.14s.
10
11——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
12
13NX Successfully ran target serve for project cow
14
15See Nx Cloud run details at https://nx.app/runs/nZBYYBEuIfG
16
View the Project Graph
Run nx graph
to view the new project graph. You'll see a dependency line has been drawn between cow
and messages
because Nx recognises that cow
is referencing code inside the messages
project.
This line tells Nx about the dependency:
1var { message } = require('../messages');
2
If at some point in the future the code is refactored so that cow no longer references messages, the project graph will automatically update accordingly.
More Tooling
If you want Nx to do more for you, you can install the @nx/js
plugin to help with typescript or javascript tooling. This plugin provides out of the box:
- Typescript alias paths
- Build with
tsc
orswc
- Jest and ESLint configuration
What's Next
- Continue to Step 6: Summary