How to live-reload your Laravel Application.

So, this is going to be as straightforward as possible.

Little did I know there was a live-reload feature support in Laravel until this moment. My inquiry (just as probably yours) led me to "googling" "live-reload laravel on browser". Alas, I was led to this amazing plugin: "LiveReload" — a Laravel Mix plugin that allows for live-reloading your Laravel application using Webpack.

Enough of the background! Let's dive straight in.

In your application directory's terminal, run the code:

npm install webpack-livereload-plugin@1 --save-dev

Then next, add the code snippet below to your webpack.mix.js file:

var LiveReloadPlugin = require('webpack-livereload-plugin');
...
//Ensure this is added at after your mix.js() code lines.
mix.webpackConfig({
    plugins: [new LiveReloadPlugin()]
});

Now, run npx mix watch afresh in your terminal. Now you're good!

To see your changes live as you code, you'd lastly need to install the LiveReload chrome extension.

Hey!, I'm experiencing a "TypeError: compiler.plugin is not a function
at LiveReloadPlugin.apply" error!!!

Don't worry, I gotcha! I experienced the same. For weired reasons, the LiveReload extension was greyed out, and my npm kept throwing that error on the terminal.

I learned it was an issue with Webpack 5, as it does not support the plugin.

So, here's an easy way out:

Install the plugin, @kooneko/livereload-webpack-plugin as below:

npm install --save-dev @kooneko/livereload-webpack-plugin

Then head to your webpack.mix.js file and add the following code snippets:

// webpack.config.js

var LiveReloadWebpackPlugin = require('@kooneko/livereload-webpack-plugin');
...
//Ensure this is added at after your mix.js() code lines.
module.exports = {
  plugins: [
    new LiveReloadWebpackPlugin(options)
  ]
}

As above, add the snippet below to your app.blade.php file:

@env('local')
        <script src="http://localhost:35729/livereload.js"></script>
@endenv

This will listen to all changes in your codebase.

Now, install the Live Reload Chrome extension on your browser. Once installed, click on the extension icon. You'll see a view as below:

Live Reload extension, before configuring rule.

Now, click on "Create a new reload rule" and configure it as in the screenshot below:

Save and open up your Laravel App.

Run npm run watch.

The extension would keep listening to changes in the livereload.js file and automatically reload all changes without you navigating to the browser.

Let me know if this worked perfectly for you. :D