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,
            }),
        ],
    }
});

hi man, i love this, but if I try on my box i have:

failed to load config from /var/www/xxxxxx/private/chirper/vite.config.js
error when starting dev server:
Error: Dynamic require of "fs" is not supported
    at file:///var/www/xxxxxx/private/chirper/vite.config.js.timestamp-1693254874011-a08d1ac022e41.mjs:6:9
    at file:///var/www/xxxxxx/private/chirper/vite.config.js.timestamp-1693254874011-a08d1ac022e41.mjs:13:10
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

do you have any clue?
i't's amazing that one developer must struggle with something like this, just to be able to develop on a virtualmachine (remote or on virtualbox as in my case). damn i want my windows 11 only for the ide, not for the developing stuff

ok i have managed to solve on my box. Basically i modify these:

- const fs = require('fs');
- const dotenv = require('dotenv');
+ import fs from 'fs';
+ import dotenv from 'dotenv';

and then installed npm install dotenv that was missing.

Thanks for commenting with that. Sorry the instructions aren’t great, I’m not a node/js developer by trade so a lot of this is new to me!

im guessing mixing the import and require isn’t the best idea 🤔

no worries, your solution was great. i have updated with some fix (that at least worked for me) because i suppose that the same problem will be experienced by any developer that not use localhost nor dockerized stuff.
have a nice day

Thanks for the feedback @7bar - I've updated it with

import fs from 'fs';
import dotenv from 'dotenv';

This works fine for me now on new installed with npm install :)

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!