search

Pochwar / laravel-vue-spa

82 stars 31 forks source link

browsersync not working #8

Open jcerdan opened 5 years ago

jcerdan commented 5 years ago

Hi,

I have followed your article at medium.com and installed from this github repo. everything works ok but I encounter an error I can't solve and this, with every other Laravel Vue SPA I have tried (included yours).

I have set in .env: APP_URL=http://localhost:8000 MIX_APP_URL="${APP_URL}"

in file webpack.mix.js I have set: require('dotenv').config(); ... mix.browserSync({ proxy: process.env.APP_URL });

Then I run

php artisan serve npm run dev

I go to localhost:8000 and everything works fine. No problem.

but if I run php artisan serve npm run watch

If I go to localhost:3000 (browserSync port), I can't login and API calls in the browsaer console are those:

OPTIONS http://localhost:8000/api/auth/login?email=admin@test.com&password=admin [HTTP/1.0 200 OK 46ms]

POST http://localhost:8000/api/auth/login?email=admin@test.com&password=admin [HTTP/1.1 200 OK 152ms]

OPTIONS http://localhost:8000/api/auth/user [HTTP/1.0 200 OK 31ms]

GET http://localhost:8000/api/auth/user

The responses are success on login and in the last OPTIONS and GET the token is not sent and so it's a failure.

This results in not having hot reload in the browser and it's a pity. Has anyone found a solution to that problem?

Pochwar commented 5 years ago

Hi!

I never tried to setup and use hot reloading in this project but after a quick look at the documentation, I managed to make it work :)

Link to the doc => https://laravel-mix.com/docs/4.1/hot-module-replacement

First thing, you have to use npm run hot instead of npm run watch.

It will build the assets and serve them to http://localhost:8080

Then in your main template, (welcome.blade.php in my project) change the includes of the scripts and css from asset to mix. Example: <script src="{{ asset('js/app.js') }}" defer></script> (before) <script src="{{ mix('js/app.js') }}" defer></script> (after)

This change is just for development, you have to set it back to asset for production.

For me, there is nothing more to do and the hot reloading works fine :)

Tell me if it works for you!