From 202e70167c7366cfddeb8bbd549c33f6e4177e05 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Fri, 23 Feb 2024 12:48:26 -0500 Subject: [PATCH] feat(core): update generated README pages with more useful instructions --- .../library/files/{lib => readme}/README.md | 0 packages/js/src/generators/library/library.ts | 39 +- .../generate-workspace-files.spec.ts.snap | 844 +++++++++--------- .../new/files-readme/README.md.template | 64 +- .../new/generate-workspace-files.ts | 6 +- 5 files changed, 500 insertions(+), 453 deletions(-) rename packages/js/src/generators/library/files/{lib => readme}/README.md (100%) diff --git a/packages/js/src/generators/library/files/lib/README.md b/packages/js/src/generators/library/files/readme/README.md similarity index 100% rename from packages/js/src/generators/library/files/lib/README.md rename to packages/js/src/generators/library/files/readme/README.md diff --git a/packages/js/src/generators/library/library.ts b/packages/js/src/generators/library/library.ts index 8a7a52b572b74a..4a888313c3bb3c 100644 --- a/packages/js/src/generators/library/library.ts +++ b/packages/js/src/generators/library/library.ts @@ -61,8 +61,6 @@ export async function libraryGeneratorInternal( tree: Tree, schema: LibraryGeneratorSchema ) { - const filesDir = join(__dirname, './files'); - const tasks: GeneratorCallback[] = []; tasks.push( await jsInitGenerator(tree, { @@ -73,7 +71,7 @@ export async function libraryGeneratorInternal( ); const options = await normalizeOptions(tree, schema); - createFiles(tree, options, `${filesDir}/lib`); + createFiles(tree, options); addProject(tree, options); @@ -119,7 +117,7 @@ export async function libraryGeneratorInternal( const jestCallback = await addJest(tree, options); tasks.push(jestCallback); if (options.bundler === 'swc' || options.bundler === 'rollup') { - replaceJestConfig(tree, options, `${filesDir}/jest-config`); + replaceJestConfig(tree, options); } } else if ( options.unitTestRunner === 'vitest' && @@ -419,14 +417,14 @@ function addBabelRc(tree: Tree, options: NormalizedSchema) { writeJson(tree, join(options.projectRoot, filename), babelrc); } -function createFiles(tree: Tree, options: NormalizedSchema, filesDir: string) { +function createFiles(tree: Tree, options: NormalizedSchema) { const { className, name, propertyName } = names( options.projectNames.projectFileName ); createProjectTsConfigJson(tree, options); - generateFiles(tree, filesDir, options.projectRoot, { + generateFiles(tree, join(__dirname, './files/lib'), options.projectRoot, { ...options, dot: '.', className, @@ -441,6 +439,28 @@ function createFiles(tree: Tree, options: NormalizedSchema, filesDir: string) { hasUnitTestRunner: options.unitTestRunner !== 'none', }); + if (!options.rootProject) { + generateFiles( + tree, + join(__dirname, './files/readme'), + options.projectRoot, + { + ...options, + dot: '.', + className, + name, + propertyName, + js: !!options.js, + cliCommand: 'nx', + strict: undefined, + tmpl: '', + offsetFromRoot: offsetFromRoot(options.projectRoot), + buildable: options.bundler && options.bundler !== 'none', + hasUnitTestRunner: options.unitTestRunner !== 'none', + } + ); + } + if (options.bundler === 'swc' || options.bundler === 'rollup') { addSwcDependencies(tree); addSwcConfig( @@ -539,11 +559,8 @@ async function addJest( }); } -function replaceJestConfig( - tree: Tree, - options: NormalizedSchema, - filesDir: string -) { +function replaceJestConfig(tree: Tree, options: NormalizedSchema) { + const filesDir = join(__dirname, './files/jest-config'); // the existing config has to be deleted otherwise the new config won't overwrite it const existingJestConfig = joinPathFragments( filesDir, diff --git a/packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap b/packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap index 60c9f322b4c4e8..68cf63118a578b 100644 --- a/packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap +++ b/packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap @@ -7,48 +7,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for An ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -57,9 +51,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -79,48 +73,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for An ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -129,9 +117,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -151,44 +139,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ap ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -197,9 +197,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -219,44 +219,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Co ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -265,9 +277,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -287,44 +299,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Em ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -333,9 +357,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -355,44 +379,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ex ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -401,9 +437,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -423,48 +459,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ex ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -473,9 +503,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -495,44 +525,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for NP ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -541,9 +583,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -563,48 +605,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ne ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -613,9 +649,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -635,48 +671,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ne ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx dev app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -685,9 +715,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -707,48 +737,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ne ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx dev app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -757,9 +781,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -779,44 +803,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for No ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -825,9 +861,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -847,48 +883,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for No ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -897,9 +927,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -919,48 +949,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Nu ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -969,9 +993,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -991,48 +1015,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Nu ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1041,9 +1059,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1063,48 +1081,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Re ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1113,9 +1125,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1135,44 +1147,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Re ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1181,9 +1205,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1203,48 +1227,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Re ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1253,9 +1271,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1275,44 +1293,56 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for TS ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Nx plugins and code generators -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Add Nx plugins to leverage their code generators and automated, inferred tasks. + +\`\`\` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo + +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +\`\`\` + +Run \`npx nx list\` to get a list of available plugins and whether they have generators. Then run \`npx nx list \` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1321,9 +1351,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1343,44 +1373,38 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Ts ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Generate code +## Integrate with editors -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build the library -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build\` to build the library. The build artifacts are stored in the output directory (i.e. \`dist/\`), ready to be published. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1389,9 +1413,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1411,48 +1435,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Vu ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1461,9 +1479,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1483,48 +1501,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for Vu ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1533,9 +1545,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) @@ -1555,48 +1567,42 @@ exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for We ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -## Start the app +## Integrate with editors -To start the development server run \`nx serve app1\`. Open your browser and navigate to http://localhost:4200/. Happy coding! +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. -## Generate code +## Start the application -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Run \`npx nx serve app1\` to start the development server. Happy coding! -Run \`nx list\` to get a list of available plugins and whether they have generators. Then run \`nx list \` to see what generators are available. +## Build for production -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +Run \`npx nx build app1\` to build the application. The build artifacts are stored in the output directory (e.g. \`dist/\` or \`build/\`), ready to be deployed. ## Running tasks To execute tasks with Nx use the following syntax: \`\`\` -nx <...options> +npx nx <...options> \`\`\` You can also run multiple targets: \`\`\` -nx run-many -t +npx nx run-many -t \`\`\` ..or add \`-p\` to filter specific projects \`\`\` -nx run-many -t -p +npx nx run-many -t -p \`\`\` Targets can be defined in the \`package.json\` or \`projects.json\`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run \`nx build demoapp\` to build the application. The build artifacts will be stored in the \`dist/\` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your \`nx.json\`). On CI you might want to go a step further. @@ -1605,9 +1611,9 @@ Nx comes with local caching already built-in (check your \`nx.json\`). On CI you - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph +## Explore the project graph -Run \`nx graph\` to show the graph of the workspace. +Run \`npx nx graph\` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) diff --git a/packages/workspace/src/generators/new/files-readme/README.md.template b/packages/workspace/src/generators/new/files-readme/README.md.template index 71fc9cbaa2035e..c5b24ab1655620 100644 --- a/packages/workspace/src/generators/new/files-readme/README.md.template +++ b/packages/workspace/src/generators/new/files-readme/README.md.template @@ -2,52 +2,71 @@ -✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨<% if (!!appName) { %> +✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨ -<% if (includeServe) { %> -## Start the app +## Integrate with editors -To start the development server run `nx serve <%= appName %>`. Open your browser and navigate to http://localhost:4200/. Happy coding!<% } %> -<% } %> +Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console +provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and +comes with a LSP for Vim users. +<% if (!!appName) { + if (isJsStandalone) { %> +## Build the library + +Run `npx nx build` to build the library. The build artifacts are stored in the output directory (i.e. `dist/`), ready to be published. +<% } else { %> +## Start the application + +Run `npx nx <%= serveCommand %> <%= appName %>` to start the development server. Happy coding! + +## Build for production -## Generate code +Run `npx nx build <%= appName %>` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed. +<% } } else { %> +## Nx plugins and code generators -If you happen to use Nx plugins, you can leverage code generators that might come with it. +Add Nx plugins to leverage their code generators and automated, inferred tasks. -Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list ` to see what generators are available. +``` +# Add plugin +npx nx add @nx/react + +# Use code generator +npx nx generate @nx/react:app demo -Learn more about [Nx generators on the docs](https://nx.dev/features/generate-code). +# Run development server +npx nx serve demo + +# View project details +npx nx show project demo --web +``` +Run `npx nx list` to get a list of available plugins and whether they have generators. Then run `npx nx list ` to see what generators are available. + +Learn more about [code generators](https://nx.dev/features/generate-code) and [inferred tasks](https://nx.dev/concepts/inferred-tasks) in the docs. +<% } %> ## Running tasks To execute tasks with Nx use the following syntax: ``` -nx <...options> +npx nx <...options> ``` You can also run multiple targets: ``` -nx run-many -t +npx nx run-many -t ``` ..or add `-p` to filter specific projects ``` -nx run-many -t -p +npx nx run-many -t -p ``` Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/features/run-tasks). -## Want better Editor Integration? - -Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users. - -## Ready to deploy? - -Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed. - ## Set up CI! Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further. @@ -56,8 +75,9 @@ Nx comes with local caching already built-in (check your `nx.json`). On CI you m - [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution) - [Learn more how to setup CI](https://nx.dev/recipes/ci) -## Explore the Project Graph -Run `nx graph` to show the graph of the workspace. +## Explore the project graph + +Run `npx nx graph` to show the graph of the workspace. It will show tasks that you can run with Nx. - [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph) diff --git a/packages/workspace/src/generators/new/generate-workspace-files.ts b/packages/workspace/src/generators/new/generate-workspace-files.ts index 1d696547522bde..8128f945204bef 100644 --- a/packages/workspace/src/generators/new/generate-workspace-files.ts +++ b/packages/workspace/src/generators/new/generate-workspace-files.ts @@ -129,8 +129,12 @@ function createReadme( const formattedNames = names(name); generateFiles(tree, join(__dirname, './files-readme'), directory, { formattedNames, - includeServe: preset !== Preset.TsStandalone, + isJsStandalone: preset === Preset.TsStandalone, appName, + serveCommand: + preset === Preset.NextJs || preset === Preset.NextJsStandalone + ? 'dev' + : 'serve', name, }); }