Volto 3.4. Running The Project: which port?

[mauritsvanrees]

In Running the project the text says about yarn start:

This will start the server on port 3000.

This is correct. But in the terminal I see:

ℹ ｢wds｣: Project is running at http://localhost:3001/

I don't see anything about port 3000 in the terminal, so I think the documentation may be wrong, and I go to port 3001, and only see an error:

Cannot GET /

In my case, neither port 3000 nor 3001 really worked, because I had not configured Plone correctly yet. A doubt about which port is the correct one, does not help for solving that.

So can we add a comment about that? Maybe something like this:

You may see a line in the terminal output saying "｢wds｣: Project is running at http://localhost:3001/". This is true, but this is a different part of the stack. Your Volto app is really running on http://localhost:3000/.

Even better would be to actually print the link with port 3000 in the terminal. If you only read the terminal output, you will never get the correct url in your browser. (That would be an issue for Volto, not for the training.)

BTW, I have no idea what what wds thingie actually is.

[tisto]

@mauritsvanrees this seems odd. Do you have steps to repoduce? Are you sure you haven't set a port manually in the command line? Webpack starts on port 3000 and moves on to 3001 if that port is blocked.

[mauritsvanrees]

Steps to reproduce are: follow the training. Let me try again, in the home folder:

$ npx @plone/create-volto-app my-volto-app2
...
$ cd my-volto-app2
$ yarn start
yarn run v1.19.0
$ razzle start
 WAIT  Compiling...

✔ Client
  Compiled successfully in 14.85s

✔ Server
  Compiled successfully in 1.27s

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /Users/maurits/my-volto-app2
ℹ ｢wds｣: 404s will fallback to /index.html
✅  Server-side HMR Enabled!
🚀 started

Check the open ports in the 3000 range:

$ lsof -i -n -P | grep 300
node       7778 maurits   27u  IPv6 0xc1f3c58ded250e1      0t0  TCP *:3001 (LISTEN)
node       7778 maurits   74u  IPv6 0xc1f3c58ded228a1      0t0  TCP *:3000 (LISTEN)
$ ps aux | grep node
...
maurits           7778   0.0  3.2  5518612 543580 s000  S+   11:23pm   0:30.18 /Users/maurits/.nvm/versions/node/v10.16.3/bin/node /Users/maurits/my-volto-app2/node_modules/razzle/scripts/start.js
maurits           7777   0.0  0.2  4508584  26148 s000  S+   11:23pm   0:00.08 /Users/maurits/.nvm/versions/node/v10.16.3/bin/node /Users/maurits/my-volto-app2/node_modules/.bin/razzle start
maurits           7766   0.0  0.4  4628444  75472 s000  S+   11:23pm   0:00.27 node /Users/maurits/.yarn/bin/yarn.js start

So node is listening on ports 3000 and 3001. Port 3000 is the one I should use according to the training docs, and it is working, but port 3001 is the only one that I see in the messages from yarn start. This confuses me.

[tisto]

@jackahl @steffenri can you give this part of the training a shot and see if you can reproduce what @mauritsvanrees describes here? cc @sneridagh

[jackahl]

@mauritsvanrees This is a known issue, which is already fixed in the current version of volto. But create-volto-app ships a rather old Volto version, where it still prints out ｢wds｣: Project is running at http://localhost:3001/. So the problem should be resolved once create-volto-app ships the current version of Volto.

[sneridagh]

@mauritsvanrees the port 3001 is the one responsible for the hot reloading in the dev server in dev mode. So it's completely normal. What is not normal is that Razzle (the Volto bundler) displays the info message that the port is open. I can't see it in a MACOS build.

create-volto-app is fine, it is in sync with the latest released Volto, so if you run it it will configure Volto 3 version by default, and you have to change it to use Volto 4alpha.

So the only issue here that I see is that in linux Razzle is talking too much. I will investigate but it's inocuous.

[sneridagh]

This is what I see in MACOS.

[mauritsvanrees]

I am also on MacOS (Mojave, 10.14.6) and I see the extra info:

Perhaps the issue is more that Volto/yarn/node does not say enough: I would hope that it would say it is running on port 3000. Or should a front-end developer simply know that?

I hope I am not coming across as annoying or nitpicking. But others who follow the training may be confused too. I will follow the training for real next week at the conference by the way.

[sneridagh]

@mauritsvanrees I have a hunch, could be that you have wds (webpack developer server) installed globally in your node env? Some tools teached to install webpack globally (which is wrong). if so, remove it, the build should use the one in the local project.

[mauritsvanrees]

Not as far as I can see. I think it was clean before I started on Volto. The node_modules directory in my home folder was created by create-volto-app and it is empty.

Some commands I used for searching:

$ cd
$ ls node_modules/
$ which node
/Users/maurits/.nvm/versions/node/v10.16.3/bin/node
$ find .nvm -name webpack
$ find .nvm -name wds
$ find .nvm -name node
.nvm/versions/node
.nvm/versions/node/v10.16.3/bin/node
.nvm/versions/node/v10.16.3/include/node
.nvm/versions/node/v10.16.3/share/doc/node
$ find .nvm -name node_modules
.nvm/versions/node/v10.16.3/lib/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/run-queue/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/normalize-package-data/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/duplexify/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/libnpmorg/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/wrap-ansi/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/parallel-transform/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/flush-write-stream/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/libnpmaccess/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/is-ci/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/pacote/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/libnpmconfig/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/got/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/cacache/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/from2/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/through2/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/stream-iterate/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/gauge/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/copy-concurrently/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/pumpify/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/gentle-fs/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/sha/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/node-gyp/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/cliui/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/yargs/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/sorted-union-stream/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/move-concurrently/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/wide-align/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/promise-retry/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/string-width/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/minipass/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/execa/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/concat-stream/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/libnpmteam/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/rc/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/tar/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/fs-write-stream-atomic/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/are-we-there-yet/node_modules
.nvm/versions/node/v10.16.3/lib/node_modules/npm/node_modules/debug/node_modules

