docs(nx-cloud): update onboarding flow to use "nx connect" (#26842)

The new Nx Cloud onboarding flow is to run `nx connect` and follow the
prompts. There's no need to explain beyond that in the docs since the
flow is prone to changes in nx.app.
This commit is contained in:
Jack Hsu 2024-07-05 14:19:04 -04:00 committed by GitHub
parent a6522f71a1
commit 2baf672b61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 96 additions and 129 deletions

View File

@ -28,6 +28,17 @@
"path": "/ci/intro/why-nx-cloud",
"tags": []
},
{
"id": "connect-to-cloud",
"name": "Connect Nx Cloud",
"description": "",
"mediaImage": "",
"file": "nx-cloud/intro/connect-to-cloud",
"itemList": [],
"isExternal": false,
"path": "/ci/intro/connect-to-cloud",
"tags": []
},
{
"id": "tutorials",
"name": "Tutorials",
@ -89,6 +100,17 @@
"path": "/ci/intro/why-nx-cloud",
"tags": []
},
"/ci/intro/connect-to-cloud": {
"id": "connect-to-cloud",
"name": "Connect Nx Cloud",
"description": "",
"mediaImage": "",
"file": "nx-cloud/intro/connect-to-cloud",
"itemList": [],
"isExternal": false,
"path": "/ci/intro/connect-to-cloud",
"tags": []
},
"/ci/intro/tutorials": {
"id": "tutorials",
"name": "Tutorials",
@ -403,17 +425,6 @@
"mediaImage": "",
"file": "",
"itemList": [
{
"id": "connect-to-cloud",
"name": "Connect Nx Cloud",
"description": "",
"mediaImage": "",
"file": "nx-cloud/recipes/connect-to-cloud",
"itemList": [],
"isExternal": false,
"path": "/ci/recipes/set-up/connect-to-cloud",
"tags": []
},
{
"id": "monorepo-ci-azure",
"name": "Setting up Azure Pipelines",
@ -844,17 +855,6 @@
"mediaImage": "",
"file": "",
"itemList": [
{
"id": "connect-to-cloud",
"name": "Connect Nx Cloud",
"description": "",
"mediaImage": "",
"file": "nx-cloud/recipes/connect-to-cloud",
"itemList": [],
"isExternal": false,
"path": "/ci/recipes/set-up/connect-to-cloud",
"tags": []
},
{
"id": "monorepo-ci-azure",
"name": "Setting up Azure Pipelines",
@ -926,17 +926,6 @@
"path": "/ci/recipes/set-up",
"tags": ["distribute-task-execution"]
},
"/ci/recipes/set-up/connect-to-cloud": {
"id": "connect-to-cloud",
"name": "Connect Nx Cloud",
"description": "",
"mediaImage": "",
"file": "nx-cloud/recipes/connect-to-cloud",
"itemList": [],
"isExternal": false,
"path": "/ci/recipes/set-up/connect-to-cloud",
"tags": []
},
"/ci/recipes/set-up/monorepo-ci-azure": {
"id": "monorepo-ci-azure",
"name": "Setting up Azure Pipelines",

View File

@ -5169,6 +5169,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Connect Nx Cloud",
"path": "/ci/intro/connect-to-cloud",
"id": "connect-to-cloud",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Tutorials",
"path": "/ci/intro/tutorials",
@ -5213,6 +5221,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Connect Nx Cloud",
"path": "/ci/intro/connect-to-cloud",
"id": "connect-to-cloud",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Tutorials",
"path": "/ci/intro/tutorials",
@ -5444,14 +5460,6 @@
"id": "set-up",
"isExternal": false,
"children": [
{
"name": "Connect Nx Cloud",
"path": "/ci/recipes/set-up/connect-to-cloud",
"id": "connect-to-cloud",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Setting up Azure Pipelines",
"path": "/ci/recipes/set-up/monorepo-ci-azure",
@ -5766,14 +5774,6 @@
"id": "set-up",
"isExternal": false,
"children": [
{
"name": "Connect Nx Cloud",
"path": "/ci/recipes/set-up/connect-to-cloud",
"id": "connect-to-cloud",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Setting up Azure Pipelines",
"path": "/ci/recipes/set-up/monorepo-ci-azure",
@ -5825,14 +5825,6 @@
],
"disableCollapsible": false
},
{
"name": "Connect Nx Cloud",
"path": "/ci/recipes/set-up/connect-to-cloud",
"id": "connect-to-cloud",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Setting up Azure Pipelines",
"path": "/ci/recipes/set-up/monorepo-ci-azure",

View File

@ -1569,6 +1569,11 @@
"id": "why-nx-cloud",
"file": "nx-cloud/intro/why-nx-cloud"
},
{
"name": "Connect Nx Cloud",
"id": "connect-to-cloud",
"file": "nx-cloud/intro/connect-to-cloud"
},
{
"name": "Tutorials",
"id": "tutorials",
@ -1674,11 +1679,6 @@
"description": "Learn how to set up Nx Cloud for your workspace.",
"tags": ["distribute-task-execution"],
"itemList": [
{
"name": "Connect Nx Cloud",
"id": "connect-to-cloud",
"file": "nx-cloud/recipes/connect-to-cloud"
},
{
"name": "Setting up Azure Pipelines",
"id": "monorepo-ci-azure",

View File

@ -14,6 +14,10 @@ Implementing an efficient CI setup for monorepos - while crucial - can be challe
[Create an account on Nx Cloud](https://cloud.nx.app) and connect your repository.
```shell
npx nx connect
```
## Learn about Nx on CI
{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}

View File

@ -0,0 +1,44 @@
# Connect to Nx Cloud
Nx Cloud directly integrates with your existing CI setup.
![Nx Cloud Overview](/shared/images/nx-cloud/nx-cloud-overview.webp)
In a nutshell, here's how this works:
**Step 1: Connect your workspace to Nx Cloud**
This can be done by signing up on [nx.app](https://nx.app) and then connecting to your git repository.
```shell
npx nx connect
```
**Step 2: Your CI script triggers Nx Cloud**
```yml
- name: Start CI run
run: 'npx nx-cloud start-ci-run --distribute-on="8 linux-medium-js"'
```
Let us generate the workflow file for you, if you don't already have one.
```shell
npx nx g ci-workflow
```
Or, check out our [recipes for the various CI providers](/ci/recipes/set-up).
**Step 3: Run your Nx commands as usual**
```yml
- run: npx nx-cloud record -- nx format:check
- run: npx nx affected -t lint test build
- run: npx nx affected -t e2e-ci --parallel 1
```
All these commands are automatically picked up by Nx Cloud, split up into smaller tasks and distributed across the specified number of machines.
**Step 4: All results are played back automatically**
Nx Cloud automatically plays back all results to your CI system, as if distribution never happened. You can continue doing post-processing on the results, like uploading test reports, deploying artifacts etc.

View File

@ -21,39 +21,9 @@ All this is possible because Nx Cloud directly integrates with Nx and has knowle
Read more about individual features of Nx Cloud in the [features section](/ci/features).
## How does Nx Cloud integrate into my existing CI setup
## Integrate Nx Cloud into my CI setup
Nx Cloud directly integrates with your existing CI setup.
![Nx Cloud Overview](/shared/images/nx-cloud/nx-cloud-overview.webp)
In a nutshell, here's how this works:
**Step 1: Connect your workspace to Nx Cloud**
This can be done by signing up on [nx.app](https://nx.app) and then connecting to your git repository. Read more about all the details [on this doc page](/ci/recipes/set-up/connect-to-cloud).
**Step 2: Your CI script triggers Nx Cloud**
```yml
- name: Start CI run
run: 'npx nx-cloud start-ci-run --distribute-on="8 linux-medium-js"'
```
Check out our [recipes for the various CI providers](/ci/recipes/set-up).
**Step 3: Run your Nx command as usual**
```yml
- run: npx nx-cloud record -- nx format:check
- run: npx nx affected -t lint test build e2e-ci
```
All these commands are automatically picked up by Nx Cloud, split up into smaller tasks and distributed across the specified number of machines.
**Step 4: All results are played back automatically**
Nx Cloud automatically plays back all results to your CI system, as if distribution never happened. You can continue doing post-processing on the results, like uploading test reports, deploying artifacts etc.
Ready to experience fast CI? Read the [connect to Nx Cloud](/ci/intro/connect-to-cloud) page for more details.
## Learn more

View File

@ -1,33 +0,0 @@
# Connect to Nx Cloud
Create an account on [nx.app](https://nx.app). There are several ways to connect your repository to Nx Cloud.
#### Connect Directly Through GitHub
If your repository is hosted on GitHub, we recommend you create an Nx Cloud organization based on your GitHub organization.
![Connect Your VCS Account](/nx-cloud/tutorial/connect-vcs-account.png)
After that, connect you repository.
![Connect Your Repository](/nx-cloud/tutorial/connect-repository.png)
This will send a pull request to your repository that will add the `nxCloudAccessToken` property to `nx.json`.
![Nx Cloud Setup PR](/nx-cloud/tutorial/nx-cloud-setup-pr.png)
This wires up all the CI for you and configures access. Folks who can see your repository can see your workspace on nx.app.
## Manually Connect Your Workspace
If your repository is hosted on a different source control provider, you can also connect to Nx Cloud manually. You'll need to add a source control integration later to enable [Nx Agents](/ci/features/distribute-task-execution).
Run the following command in your repository:
```shell
pnpm nx connect
```
Click the link in the terminal to claim your workspace on [nx.app](https://nx.app).
The command generates an `nxCloudAccessToken` property inside of `nx.json`. This is a read-only token that should be committed to the repository.

View File

@ -10,7 +10,7 @@ In this diagram, Teika runs the build once on his machine, then CI, Kimiko and J
## Setting Up Nx Cloud
To use **Nx Replay** you need to connect your workspace to Nx Cloud. See the [connect to Nx Cloud recipe](/ci/recipes/set-up/connect-to-cloud).
To use **Nx Replay** you need to connect your workspace to Nx Cloud. See the [connect to Nx Cloud recipe](/ci/intro/connect-to-cloud).
## See Remote Caching in Action

View File

@ -246,6 +246,7 @@
- [Intro](/ci/intro)
- [CI with Nx](/ci/intro/ci-with-nx)
- [Why Nx Cloud?](/ci/intro/why-nx-cloud)
- [Connect Nx Cloud](/ci/intro/connect-to-cloud)
- [Tutorials](/ci/intro/tutorials)
- [Circle CI with Nx](/ci/intro/tutorials/circle)
- [GitHub Actions with Nx](/ci/intro/tutorials/github-actions)
@ -263,7 +264,6 @@
- [Cache Security](/ci/concepts/cache-security)
- [Recipes](/ci/recipes)
- [Set Up CI](/ci/recipes/set-up)
- [Connect Nx Cloud](/ci/recipes/set-up/connect-to-cloud)
- [Setting up Azure Pipelines](/ci/recipes/set-up/monorepo-ci-azure)
- [Setting up CircleCI](/ci/recipes/set-up/monorepo-ci-circle-ci)
- [Setting up GitHub Actions](/ci/recipes/set-up/monorepo-ci-github-actions)

View File

@ -480,6 +480,7 @@ const nxCloudUrls = {
'/ci/concepts/parallelization-distribution',
'/nx-cloud/:path*': '/ci/:path*',
'/core-features/:path*': '/features/:path*',
'/ci/recipes/set-up/connect-to-cloud': '/ci/intro/connect-to-cloud',
};
/**