21

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.

CarlosZ
  • 1,026
  • 1
  • 9
  • 16

5 Answers5

45

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.

PaulH
  • 2,918
  • 2
  • 15
  • 31
senki
  • 566
  • 7
  • 5
6

add in webpack.mix.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
Armand
  • 2,611
  • 2
  • 24
  • 39
Faisal khokher
  • 61
  • 1
  • 4
2

First make sure you install nodejs, After that install laravel-mix

npm install --save-dev laravel-mix

create webpack.mix.js file in root folder for your project and add to it

const mix =require('laravel-mix')
mix.browserSync('127.0.0.1:8000');

Open package.json file and add to script section:

  "scripts": {
        "watch": "mix watch"
    }

Run laravel project

php artisan serve

To update laravel project auto when you make changes run in another terminal:

npm run watch

Updated from Laravel 9.x

you can use vite instead of laravel-mix, you should run this command to install vite:

npm install

Without any configuration, The next line of code will include auto in master page, If you want to include in another master page like admin, you can write it to auto refresh when make changes:

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

After installing vite, run this command

npm run dev

And run

php artisan serve

For more information, view docs

Eng_Farghly
  • 1,987
  • 1
  • 23
  • 34
1

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.

Anupam Hayat Shawon
  • 123
  • 1
  • 11
1

Live Server extension can help u easy archive this.

  1. Install Live Server from VSCode market place.
  2. Install the Live Server Extension in the Chrome browser then edit like this.

*Note: On Live Server Web Chrome Extension The Actual Server Address is where

php artisan serve running, by default is

http://127.0.0.1:8000

And the Live Server Address is where your VSCode Live Server running ( mine is http://127.0.0.1:5500 )

  1. Open VSCode, press

Ctrl + Shift + P

and enter "change live" then choose like this, then choose your Workspace (your PHP file's parent directory)

*Note: whenever you change your Workspace remember to do this Step 3

  1. Done, whenever you run the php artisan serve command, remember to turn on Live Server on VSCode like this. Your browser will auto refresh after your VSCode does auto save.

Enjoy ;)

tanuEatCocoh
  • 11
  • 3