Vue npm run serve starts on random port

Question

I'm trying to run Vue on port 8080, but can't get that to work. I just created a brand new project with vue create . and ran it with npm run serve, which starts the app on a random port.

First attempt

Run npm run serve without any additional configuration

$ npm run serve

> [email protected] serve /Users/ne/projects/vue-demo
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 4294ms                                                                                                              3:21:35 PM

No type errors found
Version: typescript 3.5.3
Time: 4267ms

  App running at:
  - Local:   http://localhost:20415/
  - Network: http://192.168.178.192:20415/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

So first I checked to see if another app is running on that port with lsof -i :8080 but that gave no results.

Second attempt

So the second attempt was to force the port via the cli with npm run serve -- --port 8080, which still started the app on a random port, but no errors in the browser console.

Third attempt

Next I tried to configure the application in vue.config.js.

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: 'localhost',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
};

Which didn't work either and even throws an exception in the browser console:

15:25:20.889 :8080/sockjs-node/info?t=1566048320873:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:20.910 client?81da:172 [WDS] Disconnected!
close @ client?81da:172
15:25:21.982 :8080/sockjs-node/info?t=1566048321978:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:23.079 :8080/sockjs-node/info?t=1566048323075:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:25.097 :8080/sockjs-node/info?t=1566048325091:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:29.151 VM14:1 GET http://localhost:8080/sockjs-node/info?t=1566048329145 net::ERR_CONNECTION_REFUSED

package.json

I added package.json, since I might be missing something here.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-plugin-typescript": "^3.10.0",
    "@vue/cli-plugin-unit-jest": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }
}

What am I missing?

Answer 1

Note: This issue is specific to node-portfinder v1.0.22. It was resolved in v1.0.23 that is a retag of v1.0.21.

This seems a feature in portfinder that used random series to allocate an available port.

Trying:

const portfinder = require('portfinder');
portfinder.basePort=8080
portfinder.getPortPromise().then((port) => { console.log(port) })

return something like:

9567

Even if port 8080 is available.

The behaviour change recently in this commit. Before the port were try increasing from basePort to highestport. It comes with the release v1.0.22

Option1: Patching

In order to use the port 8080, I patched the file node_modules/@vue/cli-service/lib/commands/serve.js adding line 322 portfinder.highestPort = portfinder.basePort + 1

portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
portfinder.highestPort  = portfinder.basePort + 1
const port = await portfinder.getPortPromise()

Option2: Install portfinder previous to the behaviour change

Another way to workaround waiting for portfinder/vue-cli to choose a solution is to install old portfinder with :

npm install [email protected]

Answer 2

You can temporarily rollback portfinder by placing

"resolutions": {
  "@vue/cli-service/portfinder": "1.0.21"
}

in your package.json file and run yarn install afterwards.