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.

Petrifaction

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

Euphrates

I've tried this, but it's gives me 404 | Not Found page of Laravel. First, I've putted this code in webpack.mix.js file, then run php artisan serve and then run npm run hot, but no luck!! Can you help me please? – Grudge

Answer 2

It seems you're missing the path to cross-env... Try with this:

"dev": "node 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 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",
"hot": "node 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": "node 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"

I've deleted your "dev": "npm run development", and "prod": "npm run production",. If you want to change commands just change them.

Hope It works.

Brindle

Hi @Angus Simons, thanks for replying. I'm still learning all this stuff, so thanks for the pointers. Unfortunately I'm still getting the same result. But you've given me a new avenue to investigate. – Petrifaction

Thanks I will re-read it. I added a bunch of things via NPM so I guess somewhere I screwed something up. – Petrifaction

@Petrifaction Have you installed webpack globally? – Brindle

No haven't. Should I do that? I'm still a little unclear about the implications of global npm modules vs. project ones. – Petrifaction

i think there's something going on with Laravel (I'm using 5.4 on Linux). Just to test, I did a totally new install with laravel new Project. Then npm install, followed by npm run dev, which did a build, but failed to start a web service. Then tried npm run hot, which shows the build service and web server running, but again, same message: Cannot get "/" – Petrifaction

Also on a fresh install you have to set /dist folder for cross-env cause they changed it. – Brindle

Thanks @Angus, forgive the dumb question how/where do I do that? – Petrifaction

@Petrifaction in your package.json on the main folder of your laravel project and install npm and webpack globally – Brindle

Hi @Angus, already updated package.json as per your original comments. Also already installed webpack and npm globally. Still the same issue. :-| Rather than keep bugging you, is there a link you can refer me to? I've searched but not found one that meets my case. – Petrifaction

Let us continue this discussion in chat. – Brindle

that dosn't halp to me – Valer

@EvgeniyMiroshnichenko we didn't resolve the issue on the chat. I'm still have the same problem. – Petrifaction

After brief research, I think webpack-dev-server won't work out of the box, with laravel, in part because index.php is in /public, not /. I found this post which may help, although I haven't tried it. – Piaffe