Skip to content

Instantly share code, notes, and snippets.

@legecha
Last active May 8, 2025 01:21
Show Gist options
  • Save legecha/afccb720edc799c04a0d698a4f6f7823 to your computer and use it in GitHub Desktop.
Save legecha/afccb720edc799c04a0d698a4f6f7823 to your computer and use it in GitHub Desktop.
How to make Vite work with Laravel on remove development servers
/**
* 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,
}),
],
}
});
@7bar
Copy link

7bar commented Aug 28, 2023

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

@7bar
Copy link

7bar commented Aug 29, 2023

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.

@legecha
Copy link
Author

legecha commented Aug 30, 2023

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 🤔

@7bar
Copy link

7bar commented Aug 31, 2023

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

@legecha
Copy link
Author

legecha commented Jan 31, 2024

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 :)

@4wk-
Copy link

4wk- commented Jun 13, 2024

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

@legecha
Copy link
Author

legecha commented Jun 20, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment