-
-
Save legecha/afccb720edc799c04a0d698a4f6f7823 to your computer and use it in GitHub Desktop.
/** | |
* 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, | |
}), | |
], | |
} | |
}); |
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!
hi man, i love this, but if I try on my box i have:
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