Using a different host for the dev server

[wout]

I've just upgraded to version 3.0 and noticed the devServer option was removed. We're a custom host name for the dev server, and I managed to make it work by updating the VITE_SERVER variable in .dev, but it's overwritten every time vite is started.

In the vite-plugin-kirby readme I read the following:

Static Assets In order to get static assets to work with kirby-vite, this plugin sets Vite's server origin.

But that's not the case with us. Both the server.hmr and server.origin options are configured, but ignored.

[arnoson]

When using:

server: {
  host: 'my-host.test',
  port: 1234
},

in vite config, the .dev file uses the correct path:

VITE_SERVER=http://my-host.test:1234

What does your setup look like exactly?

[wout]

Here's our setup:

import kirby from 'vite-plugin-kirby'
import liveReload from 'vite-plugin-live-reload'
import { resolve } from 'path'
import fs from 'fs'
import vue from '@vitejs/plugin-vue'
import { defineConfig, loadEnv } from 'vite'

const root = 'frontend'
const templateDir = resolve(__dirname, `${root}/templates`)
const templates = fs
  .readdirSync(templateDir)
  .filter(file => !(/^\./).test(file))
  .filter(file => fs.statSync(`${templateDir}/${file}`).isDirectory())

const input = Object.fromEntries([
  ...templates.map(template => [
    template,
   `${templateDir}/${template}/index.js`
  ]),
  ['shared', resolve(__dirname, `${root}/index.js`)]
])

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    root: 'frontend',
    base: mode === 'development' ? '/' : '/dist/',

    resolve: {
      alias: [{ find: '@', replacement: resolve(__dirname, 'frontend') }]
    },

    server: {
      // Only important if you use a non-localhost php server, like laravel valet:
      cors: true,
      hmr: { host: `vite-${env.NGROK_SUBDOMAIN}.eu.ngrok.io` },
      origin: `https://vite-${env.NGROK_SUBDOMAIN}.eu.ngrok.io`,
      port: 3000,
      // strictPort: true
    },

    build: {
      outDir: resolve(process.cwd(), 'public/dist'),
      emptyOutDir: true,
      manifest: true,
      rollupOptions: { input }
    },

    plugins: [
      kirby(),
      liveReload([
        '../content/**/*',
        '../site/**/*.(php|yml)'
      ]),
      vue()
    ]
  }
})

[arnoson]

Thanks! And just setting the host is not working?

server: {
  host: `vite-${env.NGROK_SUBDOMAIN}.eu.ngrok.io`,
  port: 3000,
  // And probably:
  https: true
}

Right now the plugin is setting the server origin based on server.host, server.port and server.https automatically (and thereby overwriting your server.origin).

[wout]

Just tried that, but it doesn't work because Vite is trying to bind the server to Ngrok's IP address:

error when starting dev server:
Error: listen EADDRNOTAVAIL: address not available 18.158.249.75:3000
    at Http2SecureServer.setupListenHandle [as _listen2] (node:net:1446:21)
    at listenInCluster (node:net:1511:12)
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:1660:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:111:8)

The host of the local server and the origin's host are two different things in our case.

[wout]

I suppose the plugin should check if origin is defined and use that in case it is. Otherwise, fall back on how it works right now.

[arnoson]

Yes your right, will release a new version, thanks for pointing this out!

[wout]

That's great, thanks! :)

[arnoson]

Just released vite-plugin-kirby@0.1.2, feel free to close this issue if it works

[wout]

I've installed the update, but it's still writing VITE_SERVER=http://localhost:3000 to .dev.

From package.lock:

    "node_modules/vite-plugin-kirby": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/vite-plugin-kirby/-/vite-plugin-kirby-0.1.2.tgz",
      "integrity": "sha512-2IepeBrpabJcwpJ7Jkcd2ZThtOtB9cY7g52zDWzZJdr3HeOkajusOMfdvpOlndrxtIAWJQrjsA8cmTFX+hZ7Qw==",
      "dev": true,
      "dependencies": {
        "vite-plugin-live-reload": "^3.0.1"
      }
    },

[arnoson]

Okay sorry, then I didn't get it, released version 0.1.3 :)

[wout]

Just tested and it works now. Thanks again for the quick intervention. :)