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 #
3.2 KiB
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 when communicating with the backend.
Webpack Dev-Server
Webpack's dev-server has built-in support for proxies.
For example, if you want to proxy all requests to /api to http://localhost:3000, then you would use this configuration:
// ...
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.
// ...
module.exports = {
//...
devServer: {
proxy: [
{
context: ['/api'],
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
],
},
};
Vite Server
Vite's server has built-in support for proxies.
For example, if you want to proxy all requests to /api to http://localhost:3000, then you would use this configuration:
// ...
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.
// ...
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 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.
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.
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}