Appearance
Introduction to Nxext Vite
@nxext/vite is a nx plugin to bring Solid and Svelte to Nx.
We at Nxext believe the key to productivity is faster builds. Nrwl NX has done an amazing job with the enterprise-level monorepo. However, the crocks are still tied in Angular and as a result Webpack. So we've turned to Vite a build system that's bother quicker and smaller bundles.
DANGER
The @nxext/vite package will be deprecated soon in favor of the new œnrwl/vite package
Adding Vite builds
Adding the React plugin to a workspace can be done with the following:
bash
#yarn
yarn add -D @nxext/vite
#yarn
yarn add -D @nxext/vite
bash
#npm
npm install -D @nxext/vite
#npm
npm install -D @nxext/vite
Proxying to a backend server
Use the proxying support in the Vite createServer
development server to divert certain URLs to a backend server, by passing a file to the --proxy-config
build option. For example, to divert all calls for http://localhost:4200/api
to a server running on http://localhost:3000/api
, take the following steps.
Create a file
proxy.conf.json
in your project's<project>/src/
folder.Add the following content to the new proxy file:
{ "/api": { "target": "http://jsonplaceholder.typicode.com" } }
{ "/api": { "target": "http://jsonplaceholder.typicode.com" } }
In the CLI configuration file,
<project>/project.json
or<root>/workspace.json
, add theproxyConfig
option to theserve
target:... "targets": { "serve": { "executor": "@nxext/vite:build", ... "options": { "outputPath": "dist/apps/t", "proxyConfig": "apps/my-react/src/proxy.conf.json", .... }, ...
... "targets": { "serve": { "executor": "@nxext/vite:build", ... "options": { "outputPath": "dist/apps/t", "proxyConfig": "apps/my-react/src/proxy.conf.json", .... }, ...
To run the development server with this proxy configuration, call
nx serve
.
Edit the proxy configuration file to add configuration options; following are some examples. For a description of all options, see Vite CreateServer documentation.
Note that if you edit the proxy configuration file, you must relaunch the nx serve
process to make your changes effective.
If you need to access a backend that is not on localhost
, set the changeOrigin
option as well. For example:
{
"/api": {
"target": "http://npmjs.org",
"changeOrigin": true
}
}
{
"/api": {
"target": "http://npmjs.org",
"changeOrigin": true
}
}
Rewrite the URL path
Set the proxy configuration file to
proxy.conf.js
(instead ofproxy.conf.json
), and specify configuration files as in the following example.
The rewrite
proxy configuration option lets you rewrite the URL path at run time. For example, specify the following rewrite
value to the proxy configuration to remove "api" from the end of a path.
export default {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
export default {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}