docs(node): update recipe on setting up proxies (#27517)

This PR expands the recipe for [Set Up App
Proxies](https://nx.dev/recipes/node/application-proxies). There is no
way for us to add proxy config automatically since `proxy.json` is
specific to our executor, and users should use the underlying tools'
proxy support instead.

Also adds an info for users using `--frontendProject` option in
crystalized workspaces.

Note: The proxy feature from Webpack and Vite allow more advanced use
cases, so it's preferred to the old `proxy.json` support anyway.

Preview:
https://nx-dev-git-docs-node-proxy-config-nrwl.vercel.app/recipes/node/application-proxies#set-up-application-proxies

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #27321, #23158

docs/shared/recipes/node/application-proxies.md

@@ -1,6 +1,93 @@
-# Set Up Application Proxies
+# Set Up App Proxies
 
-The Node, Nest and Express application generators have an option to configure other projects in the workspace to proxy API requests. This
+It is useful to set up frontend proxies to your backend app during local development. By proxying requests, you won't need to set up [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) when communicating with the backend.
+
+## Webpack Dev-Server
+
+Webpack's dev-server has built-in support for [proxies](https://webpack.js.org/configuration/dev-server/#devserverproxy).
+
+For example, if you want to proxy all requests to `/api` to `http://localhost:3000`, then you would use this configuration:
+
+```js {% fileName="webpack.config.js" %}
+// ...
+module.exports = {
+  //...
+  devServer: {
+    proxy: [
+      {
+        context: ['/api'],
+        target: 'http://localhost:3000',
+      },
+    ],
+  },
+};
+```
+
+Say that your frontend app is at port `4200`, then requests to `http://localhost:4200/api` will proxy to the backend app at port `3000`.
+
+If you don't want `/api` to be passed along, then use `pathRewrite`.
+
+```js {% fileName="webpack.config.js" %}
+// ...
+module.exports = {
+  //...
+  devServer: {
+    proxy: [
+      {
+        context: ['/api'],
+        target: 'http://localhost:3000',
+        pathRewrite: { '^/api': '' },
+      },
+    ],
+  },
+};
+```
+
+## Vite Server
+
+Vite's server has built-in support for [proxies](https://vitejs.dev/config/server-options#server-proxy).
+
+For example, if you want to proxy all requests to `/api` to `http://localhost:3000`, then you would use this configuration:
+
+```js {% fileName="vite.config.ts" %}
+// ...
+export default defineConfig({
+  // ...
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+    },
+  },
+});
+```
+
+Say that your frontend app is at port `4200`, then requests to `http://localhost:4200/api` will proxy to the backend app at port `3000`.
+
+If you don't want `/api` to be passed along, then use `rewrite`.
+
+```js {% fileName="vite.config.ts" %}
+// ...
+export default defineConfig({
+  // ...
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+});
+```
+
+## Automatically Configure Frontend Executors
+
+{% callout type="warning" title="Not recommended for new projects" %}
+We recommend configuring proxies using support from existing tooling. Webpack and Vite both come with proxy support out of the box, as do most modern tools. Using `--frontendProject` is meant for Nx prior to version 18.
+{% /callout %}
+
+Prior to Nx version 18, projects use [executors](/concepts/executors-and-configurations) to run tasks. If your frontend project is
+using executors, then the Node, Nest and Express app generators have an option to configure proxy API requests. This
 can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
 
 ```shell
@@ -19,5 +106,3 @@ This command will generate and configure a `proxy.conf.json` file that will be u
   }
 }
 ```
-
-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.

packages/node/src/generators/application/application.ts

@@ -278,6 +278,10 @@ function addProxy(tree: Tree, options: NormalizedSchema) {
     }
 
     updateProjectConfiguration(tree, options.frontendProject, projectConfig);
+  } else {
+    logger.warn(
+      `Skip updating proxy for frontend project "${options.frontendProject}" since "serve" target is not found in project.json. For more information, see: https://nx.dev/recipes/node/application-proxies.`
+    );
   }
 }