Vue + Laravel 5.4 + Mix - "Cannot Get /"

Question

I downloaded started with a Larvavel + Vue component called vuetable-2 (very nice BTW).

Firstly, php artisan serve works. Everything is fine, except that it doesn't hot deploy changes to .vue files.

I've finally got npm run hot to work, however, when go to the page I get the browser message:

Cannot Get /

Actions Taken:

• Checked my dependencies, as far as I can see, all are correct.
• Deleted node_modules and rebuit (three times now) npm install
• Created a separate test project to confirm Vue does hot reload (it
  does)

I suspect the problem is some configuration somewhere, but for the life of me, can't figure out where.

The only odd thing I've found is, the webpack.config.js says it will use port 3000, yet, the only port that seems to be working is either 8000 when using artisan, or run dev hot uses 8080 which produces the message above.

However, if I make changes to the files, I get the nice Laravel Mix toast telling the build was successful or not, but can't see them in the browser. The webpack.config.js also has the correct build path, being public/.

---

This is my package.json file:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=./webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "laravel-elixir": "^4.0.4",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.2",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.4"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "jquery": "^3.1.1",
    "accounting": "^0.4.1",
    "vue-events": "^3.0.1",
    "vue-masked-input": "^0.4.1",
    "vue": "^2.1.10",
    "vuetable-2": "^1.3.1"
  }
}

The webpack.config.js file is unchanged from the standard one installed.

Answer 1

For anyone that still looking for answers

Add this to a webpack.mix.js file

let mix = require('laravel-mix');

mix.webpackConfig({
    devServer: {
        proxy: {
            '*': 'http://localhost:8000'
        }
    }
});

Run the backend server (php artisan serve) and then npm run hot. This will proxy all frontend requests to the backend so files can be processed correctly. More information here

With that said, npm run hot should work without developer modification.

source https://github.com/JeffreyWay/laravel-mix/issues/2057