How to make Vite work with Laravel on remove development servers

vite.config.js

/**
 * This vite config allows you to run `npm run dev` in Laravel and access
 * resources on a remote development server, including with hmr, in the
 * same manner as if you were developing locally.
 *
 * All config is stored in your standard .env file and multiple users can
 * have their own instance running by specifying a unique port.
 *
 * The certificates are required - use the same ones as used on your
 * server to secure your development domains (i.e. letsencrypt).
 *
 * Add this to your .env file:
 * 
 * VITE_ASSET_HOST="your.development.url.com"
 * VITE_ASSET_PORT=5173
 * VITE_PRIVKEY_PATH="/path/to/certs/privkey.pem"
 * VITE_CERT_PATH="/path/to/certs/cert.pem"
 */
import { defineConfig, loadEnv } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'fs';

export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    return {
        server: {
            host: true,
            port: process.env.VITE_ASSET_PORT,
            strictPort: true,
            hmr: {
                host: env.VITE_ASSET_HOST,
                port: env.VITE_ASSET_PORT,
            },
            https: {
                key: fs.readFileSync(env.VITE_PRIVKEY_PATH),
                cert: fs.readFileSync(env.VITE_CERT_PATH),
            },
        },
        plugins: [
            laravel({
                input: ['resources/css/base.scss', 'resources/js/app.js'],
                refresh: true,
            }),
        ],
    }
});

Hey @legecha I was about to comment to suggest the same; would you mind editing your post in Laracast too?
https://laracasts.com/discuss/channels/vite/vite-doesnt-work-on-remote-dev-servers?page=1&replyId=897685

Also I would recommend changing the way your get your .env variables, as stated in the doc. You don't need dotenv , and you don't need Object.assign(...:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  const env = loadEnv(mode, process.cwd())
  return {
    // vite config
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

Hey @4wk-, that's great thanks! I have updated the script and also the Laracasts post :)

I checked when that part of the documentation was changed and it seems to be two years ago... I totally missed that part when I discovered that the process.env stuff wasn't available in config, but I guess it's just part of (still) being a JS/Vite newbie :)

Thanks again!