Skip to content

Commit

Permalink
feat(misc): init wip
Browse files Browse the repository at this point in the history
  • Loading branch information
FrozenPandaz committed Apr 12, 2024
1 parent 2cb43ca commit 714cbaa
Show file tree
Hide file tree
Showing 173 changed files with 1,583 additions and 1,142 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ jobs:
NX_NATIVE_LOGGING: 'false'
NX_E2E_RUN_E2E: 'true'
NX_CI_EXECUTION_ENV: 'linux'
NX_CLOUD_DTE_V2: 'true'
NX_CLOUD_DTE_V2: 'false'
steps:
- checkout
- nx/set-shas:
Expand Down
115 changes: 69 additions & 46 deletions docs/shared/migration/adding-to-existing-project.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Adding Nx to your Existing Project

Nx can be added to any type of project, not just monorepos. The main benefit is to get caching abilities for the package scripts. Each project usually has a set of scripts in the `package.json`:
Nx can be added to any type of project, not just monorepos. The main benefit is to get caching abilities for the package
scripts. Each project usually has a set of scripts in the `package.json`:

```json {% fileName="package.json" %}
{
Expand All @@ -16,7 +17,8 @@ Nx can be added to any type of project, not just monorepos. The main benefit is
You can make these scripts faster by leveraging Nx's caching capabilities. For example:

- You change some spec files: in that case the `build` task can be cached and doesn't have to re-run.
- You update your docs, changing a couple of markdown files: then there's no need to re-run builds, tests, linting on your CI. All you might want to do is trigger the Docusaurus build.
- You update your docs, changing a couple of markdown files: then there's no need to re-run builds, tests, linting on
your CI. All you might want to do is trigger the Docusaurus build.

## Install Nx on a Non-Monorepo Project

Expand All @@ -26,21 +28,24 @@ Run the following command:
npx nx@latest init
```

This will set up Nx for you - updating the `package.json` file and creating a new `nx.json` file with Nx configuration based on your answers during the set up process. The set up process will suggest installing Nx plugins that might be useful based on your existing repository. The example below is using the `@nx/eslint` and `@nx/next` plugins to run ESLint and Next.js tasks with Nx:
This will set up Nx for you - updating the `package.json` file and creating a new `nx.json` file with Nx configuration
based on your answers during the set up process. The set up process will suggest installing Nx plugins that might be
useful based on your existing repository. The example below is using the `@nx/eslint` and `@nx/next` plugins to run
ESLint and Next.js tasks with Nx:

```json {% fileName="nx.json" %}
{
"plugins": [
{
"plugin": "@nx/eslint/plugin",
"options": {
"targetName": "lint"
"targetName": "eslint:lint"
}
},
{
"plugin": "@nx/next/plugin",
"options": {
"buildTargetName": "build",
"buildTargetName": "next:build",
"devTargetName": "dev",
"startTargetName": "start"
}
Expand All @@ -49,33 +54,43 @@ This will set up Nx for you - updating the `package.json` file and creating a ne
}
```

When Nx updates your `package.json` scripts, it looks for scripts that can be replaced with an Nx command that has caching automatically enabled. The `package.json` defined above would be updated to look like this:
When Nx updates your `package.json` scripts, it looks for scripts that can be replaced with an Nx command that has
caching automatically enabled. The `package.json` defined above would be updated to look like this:

