404 Cannot GET / response when using HMR

[iraklisg]

• Laravel Mix Version: 0.11.3

• Node Version: 7.9.0

• NPM Version: 4.2.0

• OS: Debian 8

Description:

Not sure if it is related to #747 but:

I have a fresh Laravel 5.4.20 install and I have a PHP DEV server running at http://127.0.0.1:9000.

My package.json file

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "devDependencies": {
    "cross-env": "^3.2.3",
    "laravel-mix": "0.*"
  }
}

My webpack.mix.js file

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

My app.js file

import Vue from 'vue';

const app = new Vue({
    el: '#app'
});

Then, I compile my assets using npm run hot which outputs that everything was successfully built and that the weback DEV server is listening at http://localhost:8080.

However, when I try to visit http://127.0.0.1:8080 in the browser I get a 404 error response

Cannot GET /

Note that when I am trying npm run watch and visit http://127.0.0.1:9000 then I get a successful 200 response

EDIT:

I also found this SO post that refers to the same issue

[KuroThing]

When HMR is enabled, a "hot" file is created in the public folder of your laravel application, that folder tells the mix() view helper that you should request your webpack files from http://127.0.0.1:8080

This means that you want to go to http://127.0.0.1:9000 like normal and it should work perfectly fine.

[iraklisg]

@KuroThing Thank you for noticing this. Having my php server listening at http://127.0.0.1:9000 I run npm run hot and then I was able to succesfully visit my app at http://127.0.0.1:9000.

However, when I subsequently try to make a change in a Vue component to see the change s automatically reflected, I had the following error ( probably related to #743 )

XMLHttpRequest cannot load http://localhost:8080/c60b38f1daf3aa3d5488.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.
[HMR] Update failed: Error: Manifest request to http://localhost:8080/c60b38f1daf3aa3d5488.hot-update.json timed out at XMLHttpRequest.request.onreadystatechange ://localhost:8080/js/app.js:38:22)

After upgrading to [email protected] HMR works again just fine