npm run dev command does not work on vuejs' hackernews example

Question

I am trying to run the vue-hackernews-2.0 example from vuejs' github repository

In setup section it explains how to install the project:

# install dependencies
npm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

# serve in production mode
npm start

I did npm install. After changing the port to 8888 in server.js I typed "npm run dev" on command line.

> vue-hackernews-2.0@ dev D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> node server

server started at localhost:8888


DONE  Compiled successfully in 16328ms                                                                                                                                                                                                                        1:02:18 PM


DONE  Compiled successfully in 17845ms                                                                                                                                                                                                                        1:02:19 PM


webpack built bd162a76119031a85eed in 17845ms

When I go localhost:8888 It will just try to load for 1 min and then it fails, without anything on the console.

I thought I should also try "npm run build" and "npm start" so I also used two commands. "npm run build" successfully created the dist file.

But after "npm start" I get this error:

> vue-hackernews-2.0@ start D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> cross-env NODE_ENV=production node server

module.js:471
    throw err;
    ^

Error: Cannot find module './dist/vue-ssr-server-bundle.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\server.js:41:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn node ENOENT
    at notFoundError (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:11:11)
    at verifyENOENT (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:46:16)
    at ChildProcess.cp.emit (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:33:19)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! vue-hackernews-2.0@ start: `cross-env NODE_ENV=production node server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-hackernews-2.0@ start script 'cross-env NODE_ENV=production node server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-hackernews-2.0 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production node server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs vue-hackernews-2.0
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls vue-hackernews-2.0
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\npm-debug.log

Screenshot of dist folder:

package.json scripts:

"scripts": {
    "dev": "node server",
    "start": "cross-env NODE_ENV=production node server",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
  },

Answer 1

Requires Node.js 7+

I managed to make it work without any problems.

$node -v
v8.3.0
$npm -v
5.3.0

Change the default port successfully :

To change the default port you have to edit package.json scripts:

dev: cross-env PORT=8888 node server

start: cross-env PORT=8888 NODE_ENV=production node server

Then running npm run dev

> vue-hackernews-2.0@ dev /home/emx/so/vue-hackernews-2.0
> cross-env PORT=8888 node server

server started at localhost:8888

Answer 2

you are using a version of node that is not supported. Your error point to node v6.11.2 see below.

 npm ERR! Windows_NT 6.1.7601
 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
 npm ERR! node v6.11.2
 npm ERR! npm  v3.10.8

vue-hackernews-2.0 requires Node.js 7+ . Upgrade your node to a 7+ version and you should be fine. I'll also recommend to update your npm version.

See the answers to this question for details about how to update your node version, if you need instructions.