Laravel project auto refresh after changes

Question

Does anyone know if there is a way to run the code changes in a Laravel project without refreshing the page every time.

I know that to see the changes I need to

php artisan serve

but I do it every time and it is kind of frustrating.

Thank you anyways.

Answer 1

You can achieve this with Laravel Mix.

According to this part of the documentation, you need to edit your webpack.mix.js file, and add this to the end:

mix.browserSync('127.0.0.1:8000');

It needs to match to the output of the php artisan serve command, where you found a line something like this:

Laravel development server started: <http://127.0.0.1:8000>

After this, you have to run the php artisan serve, and the npm run watch command simultaneously. You must leave to run both commands while you edit your files.

Note: The first time you run the npm run watch, it installs additional components. But the command output is quite clear on that. If everything is in order, Laravel Mix automatically opens your browser with http://localhost:3000, or something like this.

Answer 2

add in webpack.max.js file in laravel

mix.browserSync('127.0.0.1:8000');

then run this command

> npm install browser-sync browser-sync-webpack-plugin@2.0.1 --save-dev --production=false

after this run npm run watch

> Browsersync automatic run your port 3000

Answer 3

To achieve this you can use Laravel Mix

• Ensure that Node.js and NPM are installed:

run node -v and npm -v.

• Install Laravel Mix

npm install.

• Install browser-sync and browser-sync-webpack-plugin

npm install browser-sync browser-sync-webpack-plugin --save-dev --production=false

• Open webpack.mix.js and add this line

mix.browserSync('127.0.0.1:8000');.

• Run Project with these two commands: The npm run watch command will continue running in your terminal and watch all relevant CSS and JavaScript files for changes. Webpack will automatically recompile your assets when it detects a change

php artisan serve. and then npm run watch.