⚙️ Laravel/Vite Remote Development Setup
This guide provides the necessary steps to configure your remote Nginx server and your Laravel/Vite application to enable Hot Module Replacement (HMR) for a seamless remote development experience over HTTPS.
1. Configure Vite for Remote HMR
You must tell Vite to use your public domain and the secure WebSocket protocol (wss) for HMR, and to listen on all interfaces.
Edit your project’s vite.config.js file:
JavaScript
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
server: {
// 1. Listen on all interfaces so the outside world can connect
host: '0.0.0.0',
port: 5173,
// 2. CRUCIAL: Tell the browser the public address for HMR
hmr: {
// Replace with your actual remote domain (e.g., saladeformacao.pt)
host: 'yourdomain.com', //neste caso saladeformacao.pt
// Use WSS because your Nginx is serving over HTTPS
protocol: 'wss',
},
}
});
2. Start Vite Dev Server and Clean Up
On your remote server, run these commands via SSH:
Remove the development marker file (if it exists). This forces Laravel to use the new HMR configuration when it creates the file again.
Bash
rm -f public/hot
Start the development server. Keep this terminal window open while you are developing.
Bash
npm run dev
3. Configure Nginx Reverse Proxy
Nginx must be configured to act as a reverse proxy, redirecting all requests for Vite assets and WebSockets (HMR) from the public port 443 to the internal Vite server on port 5173.
Add the following location block inside your Nginx server block that listens on 443 ssl:
Nginx
server {
listen 443 ssl;
server_name yourdomain.com;
# ... other SSL/root configuration ...
# ----------------------------------------------------
# NGINX PROXY FOR VITE DEVELOPMENT ASSETS AND HMR (PORT 5173)
# ----------------------------------------------------
location ~ ^/(resources/|@vite/|node_modules/) {
# The internal address where Vite is running
proxy_pass http://localhost:5173;
# Standard headers
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
# **CRITICAL: WebSocket headers for HMR**
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# ... Your existing PHP/Laravel root location ...
location / {
try_files $uri $uri/ /index.php?$query_string;
}
}
Apply Nginx Changes
Test and reload the Nginx configuration:
Bash
sudo nginx -t
sudo systemctl reload nginx
4. Firewall Check (Important)
Ensure your server’s firewall (e.g., UFW) or cloud security settings (e.g., AWS Security Groups) allows incoming connections on port 5173. If this port is closed, the browser cannot connect to the Vite server.
Bash
# Example for UFW to allow access from any IP
sudo ufw allow 5173