And in the volto app:

$ cd my-volto-app2
$ find . -name webpack
./node_modules/.bin/webpack
./node_modules/terser-webpack-plugin/node_modules/.bin/webpack
./node_modules/url-loader/node_modules/.bin/webpack
./node_modules/webpack-dev-middleware/node_modules/.bin/webpack
./node_modules/webpack
./node_modules/optimize-css-assets-webpack-plugin/node_modules/.bin/webpack
./node_modules/webpack-dev-server/node_modules/.bin/webpack
./node_modules/mini-css-extract-plugin/node_modules/.bin/webpack
./node_modules/babel-loader/node_modules/.bin/webpack
./node_modules/webpackbar/node_modules/.bin/webpack
./node_modules/razzle/node_modules/css-loader/node_modules/.bin/webpack
./node_modules/razzle/node_modules/.bin/webpack
./node_modules/file-loader/node_modules/.bin/webpack
$ cat package.json 
{
  "name": "volto-starter-kit",
  "description": "Volto Starter Kit",
  "license": "MIT",
  "version": "3.1.0",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom --passWithNoTests",
    "start:prod": "NODE_ENV=production node build/server.js",
    "i18n": "NODE_ENV=production node node_modules/@plone/volto/src/i18n.js"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "transform": {
      "^.+\\.js(x)?$": "babel-jest",
      "^.+\\.css$": "jest-css-modules",
      "^.+\\.scss$": "jest-css-modules",
      "^.+\\.(png)$": "jest-file",
      "^.+\\.(jpg)$": "jest-file",
      "^.+\\.(svg)$": "./node_modules/@plone/volto/jest-svgsystem-transform.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!@plone/volto).+\\.js$"
    ],
    "moduleNameMapper": {
      "@plone/volto/(.*)$": "<rootDir>/node_modules/@plone/volto/src/$1",
      "@package/(.*)$": "<rootDir>/src/$1",
      "~/(.*)$": "<rootDir>/src/$1"
    },
    "coverageThreshold": {
      "global": {
        "branches": 10,
        "functions": 10,
        "lines": 10,
        "statements": 10
      }
    },
    "setupFiles": [
      "@plone/volto/test-setup.js"
    ]
  },
  "prettier": {
    "trailingComma": "all",
    "singleQuote": true
  },
  "stylelint": {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-idiomatic-order",
      "./node_modules/prettier-stylelint/config.js"
    ]
  },
  "engines": {
    "node": "^8 || ^10"
  },
  "dependencies": {
    "@plone/volto": "3.2.7"
  },
  "devDependencies": {
    "eslint-plugin-prettier": "3.0.1",
    "postcss-overrides": "3.1.4",
    "prettier": "1.17.0",
    "prettier-stylelint": "0.4.2"
  }
}

[sneridagh]

@mauritsvanrees forget about it, I think we have a Heisenbug. All our projects are bootstrapped with create-volto-app, but it's not showing the behavior (even https://github.com/collective/volto-hands-on-training does not show it for me (locally) and I've removed the node_modules and all that stuff).

I tried in a fresh generated using create-volto-app and it does show indeed.

I've seen that you are trying the Volto training. Can you try with the Volto hands on training repo? https://github.com/collective/volto-hands-on-training and tell me if it shows the behavior too?

[sneridagh]

@mauritsvanrees ok, I see what happens.

Razzle depends on webpack-dev-server but the dependency is set to use a ^ version, and they bumped to 3.8.1 one month ago. This version has different behavior than the previous ones, at least in being more verbose. Yarn lock file prevents our other projects to "update" automatically to the newest one.

Although is just an aesthetics issue, it leads to confusion for the user. I just added an issue in Volto, we can take a look into that during the conf sprint.

[mauritsvanrees]

Volto hands-on training does not fare better, but that seems something different entirely:

$ git clone git@github.com:collective/volto-hands-on-training.git
...
$ cd volto-hands-on-training/
$ yarn start
  yarn run v1.19.0
  $ razzle start
  /bin/sh: razzle: command not found
  error Command failed with exit code 127.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
$ yarn install
yarn install v1.19.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@plone/volto/-/volto-4.0.0-alpha.9.tgz: unexpected end of file".
info If you think this is a bug, please open a bug report with the information provided in "/Users/maurits/volto-hands-on-training/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

[mauritsvanrees]

I think we can close this training issue in favour of the issue in the Volto repo, although I guess the training docs could mention something about this as long as it is not fixed.

[sneridagh]

@mauritsvanrees that is another error, yarn based: https://github.com/yarnpkg/yarn/issues/6969

It seems to happen when dealing with large packages. Retry and it should work.

[mauritsvanrees]

I tried again with volto-hands-on-training, and now it works.

[FarooqAlaulddin]

I am experiencing similar problem:

Volto:

Backend:

Starting server in PID 1845.
2023-01-01 11:53:51,611 INFO    [waitress:486][MainThread] Serving on http://[::1]:8080
2023-01-01 11:53:51,611 INFO    [waitress:486][MainThread] Serving on http://127.0.0.1:8080

When I visit http://localhost:3000

Server running on 3000 but resources are at 3001

[tiberiuichim]

@FarooqAlaulddin WDS is the webpack development server. It runs on port 3001, so your browser has to be able to connect to the volto process running. Either there's a firewall or a docker port mapping problem. See the Plone discord forum, I think this sort of problem was discussed before.