DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Devtonight
Devtonight

Posted on • Updated on • Originally published at devtonight.com

How To Fix Laravel Sail Hot Reloading (HMR) Not Working Error

Hot Module Replacement (HMR) or Hot Reloading is a technique used to refresh web pages as we make changes to the code of web pages, CSS and JavaScript which completely eliminate the manual page refreshing. The problem with Laravel Sail is, HMR does not work with its default configuration. The default Laravel Sail Docker Compose configuration only exposes the port 80 of the Laravel Docker container. So first of all, we need to expose a new port of the Laravel Docker container for the HMR to communicate with the browser. So when it detects a change in the file system, it can request a page refresh automatically using the newly exposed port.

Open the docker-compose.yml file and add port 3000.

services:
    laravel.test:
        ...
        ports:
            - '${APP_PORT:-80}:80'
            - '3000:3000'
Enter fullscreen mode Exit fullscreen mode

Then open the webpack.mix.js file and add the following code at the end.

mix.browserSync({
    proxy: 'laravel.test',
    port: 3000,
    open: false,
});
Enter fullscreen mode Exit fullscreen mode

If you have been already running Laravel Sail, stop it.

vendor/bin/sail down
Enter fullscreen mode Exit fullscreen mode

Then run it again. Now it will start the Laravel Docker container with port 3000 opened.

vendor/bin/sail up -d
Enter fullscreen mode Exit fullscreen mode

Run npm run watch with Laravel Sail.

vendor/bin/sail npm run watch
Enter fullscreen mode Exit fullscreen mode

Open the web browser and access the Laravel application with port 3000. Such as http://localhost:3000. Now change a blade view file, CSS or JavaScript file and the changes should be immediately visible without manually refreshing the browser.

If you do need to run the application in a separate port such as port 8080 instead of port 3000, use 3000:8080 in the docker-compose.yml file and port: 8080 in the webpack.mix.js file.

Feel free to visit devtonight.com for more related content.

Top comments (0)

Layoffs: It’s Okay to Not Be Okay