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:

#yarn
yarn add -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.

1. Create a file proxy.conf.json in your project's <project>/src/ folder.

2. Add the following content to the new proxy file:

   {
     "/api": {
       "target": "http://jsonplaceholder.typicode.com"
     }
   }

3. In the CLI configuration file, <project>/project.json or <root>/workspace.json, add the proxyConfig option to the serve target:

   ...
   "targets": {
     "serve": {
       "executor": "@nxext/vite:build",
       ...
       "options": {
         "outputPath": "dist/apps/t",
         "proxyConfig": "apps/my-react/src/proxy.conf.json",
         ....
       },
   ...

4. 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
  }
}

Rewrite the URL path

Set the proxy configuration file to proxy.conf.js (instead of proxy.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/, '')
  },
}