d8d57c862b
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
109 lines
3.2 KiB
Markdown
109 lines
3.2 KiB
Markdown
# Set Up App Proxies
|
|
|
|
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
|
|
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
|
|
}
|
|
}
|
|
```
|