Auto Reload Browser When File Changes Occur in Laravel

Hello everyone, back at porkaone. On this occasion we will learn how to auto refresh or auto reload the browser when changes occur in Laravel. Curious?, let's follow in full below.

For javascript programmers, maybe auto reload when a file changes may be familiar. But what about in laravel or in blade files?. The answer is yes it can, just like javascript, php or blade files in laravel can also auto reload when changes to a file occur. Laravel uses laravel mix to support it.

The auto reload function is quite helpful for programmers, because the browser automatically responds to changes so we don't need to reload the browser page. If you apply this, of course this will make the job easier. The method is quite easy, follow the steps below.

How to Make Auto Reload When File Changes in Laravel

1. Prepare a laravel project with a laravel version that already supports laravel mix. Laravel mix is ​​available on version 5.4+. But I recommend using laravel version 7+ to avoid errors.

2. Make sure you have installed node js. Click the following link to download node.js. https://nodejs.org/en/

3. Run the command below to download some required dependencies.

npm install

4. Open the webpack.mix.js file and add the script below.

mix.browserSync('127.0.0.1:8000');

5. Run the commands below to download the browser-sync and browser-sync-webpack-plugin dependencies.

npm run watch

6. Run the command below again, this time the command below will run the virtual server.

npm run watch

After the above command is executed, then a few moments later you will automatically be directed to the browser with the url http://localhost:3000. Ok, now your auto reload is active. Try to make changes to the blade file and see the results.

Auto Reload Activated

How to enable Auto Save Visual Studio Code

To make your coding even faster, you have to enable auto save in visual studio code. So when you edit a file, the file is automatically saved and the browser is automatically reloaded. You will feel happier, more powerful, faster, and more effective. Follow the image below to enable auto save on vs code.

How to Activate Auto Save

 

Ok, that's our tutorial this time about how to make auto reload when a file changes in Laravel. Hope it helps, if you have any questions, please write in the comments column. That is all and thank you.