Vite dev server: support netlify dev

[franciscolourenco]

Is your feature request related to a problem? Please describe.
netlify dev doesn't work with vite dev server. netlify dev starts a proxy server which redirect to vite dev server. However vite dev server replies with ok. I suspect this might be due to host mismatch, since the proxy and the server and on different ports.

Describe the solution you'd like
vite dev server and netlify dev should be friends.

Describe alternatives you've considered
Checked the vite docs for a way to relax the hostname checking

Additional context
Reproduction repository: https://github.com/franciscolourenco/netlify-dev-vite

[ghost]

I use them together like this:

# netlify.toml
[[redirects]]
force = true
from = '/api/*'
status = 200
to = '/.netlify/functions/:splat'

[[redirects]]
from = '/*'
status = 200
to = '/index.html'

[build]
command = 'npm run build'
environment = {NODE_VERSION = '14'}
publish = 'dist'

[dev]
autoLaunch = false

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888/.netlify/functions',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

Then run two commands:

  "scripts": {
    "dev": "vite",
    "netlify": "netlify dev",
    "build": "vite build"
  },

[franciscolourenco]

Thanks for the workaround! This works out of the box with vue-cli though.

[nickgraffis]

This was awesome and super helpful @web2033 . I had a strange problem after I updated netlify-cli from 3.13 to 3.28. I was getting the following error:

◈ "npm run build" exited with code 0. Shutting down Netlify Dev server

I'm not really sure why this suddenly popped up when going from 3.13 - 3.28, but it was solved with the following change to netlify.toml and scripts

[dev]
autoLaunch = false
command = "npm run dev"

[riderx]

with lastest version each time we start the server a random port is used so it's need to add functionsPort = 8885 in netlife dev config like below:

[build.environment]
  NPM_FLAGS = "--prefix=/dev/null"
  NODE_VERSION = "14"

[build]
  publish = "dist"
  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"

[[redirects]]
  force = true
  from = '/api/*'
  status = 200
  to = '/.netlify/functions/:splat'

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/manifest.webmanifest"
  [headers.values]
    Content-Type = "application/manifest+json"

[dev]
  autoLaunch = false
  functionsPort = 8885

and vite config :

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8885/.netlify/functions',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

[nicooprat]

I had to add :splat to the to part to make it work:

[[redirects]]
  force = true
  from = '/api/*'
  status = 200
  to = '/.netlify/functions/:splat'

Related: https://answers.netlify.com/t/cant-seem-to-redirect-api-endpoint-to-netlify-functions-file-endpoint/7672/2

[riderx]

@nicooprat i forgot to update my message but yes your are right it’s needed

[sapphi-red]

Closing as netlify-cli v3.16.0+ has builtin support for Vite. (netlify/cli#2083)