docs(core): add express recipe

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",

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",

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",

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
+- [Add an Express Application to Your Workspace](/showcase/examples/add-express)
-
+- [Set Up Application Proxies](/recipes/node/application-proxies)
-{% tabs %}
+- [Wait For Tasks To Finish](/recipes/tips-n-tricks/wait-for-tasks)
-{%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 <express-app> --frontendProject my-react-app
-```
-
-## Using Express
-
-### Testing Projects
-
-You can run unit tests with:
-
-```shell
-nx test <project-name>
-```
-
-### Building Projects
-
-Express projects can be built with:
-
-```shell
-nx build <project-name>
-```
-
-Build artifacts will be found in the `dist` directory under `apps/<project-name>` 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.
 
 ## More Documentation
 

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",

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
+- [Add an Express Application to Your Workspace](/showcase/examples/add-express)
-
+- [Set Up Application Proxies](/recipes/node/application-proxies)
-{% tabs %}
+- [Wait For Tasks To Finish](/recipes/tips-n-tricks/wait-for-tasks)
-{%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 <express-app> --frontendProject my-react-app
-```
-
-## Using Express
-
-### Testing Projects
-
-You can run unit tests with:
-
-```shell
-nx test <project-name>
-```
-
-### Building Projects
-
-Express projects can be built with:
-
-```shell
-nx build <project-name>
-```
-
-Build artifacts will be found in the `dist` directory under `apps/<project-name>` 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.
 
 ## More Documentation
 

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/)

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 <node-app> --frontendProject my-react-app
+nx g @nx/nest:app <nest-app> --frontendProject my-react-app
+nx g @nx/express:app <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.

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.

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)