diff --git a/docs/angular/api-next/builders/export.md b/docs/angular/api-next/builders/export.md index 3a20db0ef9..73c5a99c95 100644 --- a/docs/angular/api-next/builders/export.md +++ b/docs/angular/api-next/builders/export.md @@ -1,5 +1,5 @@ # export -Export a Next.js app +Export a Next.js app. The exported application is located at dist/\$outputPath/exported. Builder properties can be configured in angular.json when defining the builder, or when invoking it. diff --git a/docs/angular/api/home.md b/docs/angular/api/home.md index 3abeab0f7c..d18e9dbd71 100644 --- a/docs/angular/api/home.md +++ b/docs/angular/api/home.md @@ -3,18 +3,19 @@ Here is the list of all the available packages inside the Nx ecosystem. You can see, for each package its dependencies. -| PackageName | Dependencies | PeerDependencies | -| --------------- | --------------------------------------- | ---------------- | -| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | -| @nrwl/cypress | | @nrwl/workspace | -| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/jest | | @nrwl/workspace | -| @nrwl/linter | | @nrwl/workspace | -| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | -| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/workspace | @nrwl/cli | | +| PackageName | Dependencies | PeerDependencies | +| --------------- | ------------------------------------------------- | ---------------- | +| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | +| @nrwl/cypress | | @nrwl/workspace | +| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/jest | | @nrwl/workspace | +| @nrwl/linter | | @nrwl/workspace | +| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | +| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace | +| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/workspace | @nrwl/cli | | ## Angular diff --git a/docs/angular/getting-started/getting-started.md b/docs/angular/getting-started/getting-started.md index 17a71af825..49cebab30a 100644 --- a/docs/angular/getting-started/getting-started.md +++ b/docs/angular/getting-started/getting-started.md @@ -53,6 +53,7 @@ npm install --save-dev @nrwl/react # Adds React capabilities npm install --save-dev @nrwl/node # Adds Node capabilities npm install --save-dev @nrwl/express # Adds Express capabilities npm install --save-dev @nrwl/nest # Adds Nest capabilities +npm install --save-dev @nrwl/next # Adds Next.js capabilities ``` **Using `yarn`** @@ -64,6 +65,7 @@ yarn add --dev @nrwl/angular # Adds Angular capabilities yarn add --dev @nrwl/node # Adds Node capabilities yarn add --dev @nrwl/express # Adds Express capabilities yarn add --dev @nrwl/nest # Adds Nest capabilities +yarn add --dev @nrwl/next # Adds Next.js capabilities ``` **Using `ng add`** @@ -75,6 +77,7 @@ ng add @nrwl/react # Adds React capabilities ng add @nrwl/node # Adds Node capabilities ng add @nrwl/express # Adds Express capabilities ng add @nrwl/nest # Adds Nest capabilities +ng add @nrwl/next # Adds Next.js capabilities ``` ## Creating an application diff --git a/docs/angular/guides/react.md b/docs/angular/guides/react.md index b43851d72b..b00ca1109f 100644 --- a/docs/angular/guides/react.md +++ b/docs/angular/guides/react.md @@ -44,9 +44,7 @@ ng g @nrwl/react:app frontend and you will see the following: ```treeview -myworkspace/ -├── README.md -├── angular.json +happynrwl/ ├── apps/ │   ├── frontend/ │   │   ├── src/ @@ -79,6 +77,7 @@ myworkspace/ │   │   ├── tsconfig.e2e.json │   │   └── tslint.json ├── libs/ +├── angular.json ├── nx.json ├── package.json ├── tools/ @@ -107,9 +106,7 @@ ng g @nrwl/react:lib home and you will see the following: ```treeview -myworkspace/ -├── README.md -├── angular.json +happynrwl/ ├── apps/ │   ├── frontend/ │   └── frontend-e2e/ @@ -127,6 +124,7 @@ myworkspace/ │   ├── tsconfig.spec.json │   └── tslint.json ├── nx.json +├── angular.json ├── package.json ├── tools/ ├── tsconfig.json @@ -144,7 +142,7 @@ You can import the home library into the frontend application like this. ```typescript jsx import { Component } from 'react'; -import { Home } from '@myworkspace/home'; +import { Home } from '@happynrwl/home'; import './app.css'; @@ -165,35 +163,3 @@ export class App extends Component { Without Nx, creating a new shared library can take from several hours or even weeks: a new repo needs to be provisioned, CI needs to be set up, etc.. In an Nx Workspace, it only takes minutes. You can share React components between multiple React applications. You can also share web components between React and Angular applications. You can even share code between the backend and the frontend. All can be done without any unnecessary ceremony. - -## Understanding Your Nx Workspace - -An Nx workspace can contain dozens (or hundreds) of applications and libraries. They all may depend on one another and without Nx, it is difficult to understand the implications of a particular change. - -Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1, and gets more and more out of sync with every passing day. - -With Nx, you can do better than that. You can run `yarn dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information. - -![Monorepo Diagram](../fundamentals/monorepo-diagram.png) - -It can also help you answer questions like "what apps will have to be redeployed if I change this file?" - -![Monorepo Diagram Affected](../fundamentals/monorepo-diagram-affected.png) - -Because Nx understands how our applications and libraries depend on each other, it can verify that a code change to a reusable library does not break any applications and libraries depending on it. - -```bash -yarn affected:apps # prints the apps affected by a PR - -yarn affected:build # reruns build for all the projects affected by a PR - -yarn affected:test # reruns unit tests for all the projects affected by a PR - -yarn affected:e2e # reruns e2e tests for all the projects affected by a PR - -yarn affected --target=lint # reruns any target (for instance lint) for projects affected by a PR -``` - -Nx will topologically sort the projects, and will run what it can in parallel. The fact that Nx can use its dependency graph to rebuild and retest the minimal number of projects necessary is crucial. Without this the repo will not scale beyond a handful of projects. - -You can read more about how Nx help you build like google [here](../fundamentals/monorepos-automation). diff --git a/docs/map.json b/docs/map.json index 1f8ea2d00d..1b84427474 100644 --- a/docs/map.json +++ b/docs/map.json @@ -422,6 +422,10 @@ "name": "Nx CLI", "id": "cli" }, + { + "name": "Next.js", + "id": "nextjs" + }, { "name": "Updating Nx", "id": "update", diff --git a/docs/react/api-next/builders/export.md b/docs/react/api-next/builders/export.md index 161337ff4e..73ae66286b 100644 --- a/docs/react/api-next/builders/export.md +++ b/docs/react/api-next/builders/export.md @@ -1,6 +1,6 @@ # export -Export a Next.js app +Export a Next.js app. The exported application is located at dist/\$outputPath/exported. Builder properties can be configured in workspace.json when defining the builder, or when invoking it. Read more about how to use builders and the CLI here: https://nx.dev/react/guides/cli. diff --git a/docs/react/api/home.md b/docs/react/api/home.md index c65d87a35f..f218eead9f 100644 --- a/docs/react/api/home.md +++ b/docs/react/api/home.md @@ -3,18 +3,19 @@ Here is the list of all the available packages inside the Nx ecosystem. You can see, for each package its dependencies. -| PackageName | Dependencies | PeerDependencies | -| --------------- | --------------------------------------- | ---------------- | -| @nrwl/workspace | @nrwl/cli | | -| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | -| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | -| @nrwl/cypress | | @nrwl/workspace | -| @nrwl/jest | | @nrwl/workspace | -| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/linter | | @nrwl/workspace | +| PackageName | Dependencies | PeerDependencies | +| --------------- | ------------------------------------------------- | ---------------- | +| @nrwl/workspace | @nrwl/cli | | +| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | +| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace | +| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | +| @nrwl/cypress | | @nrwl/workspace | +| @nrwl/jest | | @nrwl/workspace | +| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/linter | | @nrwl/workspace | ## React diff --git a/docs/react/fundamentals/monorepos-automation.md b/docs/react/fundamentals/monorepos-automation.md index 201f000901..fef84d436a 100644 --- a/docs/react/fundamentals/monorepos-automation.md +++ b/docs/react/fundamentals/monorepos-automation.md @@ -27,10 +27,6 @@ To see how Nx delivers all of these, start with an empty Nx workspace: ├── workspace.json ├── nx.json ├── package.json -<<<<<<< HEAD -======= -├── tools/ ->>>>>>> wip └── tsconfig.json ``` @@ -50,36 +46,43 @@ Nx can generate many different types of applications: React Applications: ```bash -yarn add --dev @nrwl/react # Add React Capabilities to a workspace -nx g @nrwl/react:application myapp # Generate a React Application +yarn add --dev @nrwl/react # Add React capabilities to a workspace +nx g @nrwl/react:application myapp # Generate a React application ``` Applications built out of Web Components: ```bash -yarn add --dev @nrwl/web # Add Web Capabilities to a workspace -nx g @nrwl/web:application myapp # Generate a Web Application +yarn add --dev @nrwl/web # Add Web capabilities to a workspace +nx g @nrwl/web:application myapp # Generate a Web application ``` Angular Applications: ```bash -yarn add --dev @nrwl/angular # Add Angular Capabilities to a workspace -nx g @nrwl/angular:application myapp # Generate an Angular Application +yarn add --dev @nrwl/angular # Add Angular capabilities to a workspace +nx g @nrwl/angular:application myapp # Generate an Angular application ``` NestJS Applications: ```bash -yarn add --dev @nrwl/nest # Add Nest Capabilities to a workspace -nx g @nrwl/nest:application myapp # Generate a Nest Application +yarn add --dev @nrwl/nest # Add Nest capabilities to a workspace +nx g @nrwl/nest:application myapp # Generate a Nest application ``` Express Applications: ```bash -yarn add --dev @nrwl/express # Add Express Capabilities to a workspace -nx g @nrwl/express:application myapp # Generate an Express Application +yarn add --dev @nrwl/express # Add Express capabilities to a workspace +nx g @nrwl/express:application myapp # Generate an Express application +``` + +Next.js Applications: + +```bash +yarn add --dev @nrwl/next # Add Next.js capabilities to a workspace +nx g @nrwl/next:application myapp # Generate an Next.js application ``` And even more! diff --git a/docs/react/fundamentals/use-modern-tools.md b/docs/react/fundamentals/use-modern-tools.md index bf95903b0e..f36b04285b 100644 --- a/docs/react/fundamentals/use-modern-tools.md +++ b/docs/react/fundamentals/use-modern-tools.md @@ -4,6 +4,31 @@ Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow. Of course, it's not the case that Cypress is always better than Protractor or Nest is always better than say Express. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages. +## Next.js + +Next.js is a React framework designed for building server-prerendered applications. + +Add the Nex.js capability to your workspace: + +```bash +yarn add --dev @nrwl/next +``` + +To create the new Next.js application: + +```bash +nx g @nrwl/next:application tasks +``` + +You can run: + +- `nx serve tasks` to serve the application +- `nx build tasks` to build the application +- `nx test tasks` to test the application +- `nx e2e tasks-e2e` to run e2e tests for the application + +Read more about Next.js at [nextjs.org](https://nextjs.org). + ## Nest ![NestJS logo](/shared/nest-logo.png) diff --git a/docs/react/getting-started/getting-started.md b/docs/react/getting-started/getting-started.md index 3920992837..dd9e3dce79 100644 --- a/docs/react/getting-started/getting-started.md +++ b/docs/react/getting-started/getting-started.md @@ -50,11 +50,12 @@ yarn add --dev @nrwl/react ### Additional Capabilities -Nx also provides capabilities for other platforms, and libraries such as Node, Express, and Nest. +Nx also provides capabilities for other platforms, and libraries such as Node, Next.js, Express, and Nest. To add the additional capabilities: ```bash +npm install --save-dev @nrwl/next npm install --save-dev @nrwl/node npm install --save-dev @nrwl/express npm install --save-dev @nrwl/nest @@ -63,6 +64,7 @@ npm install --save-dev @nrwl/nest **Using `yarn`** ```bash +yarn add --dev @nrwl/next yarn add --dev @nrwl/node yarn add --dev @nrwl/express yarn add --dev @nrwl/nest @@ -76,6 +78,8 @@ After the capabilities are added, you create your first application using the fo nx generate @nrwl/react:application myapp ``` +> Nx has first-class Next.js support. Read more about it [here](https://nx.dev/react/guides/nextjs). + The following files and folders are generated in the new application: ```treeview diff --git a/docs/react/guides/nextjs.md b/docs/react/guides/nextjs.md new file mode 100644 index 0000000000..29eb814f10 --- /dev/null +++ b/docs/react/guides/nextjs.md @@ -0,0 +1,144 @@ +# Next.js + +Nx comes with first-class Next.js support. In this guide we will look at how to use it. + +## Creating a New Nx Workspace + +Create a new Nx workspace. The easiest way to do it is to use npx. + +```bash +npx --ignore-existing create-nx-workspace happynrwl +``` + +You can also create a workspace with a Next.js application in place by running: + +```bash +npx --ignore-existing create-nx-workspace happynrwl --preset=next +``` + +## Adding Next.js capabilities to a workspace + +If you used the Next.js preset, you are all set and can skip this. If you created an empty workspace or have an existing workspace, you can add Next.js capabilities to the workspace: + +```bash +yarn add --dev @nrwl/next +``` + +## Generating a Next.js Application + +Run + +```bash +nx g @nrwl/next:app tuskdesk +``` + +and you will see the following: + +```treeview +happynrwl/ +├── apps/ +│   ├── tuskdesk/ +│   │   ├── pages/ +│   │   │   ├── index.css +│   │   │   └── index.tsx +│   │   ├── jest.conf.js +│   │   ├── tsconfig.json +│   │   ├── tsconfig.spec.json +│   │   └── .eslintrc +│   └── tuskdesk-e2e/ +│   │   ├── src/ +│   │   │   ├── integrations/ +│   │   │   │   └── app.spec.ts +│   │   │   ├── fixutres/ +│   │   │   ├── plugins/ +│   │   │   └── support/ +│   │   ├── cypress.json +│   │   ├── tsconfig.e2e.json +│   │   └── .eslintrc +├── libs/ +├── workspace.json +├── nx.json +├── package.json +├── tools/ +├── tsconfig.json +└── .eslintrc +``` + +Run: + +- `nx serve tuskdesk` to serve the application +- `nx serve tuskdesk --prod` to serve the application in the production mode +- `nx build tuskdesk` to build the application +- `nx lint tuskdesk` to lint the application +- `nx test tuskdesk` to test the application using Jest +- `nx export tuskdesk` to export the application +- `nx e2e tuskdesk-e2e` to test the application using Cypress + +When using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, Jest. No need to configure anything: watch mode, source maps, and typings just work. + +## Generating a React Library + +Run + +```bash +nx g @nrwl/react:lib shared-components +``` + +and you will see the following: + +```treeview +happynrwl/ +├── apps/ +│   ├── tuskdesk/ +│   └── tuskdesk-e2e/ +├── libs/ +│   └── shared-components/ +│   ├── src/ +│   │ ├── lib/ +│   │ │ ├── home.css +│   │ │ ├── home.tsx +│   │ │ └── home.spec.tsx +│   │ └ index.ts +│   ├── jest.config.js +│   ├── tsconfig.json +│   ├── tsconfig.lib.json +│   ├── tsconfig.spec.json +│   └── tslint.json +├── nx.json +├── workspace.json +├── package.json +├── tools/ +├── tsconfig.json +└── tslint.json +``` + +Run: + +- `nx test shared-components` to test the library +- `nx lint shared-components` to lint the library + +## Using the Library in an Application + +You can import the shared-components library into the Next.js application like this. + +```typescript jsx +import { Home } from '@happynrwl/shared-components'; +import React from 'react'; + +export const Index = () => { + return ( + <> + +
the rest of the component
+ + ); +}; + +export default Index; +``` + +## Sharing Code + +Without Nx, creating a new shared library can take from several hours or even weeks: a new repo needs to be provisioned, CI needs to be set up, etc.. In an Nx Workspace, it only takes minutes. + +You can share React components between multiple Next.js applications. You can also share web components between Next.js and plain React applications. You can even share code between the backend and the frontend. All can be done without any unnecessary ceremony. diff --git a/docs/react/tutorial/01-create-application.md b/docs/react/tutorial/01-create-application.md index c61b9ef9e4..b8fde6c17a 100644 --- a/docs/react/tutorial/01-create-application.md +++ b/docs/react/tutorial/01-create-application.md @@ -2,6 +2,8 @@ In this tutorial you will use Nx to build a full-stack application out of common libraries using modern technologies. +> Next.js: Nx also has first-class Next.js support. Read more about it [here](https://nx.dev/react/guides/next.js). + ## Create a New Workspace **Start by creating a new workspace.** diff --git a/docs/web/api-next/builders/export.md b/docs/web/api-next/builders/export.md index a1addc5fc1..61717b61cb 100644 --- a/docs/web/api-next/builders/export.md +++ b/docs/web/api-next/builders/export.md @@ -1,6 +1,6 @@ # export -Export a Next.js app +Export a Next.js app. The exported application is located at dist/\$outputPath/exported. Builder properties can be configured in workspace.json when defining the builder, or when invoking it. Read more about how to use builders and the CLI here: https://nx.dev/web/guides/cli. diff --git a/docs/web/api/home.md b/docs/web/api/home.md index 7e5ab45dc9..c6bbfb3f21 100644 --- a/docs/web/api/home.md +++ b/docs/web/api/home.md @@ -3,18 +3,19 @@ Here is the list of all the available packages inside the Nx ecosystem. You can see, for each package its dependencies. -| PackageName | Dependencies | PeerDependencies | -| --------------- | --------------------------------------- | ---------------- | -| @nrwl/workspace | @nrwl/cli | | -| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | -| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | -| @nrwl/cypress | | @nrwl/workspace | -| @nrwl/jest | | @nrwl/workspace | -| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | -| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | -| @nrwl/linter | | @nrwl/workspace | +| PackageName | Dependencies | PeerDependencies | +| --------------- | ------------------------------------------------- | ---------------- | +| @nrwl/workspace | @nrwl/cli | | +| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace | +| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace | +| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace | +| @nrwl/cypress | | @nrwl/workspace | +| @nrwl/jest | | @nrwl/workspace | +| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace | +| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace | +| @nrwl/linter | | @nrwl/workspace | ## Web diff --git a/docs/web/fundamentals/monorepos-automation.md b/docs/web/fundamentals/monorepos-automation.md index 694b92f19f..993e3daa85 100644 --- a/docs/web/fundamentals/monorepos-automation.md +++ b/docs/web/fundamentals/monorepos-automation.md @@ -78,6 +78,13 @@ yarn add --dev @nrwl/express # Add Express Capabilities to a workspace nx g @nrwl/express:application myapp # Generate an Express Application ``` +Next.js Applications: + +```bash +yarn add --dev @nrwl/next # Add Next.js capabilities to a workspace +nx g @nrwl/next:application myapp # Generate an Next.js application +``` + And even more! Creating a new application will result in something like this: diff --git a/docs/web/fundamentals/use-modern-tools.md b/docs/web/fundamentals/use-modern-tools.md index e952c3c7ba..fe46c4b4dc 100644 --- a/docs/web/fundamentals/use-modern-tools.md +++ b/docs/web/fundamentals/use-modern-tools.md @@ -4,6 +4,31 @@ Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow. Of course, it's not the case that Cypress is always better than Protractor or Nest is always better than say Express. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages. +## Next.js + +Next.js is a React framework designed for building server-prerendered applications. + +Add the Nex.js capability to your workspace: + +```bash +yarn add --dev @nrwl/next +``` + +To create the new Next.js application: + +```bash +nx g @nrwl/next:application tasks +``` + +You can run: + +- `nx serve tasks` to serve the application +- `nx build tasks` to build the application +- `nx test tasks` to test the application +- `nx e2e tasks-e2e` to run e2e tests for the application + +Read more about Next.js at [nextjs.org](https://nextjs.org). + ## Nest ![NestJS logo](/shared/nest-logo.png) diff --git a/docs/web/getting-started/getting-started.md b/docs/web/getting-started/getting-started.md index 23d926d166..9f0ae1a809 100644 --- a/docs/web/getting-started/getting-started.md +++ b/docs/web/getting-started/getting-started.md @@ -50,11 +50,12 @@ yarn add --dev @nrwl/web ### Additional Capabilities -Nx also provides capabilities for other platforms, and libraries such as Node, Express, and Nest. +Nx also provides capabilities for other platforms, and libraries such as Node, Next.js, Express, and Nest. To add the additional capabilities: ```bash +npm install --save-dev @nrwl/next npm install --save-dev @nrwl/node npm install --save-dev @nrwl/express npm install --save-dev @nrwl/nest @@ -63,6 +64,7 @@ npm install --save-dev @nrwl/nest **Using `yarn`** ```bash +yarn add --dev @nrwl/next yarn add --dev @nrwl/node yarn add --dev @nrwl/express yarn add --dev @nrwl/nest diff --git a/e2e/next.test.ts b/e2e/next.test.ts index 7af175965b..5d1a6ee362 100644 --- a/e2e/next.test.ts +++ b/e2e/next.test.ts @@ -8,7 +8,8 @@ import { runCLI, runCLIAsync, uniq, - updateFile + updateFile, + supportUi } from './utils'; import treeKill = require('tree-kill'); diff --git a/packages/cli/bin/nx.ts b/packages/cli/bin/nx.ts index 4f3118104d..4cbc76531b 100644 --- a/packages/cli/bin/nx.ts +++ b/packages/cli/bin/nx.ts @@ -25,6 +25,19 @@ const workspace = findWorkspaceRoot(__dirname); // we are running a local nx if (workspace) { + // required to make sure nrwl/workspace import works + if (workspace.type === 'nx') { + require(path.join( + workspace.dir, + 'node_modules', + '@nrwl', + 'tao', + 'src', + 'compat', + 'compat.js' + )); + } + // The commandsObject is a Yargs object declared in `nx-commands.ts`, // It is exposed and bootstrapped here to provide CLI features. const w = require('@nrwl/workspace'); diff --git a/packages/create-nx-workspace/bin/create-nx-workspace.ts b/packages/create-nx-workspace/bin/create-nx-workspace.ts index c7b9f748b5..04f4f0baaa 100644 --- a/packages/create-nx-workspace/bin/create-nx-workspace.ts +++ b/packages/create-nx-workspace/bin/create-nx-workspace.ts @@ -36,6 +36,10 @@ const presetOptions = [ value: 'react-express', name: 'react-express [a workspace with a full stack application (React + Express)]' + }, + { + value: 'next', + name: 'next.js [a workspace with a single Next.js application]' } ]; @@ -234,7 +238,8 @@ function determineCli(preset: string, parsedArgs: any) { } else if ( preset === 'web-components' || preset === 'react' || - preset === 'react-express' + preset === 'react-express' || + preset === 'next' ) { return Promise.resolve(nx); } else { @@ -406,7 +411,8 @@ function showCliWarning(preset: string, parsedArgs: any) { } else if ( preset === 'web-components' || preset === 'react' || - preset === 'react-express' + preset === 'react-express' || + preset === 'next' ) { output.addVerticalSeparator(); output.note({ @@ -420,7 +426,7 @@ function showCliWarning(preset: string, parsedArgs: any) { } function pointToTutorial(preset: string) { - if (preset === 'react' || preset === 'react-express') { + if (preset === 'react' || preset === 'react-express' || preset === 'next') { output.addVerticalSeparator(); output.note({ title: `First time using Nx? Check out this interactive Nx tutorial.`, diff --git a/packages/next/builders.json b/packages/next/builders.json index 0646af11ec..ca3fba9169 100644 --- a/packages/next/builders.json +++ b/packages/next/builders.json @@ -14,7 +14,7 @@ "export": { "implementation": "./src/builders/export/export.impl", "schema": "./src/builders/export/schema.json", - "description": "Export a Next.js app" + "description": "Export a Next.js app. The exported application is located at dist/$outputPath/exported." } } } diff --git a/packages/next/src/builders/dev-server/dev-server.impl.ts b/packages/next/src/builders/dev-server/dev-server.impl.ts index 43ca0b572a..48457de49d 100644 --- a/packages/next/src/builders/dev-server/dev-server.impl.ts +++ b/packages/next/src/builders/dev-server/dev-server.impl.ts @@ -64,7 +64,17 @@ function run( } as any, options.port ).then(app => app.prepare()) - ).pipe(switchMap(e => new Observable(obs => {}))); + ).pipe( + switchMap( + e => + new Observable(obs => { + obs.next({ + baseUrl: `http://localhost:${options.port}`, + success: true + }); + }) + ) + ); }) ); }) diff --git a/packages/next/src/builders/export/schema.json b/packages/next/src/builders/export/schema.json index 60f385476c..71e53dae81 100644 --- a/packages/next/src/builders/export/schema.json +++ b/packages/next/src/builders/export/schema.json @@ -1,6 +1,6 @@ { "title": "Next Export", - "description": "Export a Next.js app", + "description": "Export a Next.js app. The exported application is located at dist/$outputPath/exported.", "type": "object", "properties": {}, "required": [] diff --git a/packages/schematics/package.json b/packages/schematics/package.json index ff6d5243c9..84dcc285b3 100644 --- a/packages/schematics/package.json +++ b/packages/schematics/package.json @@ -40,7 +40,7 @@ "ignore": "5.0.4", "npm-run-all": "4.1.5", "opn": "^5.3.0", - "rxjs": "6.3.3", + "rxjs": "^6.4.0", "semver": "5.4.1", "strip-json-comments": "2.0.1", "tmp": "0.0.33", diff --git a/packages/workspace/package.json b/packages/workspace/package.json index b585567a62..ca36bcff28 100644 --- a/packages/workspace/package.json +++ b/packages/workspace/package.json @@ -51,7 +51,7 @@ "ignore": "5.0.4", "npm-run-all": "4.1.5", "opn": "^5.3.0", - "rxjs": "6.3.3", + "rxjs": "^6.4.0", "semver": "5.4.1", "strip-json-comments": "2.0.1", "tmp": "0.0.33", diff --git a/packages/workspace/src/schematics/ng-new/schema.json b/packages/workspace/src/schematics/ng-new/schema.json index dfb368b254..5d85c9f37b 100644 --- a/packages/workspace/src/schematics/ng-new/schema.json +++ b/packages/workspace/src/schematics/ng-new/schema.json @@ -7,7 +7,6 @@ "name": { "description": "The name of the workspace.", "type": "string", - "format": "html-selector", "$default": { "$source": "argv", "index": 0 @@ -73,6 +72,7 @@ "web-components", "angular-nest", "react-express", + "next", "empty" ], "default": "empty", diff --git a/packages/workspace/src/schematics/preset/preset.spec.ts b/packages/workspace/src/schematics/preset/preset.spec.ts index 8a447dbd98..26a43ca97d 100644 --- a/packages/workspace/src/schematics/preset/preset.spec.ts +++ b/packages/workspace/src/schematics/preset/preset.spec.ts @@ -46,6 +46,18 @@ describe('preset', () => { ).toBe('@nrwl/web'); }); + it('should create files (preset = next)', async () => { + const tree = await runSchematic( + 'preset', + { name: 'proj', preset: 'next' }, + projectTree + ); + expect(tree.exists('/apps/proj/pages/index.tsx')).toBe(true); + expect( + JSON.parse(tree.readContent('/workspace.json')).cli.defaultCollection + ).toBe('@nrwl/next'); + }); + describe('--preset angular-nest', () => { it('should create files', async () => { const tree = await runSchematic( diff --git a/packages/workspace/src/schematics/preset/preset.ts b/packages/workspace/src/schematics/preset/preset.ts index 41c13f075a..7bb2efb66c 100644 --- a/packages/workspace/src/schematics/preset/preset.ts +++ b/packages/workspace/src/schematics/preset/preset.ts @@ -53,13 +53,26 @@ function createPreset(options: Schema): Rule { { name: options.name, style: options.style, - babel: true, linter }, { interactive: false } ), setDefaultCollection('@nrwl/react') ]); + } else if (options.preset === 'next') { + return chain([ + externalSchematic( + '@nrwl/next', + 'application', + { + name: options.name, + style: options.style, + linter + }, + { interactive: false } + ), + setDefaultCollection('@nrwl/next') + ]); } else if (options.preset === 'web-components') { return chain([ externalSchematic( @@ -103,7 +116,6 @@ function createPreset(options: Schema): Rule { { name: options.name, style: options.style, - babel: true, linter }, { interactive: false } diff --git a/packages/workspace/src/schematics/preset/schema.d.ts b/packages/workspace/src/schematics/preset/schema.d.ts index 8a04fd040e..232343f89b 100644 --- a/packages/workspace/src/schematics/preset/schema.d.ts +++ b/packages/workspace/src/schematics/preset/schema.d.ts @@ -7,6 +7,7 @@ export interface Schema { | 'empty' | 'angular' | 'react' + | 'next' | 'web-components' | 'angular-nest' | 'react-express'; diff --git a/packages/workspace/src/schematics/shared-new/shared-new.ts b/packages/workspace/src/schematics/shared-new/shared-new.ts index 904c2b228a..d0527b7353 100644 --- a/packages/workspace/src/schematics/shared-new/shared-new.ts +++ b/packages/workspace/src/schematics/shared-new/shared-new.ts @@ -41,7 +41,8 @@ export interface Schema { | 'react' | 'web-components' | 'angular-nest' - | 'react-express'; + | 'react-express' + | 'next'; commit?: { name: string; email: string; message?: string }; } @@ -164,6 +165,14 @@ function addDependencies(options: Schema) { }, false ); + } else if (options.preset === 'next') { + return addDepsToPackageJson( + {}, + { + '@nrwl/next': nxVersion + }, + false + ); } else { return noop(); } @@ -227,6 +236,9 @@ function setDefaultLinter(linter: string) { application: { linter }, library: { linter } }; + json.schematics['@nrwl/next'] = { + application: { linter } + }; json.schematics['@nrwl/web'] = { application: { linter } }; json.schematics['@nrwl/node'] = { application: { linter } }; json.schematics['@nrwl/nest'] = { application: { linter } }; diff --git a/packages/workspace/src/schematics/tao-new/schema.json b/packages/workspace/src/schematics/tao-new/schema.json index 39332787ee..265e4348bf 100644 --- a/packages/workspace/src/schematics/tao-new/schema.json +++ b/packages/workspace/src/schematics/tao-new/schema.json @@ -7,7 +7,6 @@ "name": { "description": "The name of the workspace.", "type": "string", - "format": "html-selector", "$default": { "$source": "argv", "index": 0 @@ -73,6 +72,7 @@ "web-components", "angular-nest", "react-express", + "next", "empty" ], "default": "empty", diff --git a/packages/workspace/src/schematics/workspace/schema.json b/packages/workspace/src/schematics/workspace/schema.json index 4e439c8763..3b368e6750 100644 --- a/packages/workspace/src/schematics/workspace/schema.json +++ b/packages/workspace/src/schematics/workspace/schema.json @@ -7,7 +7,6 @@ "name": { "description": "The name of the workspace.", "type": "string", - "format": "html-selector", "$default": { "$source": "argv", "index": 0