How to run/develop laravel + vue.js (laravue) app properly

Question

before i start, i need to say that i'm aware that this question is a beginner's one.

I've found this dashboard combination of Laravel and Vue.js that i wanted to play with, to then start developing a real web application. laravue

There's just a single question that is confusing me: while testing it on xampp with the commands "npm run watch" and "php artisan serve" i see myself obliged to npm run the project, every time i make a file change.

So what is the right way to check all the changes i make? By just refreshing the browser window.

Answer 1

npm run watch automatically builds your assets and then watch any save on the concerned files. Whenever a save happens, npm run watch rebuilds everything, but you won't be aware on your web browser except by refreshing.

PS: Sometimes npm run watch does not work well, then use npm run watch-poll instead

https://laravel.com/docs/7.x/mix#running-mix

Answer 2

1. npm run watch or npm run watch-poll will automatically rebuild your assets but don't apply to the browser without manual refresh. Meaning you have to reload browser after compiling done.

2. Hot Module Replacement(HMR - or Hot Reloading) works same as npm run watch and apply changes to browser automatically, so you don't have to reload browser to see the changes.

3. Following this document , HRM works well with the fresh installation (latest code on master) as my test.

npm run hot result:

➜  npm run hot
> laravue@0.11.0 hot [src]
> cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from [src]/public
ℹ ｢wds｣: 404s will fallback to /index.html

php artisan serve result:

➜  php artisan serve
Laravel development server started: http://127.0.0.1:8000

And browser:

Answer 3

Thank you for all the responses.

I've solved the problem by running "npm run watch" and "php artisan serve" on two separated command-line windows.

Was totally unaware of that and it's part of the learning curve. Thank you, this is now solved.