8fa7065cf1
This PR updates examples in `.md` files (both docs and blog posts) to use positional args. Nx 20 changes the position arg to be either `directory` for apps/libs or `path` for artifacts (e.g. components). So before you'd do this: ``` nx g app myapp --directory=apps/myapp nx g lib mylib --directory=libs/mylib nx g lib mylib --directory=libs/nested/mylib nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles ``` Will now be simplified to ``` nx g app apps/myapp nx g lib libs/mylib nx g lib libs/nested/mylib nx g lib libs/@acme/foo # name and import path are both "@acme/foo" nx g component libs/ui/src/foo/Foo ``` For cases where `name` and `importPath` need to be changed, you can always manually specify them. ``` nx g lib libs/nested/foo # name is foo nx g lib libs/nested/foo --name=nested-foo # specify name with prefix nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name <!-- 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 #
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 apps/<node-app> --frontendProject my-react-app
|
|
nx g @nx/nest:app apps/<nest-app> --frontendProject my-react-app
|
|
nx g @nx/express:app apps/<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
|
|
}
|
|
}
|
|
```
|