How to add extra routes to the Vite HTTP server? (serve front and back end at the same time)

[adam-nielsen]

I have a React frontend running fine in Vite using the @vitejs/plugin-react module.

However the code makes API calls, and I'd like to host the API in Vite as well, to get away from our current process where we need to launch the React web site and the API server in two separate processes.

Is there a way I can tell Vite that for a given URL path, the request should be passed to a different file in my codebase?

My API code ultimately runs on AWS Lambda, so I have already written some shim code to convert an ExpressJS request into a Lambda-compatible call (so I can run the same code locally or on Lambda) so I don't mind modifying it to make it more Vite-compatible as it's only used for local development. However I am not sure how to configure Vite to call that code when a certain URL is requested.

There are a few plugins that claim to do this but none of them quite work:

• vite-plugin-node - works fine for API code, but stops plugin-react from working (so none of the front-end files get served)
• vite-express - seems to replace Vite (not a plugin) and works for API stuff only, can't also host a React front-end
• vite-plugin-mix - looks perfect but unmaintained for years and no longer works

I don't need anything complicated, just any requests for a specific path on the exiting Vite HTTP server should get passed to a Typescript function, which lives in a different file to the React site. The React site handled by plugin-react should work the same as before.

Is this sort of set up possible in Vite?

[adam-nielsen]

I ended up looking into plugins and found a quick simple solution:

export default defineConfig({
  plugins: [
    {
      name: 'api-handler',
      configureServer(server) {
        server.middlewares.use('/test', (req, res, next) => {
          res.writeHead(200, { 'Content-Type': 'text/plain' });
          res.end('test');
        });
      },
    },
    react(),
  ],
});

This allows me to handle that one custom URL, but leave everything else to React.

I extended this to handle the Lambda stuff, like so:

const lambdaShim = (url: string, handler: Function) => ({
  name: 'lambda-shim',
  configureServer(server: ViteDevServer) {
    server.middlewares.use(url, async (req, res) => {
      // Convert the request to a Lambda event and call the handler.
      const url = new URL(`http://${process.env.HOST ?? 'localhost'}${req.originalUrl}`);
      const event = {
        version: '2.0',
        routeKey: '$default',
        rawPath: url.pathname, // e.g. '/example/'
        headers: req.headers,
        rawQueryString: url.search?.substring(1) ?? '', // e.g. 'q=test'
        body: await new Promise<string>((resolve, reject) => {
          let data = '';
          req.on('data', chunk => {
            data += chunk;
          });
          req.on('end', () => resolve(data));
          req.on('error', err => reject(err));
        }),
        isBase64Encoded: false,
      };
      const context = {} as any;
      const response = await handler(event, context);
      res.statusCode = response.statusCode;
      res.end(response.body);
    });
  },
});

async function myLambda(event: any, context: any) {
  return {
    statusCode: 200,
    body: 'Lambda response for ' + event.rawPath + ' with query ' + event.rawQueryString,
  }
}

export default defineConfig({
  plugins: [
    // Send any requests to /api to the Lambda function, as if the request came from AWS API Gateway.
    lambdaShim('/api', myLambda),
    react(),
  ],
});