```json {% fileName="package.json" %}
```diff {% fileName="package.json" %}
{
"name": "my-workspace",
...
"scripts": {
"build": "nx build",
"lint": "nx lint",
- "build": "next build && echo 'Build complete'",
+ "build": "nx next:build && echo 'Build complete'",
- "lint": "eslint ./src",
+ "lint": "nx eslint:lint",
"test": "node ./run-tests.js"
},
...
"nx": {
"includedScripts": []
}
+ "nx": {}
}
```

The `@nx/next` plugin can run `next build` for you and set up caching correctly, so it replaces `next build` with `nx build`. Similarly, `@nx/eslint` can set up caching for `eslint ./src`. When you run `npm run build` or `npm run lint` multiple times, you'll see that caching is enabled. You can also call Nx directly from the terminal with `nx build` or `nx lint`.

The `test` script was not recognized by any Nx plugin, so it was left as is.
The `@nx/next/plugin` plugin adds a `next:build` target which runs `next build` and sets up caching correctly. In other
words, running `nx next:build` is the same as running `next build` with the added benefit of it being cacheable. Hence,
Nx replaces `next build` in the `package.json` `build` script to add caching to anywhere running `npm run build`.
Similarly, `@nx/eslint/plugin` sets up the `nx eslint:lint` command to run `eslint ./src` with caching enabled.
The `test` script was not recognized by any Nx plugin, so it was left as is. After Nx has been setup,
running `npm run build` or `npm run lint` multiple times, will be instant when possible.

The `includedScripts` array allows you to specify `package.json` scripts that can be run with the `nx build` syntax.
You can also run any npm scripts directly through Nx with `nx build` or `nx lint` which will run the `npm run build`
and `npm run lint` scripts respectively. In the later portion of the setup flow, Nx will ask if you would like some of
those npm scripts to be cacheable. By making those cacheable, running `nx build` rather than `npm run build` will add
another layer of cacheability. However, `nx build` must be run instead of `npm run build` to take advantage of the
cache.

## Inferred Tasks

You may have noticed that `@nx/next` provides `dev` and `start` tasks in addition to the `build` task. Those tasks were created by the `@nx/next` plugin from your existing Next.js configuration. To view all available tasks, open the Project Details view with Nx Console or use the terminal to launch the project details in a browser window.
You may have noticed that `@nx/next` provides `dev` and `start` tasks in addition to the `next:build` task. Those tasks
were
created by the `@nx/next` plugin from your existing Next.js configuration. To view all available tasks, open the Project
Details view with Nx Console or use the terminal to launch the project details in a browser window.

```shell
nx show project my-workspace --web
Expand All @@ -90,7 +105,7 @@ nx show project my-workspace --web
"data": {
"root": ".",
"targets": {
"lint": {
"eslint:lint": {
"cache": true,
"options": {
"cwd": ".",
Expand All @@ -107,7 +122,7 @@ nx show project my-workspace --web
"executor": "nx:run-commands",
"configurations": {}
},
"build": {
"next:build": {
"options": {
"cwd": ".",
"command": "next build"
Expand Down Expand Up @@ -146,28 +161,27 @@ nx show project my-workspace --web
"sourceRoot": ".",
"name": "my-workspace",
"projectType": "library",
"includedScripts": [],
"implicitDependencies": [],
"tags": []
}
},
"sourceMap": {
"root": ["package.json", "nx/core/package-json-workspaces"],
"targets": ["package.json", "nx/core/package-json-workspaces"],
"targets.lint": ["package.json", "@nx/eslint/plugin"],
"targets.lint.command": ["package.json", "@nx/eslint/plugin"],
"targets.lint.cache": ["package.json", "@nx/eslint/plugin"],
"targets.lint.options": ["package.json", "@nx/eslint/plugin"],
"targets.lint.inputs": ["package.json", "@nx/eslint/plugin"],
"targets.lint.options.cwd": ["package.json", "@nx/eslint/plugin"],
"targets.build": ["next.config.js", "@nx/next/plugin"],
"targets.build.command": ["next.config.js", "@nx/next/plugin"],
"targets.build.options": ["next.config.js", "@nx/next/plugin"],
"targets.build.dependsOn": ["next.config.js", "@nx/next/plugin"],
"targets.build.cache": ["next.config.js", "@nx/next/plugin"],
"targets.build.inputs": ["next.config.js", "@nx/next/plugin"],
"targets.build.outputs": ["next.config.js", "@nx/next/plugin"],
"targets.build.options.cwd": ["next.config.js", "@nx/next/plugin"],
"targets.eslint:lint": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.eslint:lint.command": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.eslint:lint.cache": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.eslint:lint.options": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.eslint:lint.inputs": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.eslint:lint.options.cwd": [".eslintrc.json", "@nx/eslint/plugin"],
"targets.next:build": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.command": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.options": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.dependsOn": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.cache": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.inputs": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.outputs": ["next.config.js", "@nx/next/plugin"],
"targets.next:build.options.cwd": ["next.config.js", "@nx/next/plugin"],
"targets.dev": ["next.config.js", "@nx/next/plugin"],
"targets.dev.command": ["next.config.js", "@nx/next/plugin"],
"targets.dev.options": ["next.config.js", "@nx/next/plugin"],
Expand All @@ -180,7 +194,6 @@ nx show project my-workspace --web
"sourceRoot": ["package.json", "nx/core/package-json-workspaces"],
"name": ["package.json", "nx/core/package-json-workspaces"],
"projectType": ["package.json", "nx/core/package-json-workspaces"],
"includedScripts": ["package.json", "nx/core/package-json-workspaces"],
"targets.nx-release-publish": [
"package.json",
"nx/core/package-json-workspaces"
Expand All @@ -203,7 +216,8 @@ nx show project my-workspace --web

{% /project-details %}

The project detail view lists all available tasks, the configuration values for those tasks and where those configuration values are being set.
The project detail view lists all available tasks, the configuration values for those tasks and where those
configuration values are being set.

## Configure an Existing Script to Run with Nx

Expand All @@ -213,42 +227,51 @@ If you want to run one of your existing scripts with Nx, you need to tell Nx abo
2. Add the script to `includedScripts`.
3. Define caching settings.

The `nx exec` command allows you to keep using `npm test` or `npm run test` (or other package manager's alternatives) as you're accustomed to. But still get the benefits of making those operations cacheable. Configuring the `test` script from the example above to run with Nx would look something like this:
The `nx exec` command allows you to keep using `npm test` or `npm run test` (or other package manager's alternatives) as
you're accustomed to. But still get the benefits of making those operations cacheable. Configuring the `test` script
from the example above to run with Nx would look something like this:

```json {% fileName="package.json" %}
{
"name": "my-workspace",
...
"scripts": {
"build": "nx build",
"lint": "nx lint",
"build": "nx next:build",
"lint": "nx eslint:lint",
"test": "nx exec -- node ./run-tests.js"
},
...
"nx": {
"includedScripts": ["test"],
"targets": {
"test": {
"cache": "true",
"inputs": ["default", "^default"],
"inputs": [
"default",
"^default"
],
"outputs": []
}
}
}
}
```

Now if you run `npm run test` or `nx test` twice, the results will be retrieved from the cache. The `inputs` used in this example are as cautious as possible, so you can significantly improve the value of the cache by [customizing Nx Inputs](/recipes/running-tasks/configure-inputs) for each task.
Now if you run `npm run test` or `nx test` twice, the results will be retrieved from the cache. The `inputs` used in
this example are as cautious as possible, so you can significantly improve the value of the cache
by [customizing Nx Inputs](/recipes/running-tasks/configure-inputs) for each task.

## Learn More

{% cards %}

{% card title="Customizing Inputs and Named Inputs" description="Learn more about how to fine-tune caching with custom inputs" type="documentation" url="/recipes/running-tasks/configure-inputs" /%}
{% card title="Customizing Inputs and Named Inputs" description="Learn more about how to fine-tune caching with custom
inputs" type="documentation" url="/recipes/running-tasks/configure-inputs" /%}

{% card title="Cache Task Results" description="Learn more about how caching works" type="documentation" url="/features/cache-task-results" /%}
{% card title="Cache Task Results" description="Learn more about how caching works" type="documentation" url="
/features/cache-task-results" /%}

{% card title="Adding Nx to NPM/Yarn/PNPM Workspace" description="Learn more about how to add Nx to an existing monorepo" type="documentation" url="/recipes/adopting-nx/adding-to-monorepo" /%}
{% card title="Adding Nx to NPM/Yarn/PNPM Workspace" description="Learn more about how to add Nx to an existing
monorepo" type="documentation" url="/recipes/adopting-nx/adding-to-monorepo" /%}

{% /cards %}

Expand Down

0 comments on commit 714cbaa

Please sign in to comment.