Browsersync reload page, but php (laravel) part of project doesn’t update

  laravel, laravel-mix, nginx, vue.js, webpack

I have some problems with my Laravel (the backend) + Vue (the frontend) project. I create settings panel in Vue and use Axios to get API data from the backend. I run “npm run watch” to auto-reload page after changes, and it works perfectly if I change JS code. When I change the PHP code page also reload, but my Axios request to API return old data, not changed. Finally, I need to rerun my watching.
I am using Laravel-mix in my project and all the Vue files are in the /resource/js folder.
I met the Node.JS first time and doesn’t know the resolve of this issue.

Stack: WSL, Ubuntu, Nginx, Laravel, Vue

Nginx site-available conf:

server {
    listen 9090;

    fastcgi_buffering off;
    server_name ichiban.loc;
    root /mnt/c/Users/UserName/wsl/ichiban/public;

    charset utf-8;

    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; } 

    error_page 404 /index.php;

    location ~ .php$ { 
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;     
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /.ht {
        deny all;
    }
}

webpack.mix.js

mix.browserSync({
    proxy: 'ichiban.loc:9090',
    startPath: '/dashboard'
});

Source: Laravel StackOverflow

Leave a Reply