Change Vite proxy location automatically in dev vs prod builds?

Question

In my single page application I'm developing I'm using Vite and in my vite.config.ts file I have the following proxy:

proxy: {
  '/v1': {
    target: 'https://127.0.0.1:8080',
    changeOrigin: true,
    secure: false
  }
}

Is there a way to change this target depending on whether it is in the production environment? Something like:

proxy: {
  '/v1': {
    target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
    changeOrigin: isDev,
    secure: !isDev
  }
}

That is, in my local environment I want to develop against my local server, such that my fetch API calls like fetch("/v1/get-posts") get forwarded to https://127.0.0.1:8080/v1/get-posts, but in my production build (which I create via vite build), they will instead be forwarded to: https://api.example.com/v1/get-posts

Can this be done, and if so, how?

Transpose

Answer 1

The dev server and its proxy config aren't bundled into the build output, so your goal does not make much sense practically. However, you technically can run the dev server in production mode via the mode flag, so perhaps that's what you meant.

In that case, you can use a conditional config, where isDev would be mode === 'development':

// vite.config.js
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
import vue from '@vitejs/plugin-vue'

const defaultConfig = {
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
            👇
    const isDev = mode === 'development'

    return {
      ...defaultConfig,
      server: {
        proxy: {
          '/v1': {
            target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
            changeOrigin: isDev,
            secure: !isDev
          }
        }
      }
    }
  } else {
    return defaultConfig
  }
})

Dapper

@JamesP Indeed, hosting the Vite server might not be recommended in some production environments. Setting up a proxy can be done in many ways, but the solution you pick will likely depend on how your app is hosted. If you don't have control of the host or proxy settings (e.g., hosting on GitHub), you can't setup your own proxy on that host. Otherwise, if you're on a custom server, you could setup just about any proxy server (e.g., nginx, express, koa, etc.) adjacent to your app. – Dapper

Answer 2

Unlike create-react-app, Vite does not provide the proxying configurations after the build, but only for development.

So, in order to support the build, you have to manually check for the environment variable to see if you're in production or development as follows:

for example, this is the baseUrl property in redux-toolkit-query, or fetch(), or even axios(), whatever you're using

// for example, this is the baseUrl property in redux-toolkit-query, or fetch(), or even axios(), whatever you're using
import.meta.env.MODE === 'development' ? `api/v1` : HOST + '/v1'

Assuming this is your vite.config.js file (as an example, it doesn't have to be exactly like mine):

process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
return defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        '/api': {
          target: process.env.VITE_mainAPI_host,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),

Glamour

Answer 3

If you use axios libriary, then instead of using server: { proxy: {} } at vite.config, you can set in main.ts the axios.defaults.baseURL = isDev ? 'DEV_URL' : 'PROD_URL'

That works for me when I had static web page in bucket and APIs in API Gateway.

Quackery