diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 4cca9a7438..b96cab96c4 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1881,6 +1881,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Set Up Application Proxies", + "path": "/recipes/node/application-proxies", + "id": "application-proxies", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Deploying AWS lambda in Node.js", "path": "/recipes/node/node-aws-lambda", @@ -2322,6 +2330,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Wait for Tasks to Finish", + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "id": "wait-for-tasks", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Workspace Watching", "path": "/recipes/tips-n-tricks/workspace-watching", @@ -2974,6 +2990,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Set Up Application Proxies", + "path": "/recipes/node/application-proxies", + "id": "application-proxies", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Deploying AWS lambda in Node.js", "path": "/recipes/node/node-aws-lambda", @@ -3001,6 +3025,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Set Up Application Proxies", + "path": "/recipes/node/application-proxies", + "id": "application-proxies", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Deploying AWS lambda in Node.js", "path": "/recipes/node/node-aws-lambda", @@ -3695,6 +3727,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Wait for Tasks to Finish", + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "id": "wait-for-tasks", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Workspace Watching", "path": "/recipes/tips-n-tricks/workspace-watching", @@ -3850,6 +3890,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Wait for Tasks to Finish", + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "id": "wait-for-tasks", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Workspace Watching", "path": "/recipes/tips-n-tricks/workspace-watching", @@ -4137,6 +4185,14 @@ "id": "example-repos", "isExternal": false, "children": [ + { + "name": "Add an Express Project", + "path": "/showcase/example-repos/add-express", + "id": "add-express", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Lit Project", "path": "/showcase/example-repos/add-lit", @@ -4318,6 +4374,14 @@ "id": "example-repos", "isExternal": false, "children": [ + { + "name": "Add an Express Project", + "path": "/showcase/example-repos/add-express", + "id": "add-express", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Lit Project", "path": "/showcase/example-repos/add-lit", @@ -4457,6 +4521,14 @@ ], "disableCollapsible": false }, + { + "name": "Add an Express Project", + "path": "/showcase/example-repos/add-express", + "id": "add-express", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Add a Lit Project", "path": "/showcase/example-repos/add-lit", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 18dd915e2f..7aefcee9c1 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2345,6 +2345,16 @@ "path": "/recipes/node/node-serverless-functions-netlify", "tags": ["deployment", "node"] }, + { + "id": "application-proxies", + "name": "Set Up Application Proxies", + "description": "", + "file": "shared/recipes/node/application-proxies", + "itemList": [], + "isExternal": false, + "path": "/recipes/node/application-proxies", + "tags": ["node"] + }, { "id": "node-aws-lambda", "name": "Deploying AWS lambda in Node.js", @@ -2894,6 +2904,16 @@ "path": "/recipes/tips-n-tricks/analyze-source-files", "tags": ["explore-graph"] }, + { + "id": "wait-for-tasks", + "name": "Wait for Tasks to Finish", + "description": "", + "file": "shared/recipes/tips-n-tricks/wait-for-tasks", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "tags": [] + }, { "id": "workspace-watching", "name": "Workspace Watching", @@ -3708,6 +3728,16 @@ "path": "/recipes/node/node-serverless-functions-netlify", "tags": ["deployment", "node"] }, + { + "id": "application-proxies", + "name": "Set Up Application Proxies", + "description": "", + "file": "shared/recipes/node/application-proxies", + "itemList": [], + "isExternal": false, + "path": "/recipes/node/application-proxies", + "tags": ["node"] + }, { "id": "node-aws-lambda", "name": "Deploying AWS lambda in Node.js", @@ -3743,6 +3773,16 @@ "path": "/recipes/node/node-serverless-functions-netlify", "tags": ["deployment", "node"] }, + "/recipes/node/application-proxies": { + "id": "application-proxies", + "name": "Set Up Application Proxies", + "description": "", + "file": "shared/recipes/node/application-proxies", + "itemList": [], + "isExternal": false, + "path": "/recipes/node/application-proxies", + "tags": ["node"] + }, "/recipes/node/node-aws-lambda": { "id": "node-aws-lambda", "name": "Deploying AWS lambda in Node.js", @@ -4607,6 +4647,16 @@ "path": "/recipes/tips-n-tricks/analyze-source-files", "tags": ["explore-graph"] }, + { + "id": "wait-for-tasks", + "name": "Wait for Tasks to Finish", + "description": "", + "file": "shared/recipes/tips-n-tricks/wait-for-tasks", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "tags": [] + }, { "id": "workspace-watching", "name": "Workspace Watching", @@ -4802,6 +4852,16 @@ "path": "/recipes/tips-n-tricks/analyze-source-files", "tags": ["explore-graph"] }, + "/recipes/tips-n-tricks/wait-for-tasks": { + "id": "wait-for-tasks", + "name": "Wait for Tasks to Finish", + "description": "", + "file": "shared/recipes/tips-n-tricks/wait-for-tasks", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/wait-for-tasks", + "tags": [] + }, "/recipes/tips-n-tricks/workspace-watching": { "id": "workspace-watching", "name": "Workspace Watching", @@ -5157,6 +5217,16 @@ "description": "Examples of different ways to use Nx", "file": "", "itemList": [ + { + "id": "add-express", + "name": "Add an Express Project", + "description": "Add an Express application to your repo", + "file": "shared/recipes/add-stack/add-express", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-express", + "tags": [] + }, { "id": "add-lit", "name": "Add a Lit Project", @@ -5384,6 +5454,16 @@ "description": "Examples of different ways to use Nx", "file": "", "itemList": [ + { + "id": "add-express", + "name": "Add an Express Project", + "description": "Add an Express application to your repo", + "file": "shared/recipes/add-stack/add-express", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-express", + "tags": [] + }, { "id": "add-lit", "name": "Add a Lit Project", @@ -5559,6 +5639,16 @@ "path": "/showcase/example-repos", "tags": [] }, + "/showcase/example-repos/add-express": { + "id": "add-express", + "name": "Add an Express Project", + "description": "Add an Express application to your repo", + "file": "shared/recipes/add-stack/add-express", + "itemList": [], + "isExternal": false, + "path": "/showcase/example-repos/add-express", + "tags": [] + }, "/showcase/example-repos/add-lit": { "id": "add-lit", "name": "Add a Lit Project", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index d9739eb679..74b582b5a6 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -834,6 +834,13 @@ "name": "Add and Deploy Netlify Edge Functions with Node", "path": "/recipes/node/node-serverless-functions-netlify" }, + { + "description": "", + "file": "shared/recipes/node/application-proxies", + "id": "application-proxies", + "name": "Set Up Application Proxies", + "path": "/recipes/node/application-proxies" + }, { "description": "", "file": "shared/recipes/deployment/node-aws-lambda", diff --git a/docs/generated/packages/express/documents/overview.md b/docs/generated/packages/express/documents/overview.md index 3b46eaaa38..d4df14e988 100644 --- a/docs/generated/packages/express/documents/overview.md +++ b/docs/generated/packages/express/documents/overview.md @@ -1,90 +1,19 @@ [Express](https://expressjs.com/) is mature, minimal, and an open source web framework for making web applications and apis. -## Setting Up Express +## Create a New Workspace -To create a new workspace with Express, run the following command: +To create a new workspace with a pre-created Express app, run the following command: ```shell npx create-nx-workspace --preset=express ``` -### Adding Express to an Existing Project +## Recipes -Install the express plugin - -{% tabs %} -{%tab label="npm"%} - -```shell -npm i --save-dev @nx/express -``` - -{% /tab %} -{%tab label="yarn"%} - -```shell -yarn add --dev @nx/express -``` - -{% /tab %} -{% /tabs %} - -## Creating Applications - -Add a new application to your workspace with the following command: - -```shell -nx g @nx/express:app my-app -``` - -Serve the application by running - -```shell -nx serve my-app -``` - -This starts the application on localhost:3333/api by default. - -> Express does not come with any library generators, but you can leverage the[`@nx/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application. - -### Application Proxies - -The Express application generator has an option to configure other projects in the workspace to proxy API requests. This -can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for. - -```shell -nx g @nx/express:app --frontendProject my-react-app -``` - -## Using Express - -### Testing Projects - -You can run unit tests with: - -```shell -nx test -``` - -### Building Projects - -Express projects can be built with: - -```shell -nx build -``` - -Build artifacts will be found in the `dist` directory under `apps/` by default. Customize the build -configuration by editing `outputPath` in the [project configuration](/reference/project-configuration). - -### Waiting for Other Tasks - -You can wait for other tasks to run before serving the express app which can be handy for spinning up various services -the application depends on— for example, other apis in a microservice. - -Setting the `waitUntilTargets` option with an array of targets (format: `"project:target"`) executes those tasks -before serving the Express application. +- [Add an Express Application to Your Workspace](/showcase/examples/add-express) +- [Set Up Application Proxies](/recipes/node/application-proxies) +- [Wait For Tasks To Finish](/recipes/tips-n-tricks/wait-for-tasks) ## More Documentation diff --git a/docs/map.json b/docs/map.json index f6dcf7c876..8282ea404f 100644 --- a/docs/map.json +++ b/docs/map.json @@ -705,6 +705,12 @@ "tags": ["deployment", "node"], "file": "shared/recipes/deployment/node-serverless-functions-netlify" }, + { + "name": "Set Up Application Proxies", + "id": "application-proxies", + "tags": ["node"], + "file": "shared/recipes/node/application-proxies" + }, { "name": "Deploying AWS lambda in Node.js", "id": "node-aws-lambda", @@ -1040,6 +1046,12 @@ "tags": ["explore-graph"], "file": "shared/recipes/analyze-source-files" }, + { + "name": "Wait for Tasks to Finish", + "id": "wait-for-tasks", + "tags": [], + "file": "shared/recipes/tips-n-tricks/wait-for-tasks" + }, { "name": "Workspace Watching", "id": "workspace-watching", @@ -1187,6 +1199,12 @@ "id": "example-repos", "description": "Examples of different ways to use Nx", "itemList": [ + { + "name": "Add an Express Project", + "id": "add-express", + "description": "Add an Express application to your repo", + "file": "shared/recipes/add-stack/add-express" + }, { "name": "Add a Lit Project", "id": "add-lit", diff --git a/docs/shared/packages/express/express-plugin.md b/docs/shared/packages/express/express-plugin.md index 3b46eaaa38..d4df14e988 100644 --- a/docs/shared/packages/express/express-plugin.md +++ b/docs/shared/packages/express/express-plugin.md @@ -1,90 +1,19 @@ [Express](https://expressjs.com/) is mature, minimal, and an open source web framework for making web applications and apis. -## Setting Up Express +## Create a New Workspace -To create a new workspace with Express, run the following command: +To create a new workspace with a pre-created Express app, run the following command: ```shell npx create-nx-workspace --preset=express ``` -### Adding Express to an Existing Project +## Recipes -Install the express plugin - -{% tabs %} -{%tab label="npm"%} - -```shell -npm i --save-dev @nx/express -``` - -{% /tab %} -{%tab label="yarn"%} - -```shell -yarn add --dev @nx/express -``` - -{% /tab %} -{% /tabs %} - -## Creating Applications - -Add a new application to your workspace with the following command: - -```shell -nx g @nx/express:app my-app -``` - -Serve the application by running - -```shell -nx serve my-app -``` - -This starts the application on localhost:3333/api by default. - -> Express does not come with any library generators, but you can leverage the[`@nx/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application. - -### Application Proxies - -The Express application generator has an option to configure other projects in the workspace to proxy API requests. This -can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for. - -```shell -nx g @nx/express:app --frontendProject my-react-app -``` - -## Using Express - -### Testing Projects - -You can run unit tests with: - -```shell -nx test -``` - -### Building Projects - -Express projects can be built with: - -```shell -nx build -``` - -Build artifacts will be found in the `dist` directory under `apps/` by default. Customize the build -configuration by editing `outputPath` in the [project configuration](/reference/project-configuration). - -### Waiting for Other Tasks - -You can wait for other tasks to run before serving the express app which can be handy for spinning up various services -the application depends on— for example, other apis in a microservice. - -Setting the `waitUntilTargets` option with an array of targets (format: `"project:target"`) executes those tasks -before serving the Express application. +- [Add an Express Application to Your Workspace](/showcase/examples/add-express) +- [Set Up Application Proxies](/recipes/node/application-proxies) +- [Wait For Tasks To Finish](/recipes/tips-n-tricks/wait-for-tasks) ## More Documentation diff --git a/docs/shared/recipes/add-stack/add-express.md b/docs/shared/recipes/add-stack/add-express.md new file mode 100644 index 0000000000..ace7419933 --- /dev/null +++ b/docs/shared/recipes/add-stack/add-express.md @@ -0,0 +1,100 @@ +# Add a New Lit Project + +**Supported Features** + +Because we are using an Nx plugin for Lit, there are few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Lit-specific code generators. And we'll have to take care of updating any framework dependencies as needed. + +{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %} +{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %} +{% pill url="/core-features/remote-cache" %}✅ Share Your Cache{% /pill %} +{% pill url="/core-features/explore-graph" %}✅ Explore the Graph{% /pill %} +{% pill url="/core-features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} +{% pill url="/core-features/integrate-with-editors" %}✅ Integrate with Editors{% /pill %} +{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} +{% pill url="/core-features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %} +{% pill url="/core-features/plugin-features/use-task-executors" %}✅ Use Task Executors{% /pill %} +{% pill url="/core-features/plugin-features/use-code-generators" %}✅ Use Code Generators{% /pill %} +{% pill url="/core-features/automate-updating-dependencies" %}✅ Automate Updating Framework Dependencies{% /pill %} + +## Install the Express Plugin + +{% tabs %} +{%tab label="npm"%} + +```shell +npm i --save-dev @nx/express +``` + +{% /tab %} +{%tab label="yarn"%} + +```shell +yarn add --dev @nx/express +``` + +{% /tab %} +{% /tabs %} + +## Create an Application + +Use the `app` generator to create a new Express app. + +```shell +nx g @nx/express:app my-express-api +``` + +Serve the API by running + +```shell +nx serve my-express-api +``` + +This starts the application on localhost:3333/api by default. + +## Create a Library + +The `@nx/express` plugin does not have a `library` generator, but we can use the `library` generator from the `@nx/js` plugin. To create a new library, install the `@nx/js` package and run: + +```shell +nx g @nx/js:lib my-lib +``` + +Once the library is created, update the following files. + +```typescript {% fileName="libs/my-lib/src/lib/my-lib.ts" %} +export function someFunction(): string { + return 'some function'; +} +``` + +```typescript {% fileName="apps/my-express-app/src/main.ts" %} +/** + * This is not a production server yet! + * This is only a minimal backend to get started. + */ + +import express from 'express'; +import * as path from 'path'; + +const app = express(); + +app.use('/assets', express.static(path.join(__dirname, 'assets'))); + +app.get('/api', (req, res) => { + res.send({ message: 'Welcome to my-express-app!' }); +}); + +const port = process.env.PORT || 3333; +const server = app.listen(port, () => { + console.log(`Listening at http://localhost:${port}/api`); +}); +server.on('error', console.error); +``` + +Now when you serve your API, you'll see the content from the library being displayed. + +## More Documentation + +- [@nx/express](/packages/express) +- [@nx/js](/packages/js) +- [Express](https://expressjs.com/) diff --git a/docs/shared/recipes/node/application-proxies.md b/docs/shared/recipes/node/application-proxies.md new file mode 100644 index 0000000000..dbc81977ad --- /dev/null +++ b/docs/shared/recipes/node/application-proxies.md @@ -0,0 +1,23 @@ +# Set Up Application Proxies + +The Node, Nest and Express application generators have an option to configure other projects in the workspace to proxy API requests. This +can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for. + +```shell +nx g @nx/node:app --frontendProject my-react-app +nx g @nx/nest:app --frontendProject my-react-app +nx g @nx/express:app --frontendProject my-react-app +``` + +This command will generate and configure a `proxy.conf.json` file that will be used by the frontend project's `serve` target to redirect calls to `/api` to instead go to `http://localhost:3000/api`. + +```json {% fileName="/apps/my-react-app/proxy.conf.json" %} +{ + "/api": { + "target": "http://localhost:3000", + "secure": false + } +} +``` + +For more information on the proxy config file format, see the [Webpack](https://webpack.js.org/configuration/dev-server/#devserverproxy) or [Vite](https://vitejs.dev/config/server-options.html#server-proxy) docs. diff --git a/docs/shared/recipes/tips-n-tricks/wait-for-tasks.md b/docs/shared/recipes/tips-n-tricks/wait-for-tasks.md new file mode 100644 index 0000000000..2c6bf2afda --- /dev/null +++ b/docs/shared/recipes/tips-n-tricks/wait-for-tasks.md @@ -0,0 +1,47 @@ +# Wait for Tasks to Finish + +If you want to ensure that a set up task has been run before you run a particular task, you want to use the [`dependsOn` property](/reference/project-configuration#dependson). + +For instance, if you have a React app called `store` and a database project called `db`, you may want to run `nx clean db` before you run `nx e2e store`. + +To set that up, you would edit the `store` app's `project.json` file: + +{% tabs %} +{% tab label="Version 16+" %} + +```json {% fileName="/apps/store/project.json" %} +{ + "targets": { + "e2e": { + "dependsOn": [ + { + "projects": ["db"], + "target": "clean" + } + ] + } + } +} +``` + +{% /tab %} +{% tab label="Version < 16" %} + +```jsonc {% fileName="/apps/store/project.json" %} +{ + "targets": { + "clean-db": { + // Workaround task + "command": "nx clean db" + }, + "e2e": { + "dependsOn": ["clean-db"] // Run clean-db on this project + } + } +} +``` + +{% /tab %} +{% /tabs %} + +This will make it so that all you need to do is run `nx e2e store` and Nx will make sure that `nx clean db` is run first. diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index f5cc13245d..05bb709c46 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -122,6 +122,7 @@ - [Node](/recipes/node) - [Deploying a Node App to Fly.io](/recipes/node/node-server-fly-io) - [Add and Deploy Netlify Edge Functions with Node](/recipes/node/node-serverless-functions-netlify) + - [Set Up Application Proxies](/recipes/node/application-proxies) - [Deploying AWS lambda in Node.js](/recipes/node/node-aws-lambda) - [Storybook](/recipes/storybook) - [Set up Storybook for React Projects](/recipes/storybook/overview-react) @@ -176,6 +177,7 @@ - [Reduce Repetitive Configuration](/recipes/tips-n-tricks/reduce-repetitive-configuration) - [Run Root-Level NPM Scripts with Nx](/recipes/tips-n-tricks/root-level-scripts) - [Disable Graph Links Created from Analyzing Source Files](/recipes/tips-n-tricks/analyze-source-files) + - [Wait for Tasks to Finish](/recipes/tips-n-tricks/wait-for-tasks) - [Workspace Watching](/recipes/tips-n-tricks/workspace-watching) - [Convert from a Standalone Repository to an Integrated Repository](/recipes/tips-n-tricks/standalone-to-integrated) - [Use JavaScript instead TypeScript](/recipes/tips-n-tricks/js-and-ts) @@ -200,6 +202,7 @@ - [Rescope Packages from @nrwl to @nx](/recipes/other/rescope) - [Showcase](/showcase) - [Example Repos](/showcase/example-repos) + - [Add an Express Project](/showcase/example-repos/add-express) - [Add a Lit Project](/showcase/example-repos/add-lit) - [Add a Solid Project](/showcase/example-repos/add-solid) - [Add a Qwik Project](/showcase/example-repos/add-qwik)