how to execute nx build before nx serve? - nrwl-nx

Question

Curious what the correct way is to execute a nx build command as a prerequisite of nx serve?
So for example, in this example from my workspace.json:
"foo": {
"root": "apps/foo",
"sourceRoot": "apps/foo/src",
"projectType": "application",
"prefix": "foo",
"schematics": {},
"architect": {
"build": {
"builder": "./tools/builders/foo:build",
"options": {}
},
"serve": {
"builder": "./tools/builders/foo:serve",
"options": {}
}
}
},
when i run nx serve foo I want it to automatically call nx build foo --with-deps
what's the 'nx way' to do this?

Answer 1

To achieve what you want you could define a new target:
"architect": {
"build": {
"builder": "./tools/builders/foo:build",
"options": {}
},
"base-serve": {
"builder": "./tools/builders/foo:serve",
"options": {}
},
"serve": {
"builder": "#nrwl/workspace:run-commands",
"options": {
"commands": [
"nx build foo --with-deps",
"nx base-serve foo"
],
"parallel": false
}
}
}
Run commands allows you to invoke any number of commands or shell scripts, in parallel or in order. You can block on certain output to appear, etc..
In your case, it looks like you have a custom builder. So you could also extend the builder to invoke the build target before starting serving. If you use the same serve builder many times, that might be preferable.
Nx doesn't have an "aspect-oriented" way of decorating targets. The main reason why is that it sort of works for basic scenarios, but doesn't work for anything sophisticated. For instance, in you case, you may want to watch the files and rebuild all deps of the project. Like this: https://github.com/nrwl/nx-incremental-large-repo/blob/master/tools/scripts/watch.js
So may want to have a long running process performing rebuilds.

Answer 2

You should be able to do this with waitUntilTargets and a run command abstracting the build call
"build-foo": {
"executor": "#nrwl/workspace:run-commands",
"options": {
"commands": [
{
"command": "nx build foo --with-deps"
}
],
"readyWhen": "Put text here you will see when build is complete"
}
},
"serve": {
"executor": "#nrwl/node:execute",
"options": {
"buildTarget": "app:build",
"waitUntilTargets": ["app:build-foo"]
}
},
It's unclear to me if this is a new syntax as the setup you have for declaring the targets is not what I'm seeing now. I have these targets set up in the app project.json files.