DEV Community

loading...

Vite dev server with "netlify dev" support

web2033 profile image Eugene Kopich Originally published at github.com ・1 min read

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
Enter fullscreen mode Exit fullscreen mode
// 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/, ''),
      },
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

Then run first two commands:

  "scripts": {
    "dev": "vite",
    "netlify": "netlify dev",
    "build": "vite build"
  },
Enter fullscreen mode Exit fullscreen mode

Starter template - https://github.com/web2033/vite-vue3-tailwind-starter

Discussion (2)

pic
Editor guide
Collapse
entioentio profile image
entio

Hi Eugene, I'm struggling with setting up vite + netlify, I tried this snippet, and it doesn't seem to work (or maybe I just misunderstand it big times). Would you care sharing a link to repo with a working example of this?

Collapse
web2033 profile image
Eugene Kopich Author

You should then create a function, like netlify/functions/hello.js, and call it from your .vue component like fetch('/api/hello) in an appropriate place.