Hot Module Replacement (HMR)

About

Hot Module replacement (HMR) is incredibly beneficial for modern front-end applications. While the application is running, it can exchange, add, or remove changes from your front-end without a full reload, thus allowing you to see your changes in real-time. This can save a lot of development time, and preserve the browser's state if you're in the middle of working with or testing a complex scenario.

Implementation

The implementation of HMR requires a server to be running that can notify the browser when changes need to be made, such as after you save a CSS file. This becomes a little more complicated if you're running your HMR server inside of your Workspace container. However, if you're using Vite, there's no need to worry! AppIgnition will automatically update your vite.config.js file to support running HMR inside of your container. For new Laravel applications, this is what will be added:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    // The "server" configuration is required if you're running HMR inside of your container
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Just be sure that the port Vite is running on matches the Hot Module Replacement (HMR) Port value in your Workspace settings.