Raul Ramos

Laravel/Vite Remote Development Setup With NGINX

Escrito por

raulramos

em

, , , , , ,

⚙️ 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

Comentários

Deixe um comentário

Mais artigos