How to use a different base url

During development, I have vite doing HMR for the React client on http://localhost:5173/, and a Node backend for API calls and assets.

For the production build, Node will serve the frontend, so I want to use /whatever/endpoint. So I need a way of rewriting this when being served by Vite, so that it maps / to http://my.api.host:3000/.

I'm sure this must be a common thing to do, but I can't see how to do it. From the docs I thought this would do it:

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
    plugins: [react()],
    server: {
        origin: 'http://my.api.host:3000'
    },
    base: 'http://my.api.host:3000
})

but this:

backgroundImage: 'url(/img/backgrounds/main.jpg)'

Still tries to serve it from http://localhost:5173

To rewrite the API endpoint and serve the assets from the correct location when using Vite in production, you can use the proxy option in the Vite configuration. Here's an example of how you can configure it:
<br>
<br>

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/whatever/endpoint': {
        target: 'http://my.api.host:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/whatever\/endpoint/, ''),
      },
    },
  },
  base: 'http://my.api.host:3000/',
});

<br>
'rewrite' function is used to remove the /whatever/endpoint prefix from the request path before forwarding it to the target.