From fb7af8a1debb9a0b296eb4230f9459605e91ee69 Mon Sep 17 00:00:00 2001 From: Adam Novak Date: Thu, 10 Apr 2025 10:53:23 -0400 Subject: [PATCH 1/3] Update npm run serve default port to match docs Now `npm run serve` should listen on port 3001 as documented in the README. Also document how to change the port for `npm run serve`. This should fix #476. --- README.md | 5 +++++ doc/development.md | 2 +- package.json | 2 +- src/server.mjs | 2 +- src/setupProxy.js | 2 +- 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 4a0996e7..3bc68763 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,11 @@ After installation, you can run the Sequence Tube Map: npm run serve ``` Note that this is using **npm**, not **nvm** as in the previous step. + + If you get an `EADDRINUSE` error, try picking a different server port (and update all the numbers below from 3001 to whatever you picked). + ``` + SERVER_PORT=3009 npm run serve + ``` 5. Open the Sequence Tube Map in your browser. - If you are running the Sequence Tube Map on your local computer, you can visit [http://localhost:3001](http://localhost:3001). - If you are running the Sequence Tube Map on a *different* computer (for example, one accessed by SSH), you will need to connect to it there. You can try browsing to port 3001 on that machine's hostname. For example, if you connected with `ssh yourname@bigserver.example.edu`, then `bigserver.example.edu` is the hostname, and you want to visit `http://bigserver.example.edu:3001`. If that doesn't work, you can try setting up an SSH tunnel by making a second SSH connection with: diff --git a/doc/development.md b/doc/development.md index f81ed911..6b1fcd9e 100644 --- a/doc/development.md +++ b/doc/development.md @@ -12,7 +12,7 @@ The `npm run build`/`npm run serve` pipeline can only produce minified code, whi ``` npm run start ``` -This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 (or set a different SERVER_PORT in .env) and 3001 must both be free. +This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 and 3001 must both be free. Running in this mode allows the application to produce human-readable stack traces when something goes wrong in the browser. diff --git a/package.json b/package.json index ac128460..a1c87ca0 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "worker-rpc": "^0.2.0" }, "scripts": { - "start": "concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", + "start": "SERVER_PORT=3000 concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", "build": "react-scripts build", "test": "react-scripts test --testResultsProcessor=./node_modules/jest-html-reporter --reporters default jest-compact-reporter --seed=1", "eject": "react-scripts eject", diff --git a/src/server.mjs b/src/server.mjs index 3b6feaf2..2db3ef8d 100644 --- a/src/server.mjs +++ b/src/server.mjs @@ -53,7 +53,7 @@ const SCRATCH_DATA_PATH = "tmp/"; // This is where data downloaded from URLs is cached. // This directory will be recursively removed! const DOWNLOAD_DATA_PATH = config.tempDirPath; -const SERVER_PORT = process.env.SERVER_PORT || config.serverPort || 3000; +const SERVER_PORT = process.env.SERVER_PORT || config.serverPort || 3001; const SERVER_BIND_ADDRESS = config.serverBindAddress || undefined; // This holds a collection of all the absolute path root directories that the diff --git a/src/setupProxy.js b/src/setupProxy.js index 02eb679f..2a23b4a4 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -23,7 +23,7 @@ module.exports = function (app) { "http://" + addressToHost(config.serverBindAddress) + ":" + - (process.env.SERVER_PORT || "3000"); + (process.env.SERVER_PORT || config.serverPort || "3001"); app.use(createProxyMiddleware(serverBase + "/api")); // Websockets don't seem to get through unless we ask for them explicitly. // They can just go to the root because the server ignores websocket paths. From 17c5a6a59f57d5374192741b954d4914cfa25b25 Mon Sep 17 00:00:00 2001 From: Adam Novak Date: Thu, 10 Apr 2025 10:58:27 -0400 Subject: [PATCH 2/3] Default back to 3000 or the config without NPM and let overrides work again --- doc/development.md | 2 +- package.json | 4 ++-- src/server.mjs | 2 +- src/setupProxy.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/development.md b/doc/development.md index 6b1fcd9e..e2dcc99a 100644 --- a/doc/development.md +++ b/doc/development.md @@ -12,7 +12,7 @@ The `npm run build`/`npm run serve` pipeline can only produce minified code, whi ``` npm run start ``` -This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 and 3001 must both be free. +This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 (or set a different SERVER_PORT in .env) and 3001 (or set a different PORT in the environment for the command) must both be free. Running in this mode allows the application to produce human-readable stack traces when something goes wrong in the browser. diff --git a/package.json b/package.json index a1c87ca0..a7dff9aa 100644 --- a/package.json +++ b/package.json @@ -62,13 +62,13 @@ "worker-rpc": "^0.2.0" }, "scripts": { - "start": "SERVER_PORT=3000 concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", + "start": "SERVER_PORT=${SERVER_PORT:=3000} concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", "build": "react-scripts build", "test": "react-scripts test --testResultsProcessor=./node_modules/jest-html-reporter --reporters default jest-compact-reporter --seed=1", "eject": "react-scripts eject", "predeploy": "npm run build", "deploy": "gh-pages -d build", - "serve": "node ./src/server.mjs", + "serve": "SERVER_PORT=${SERVER_PORT:=3001} node ./src/server.mjs", "format": "prettier --write \"**/*.+(mjs|js|css)\"", "postinstall": "patch-package" }, diff --git a/src/server.mjs b/src/server.mjs index 2db3ef8d..3b6feaf2 100644 --- a/src/server.mjs +++ b/src/server.mjs @@ -53,7 +53,7 @@ const SCRATCH_DATA_PATH = "tmp/"; // This is where data downloaded from URLs is cached. // This directory will be recursively removed! const DOWNLOAD_DATA_PATH = config.tempDirPath; -const SERVER_PORT = process.env.SERVER_PORT || config.serverPort || 3001; +const SERVER_PORT = process.env.SERVER_PORT || config.serverPort || 3000; const SERVER_BIND_ADDRESS = config.serverBindAddress || undefined; // This holds a collection of all the absolute path root directories that the diff --git a/src/setupProxy.js b/src/setupProxy.js index 2a23b4a4..106f72c5 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -23,7 +23,7 @@ module.exports = function (app) { "http://" + addressToHost(config.serverBindAddress) + ":" + - (process.env.SERVER_PORT || config.serverPort || "3001"); + (process.env.SERVER_PORT || config.serverPort || "3000"); app.use(createProxyMiddleware(serverBase + "/api")); // Websockets don't seem to get through unless we ask for them explicitly. // They can just go to the root because the server ignores websocket paths. From c99d0befc2726e210bf8520d5584f048b11cf63e Mon Sep 17 00:00:00 2001 From: Adam Novak Date: Thu, 10 Apr 2025 11:12:50 -0400 Subject: [PATCH 3/3] Change the docs to match port 3000 instead Actually, we need `npm run serve` to be on port 3000 by default because we run the demo server with it, and I don't want to set up a real production configuration for it. But now the docs say what to do if port 3000 is in use, and show you actually going to port 3000 to use the tool. --- README.md | 12 ++++++------ doc/development.md | 2 +- package.json | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 3bc68763..96a72fbc 100644 --- a/README.md +++ b/README.md @@ -94,17 +94,17 @@ After installation, you can run the Sequence Tube Map: ``` Note that this is using **npm**, not **nvm** as in the previous step. - If you get an `EADDRINUSE` error, try picking a different server port (and update all the numbers below from 3001 to whatever you picked). + If you get an `EADDRINUSE` error, try picking a different server port (and update all the numbers below from 3000 to whatever you picked). ``` - SERVER_PORT=3009 npm run serve + SERVER_PORT=3001 npm run serve ``` 5. Open the Sequence Tube Map in your browser. - - If you are running the Sequence Tube Map on your local computer, you can visit [http://localhost:3001](http://localhost:3001). - - If you are running the Sequence Tube Map on a *different* computer (for example, one accessed by SSH), you will need to connect to it there. You can try browsing to port 3001 on that machine's hostname. For example, if you connected with `ssh yourname@bigserver.example.edu`, then `bigserver.example.edu` is the hostname, and you want to visit `http://bigserver.example.edu:3001`. If that doesn't work, you can try setting up an SSH tunnel by making a second SSH connection with: + - If you are running the Sequence Tube Map on your local computer, you can visit [http://localhost:3000](http://localhost:3000). + - If you are running the Sequence Tube Map on a *different* computer (for example, one accessed by SSH), you will need to connect to it there. You can try browsing to port 3000 on that machine's hostname. For example, if you connected with `ssh yourname@bigserver.example.edu`, then `bigserver.example.edu` is the hostname, and you want to visit `http://bigserver.example.edu:3000`. If that doesn't work, you can try setting up an SSH tunnel by making a second SSH connection with: ``` - ssh -L 3001:localhost:3001 yourname@bigserver.example.edu + ssh -L 3000:localhost:3000 yourname@bigserver.example.edu ``` - While that SSH connection is open, you will be able to see the Sequence Tube Map at [http://localhost:3001](http://localhost:3001). + While that SSH connection is open, you will be able to see the Sequence Tube Map at [http://localhost:3000](http://localhost:3000). ### Setting Up a Visualization diff --git a/doc/development.md b/doc/development.md index e2dcc99a..b8f3c568 100644 --- a/doc/development.md +++ b/doc/development.md @@ -12,7 +12,7 @@ The `npm run build`/`npm run serve` pipeline can only produce minified code, whi ``` npm run start ``` -This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 (or set a different SERVER_PORT in .env) and 3001 (or set a different PORT in the environment for the command) must both be free. +This will use React's development mode server to serve the frontend, and run the backend in a separate process, behind React's proxy. Local ports 3000 and 3001 must both be free. You can change these with the `SERVER_PORT` environment variable or `.env` setting, or the `serverPort` field in `config.json`, and the `PORT` environment variable. Running in this mode allows the application to produce human-readable stack traces when something goes wrong in the browser. diff --git a/package.json b/package.json index a7dff9aa..ac128460 100644 --- a/package.json +++ b/package.json @@ -62,13 +62,13 @@ "worker-rpc": "^0.2.0" }, "scripts": { - "start": "SERVER_PORT=${SERVER_PORT:=3000} concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", + "start": "concurrently -n frontend,backend -c red,green 'HOST=${HOST:=127.0.0.1} PORT=${PORT:=3001} react-scripts start' 'npm:serve'", "build": "react-scripts build", "test": "react-scripts test --testResultsProcessor=./node_modules/jest-html-reporter --reporters default jest-compact-reporter --seed=1", "eject": "react-scripts eject", "predeploy": "npm run build", "deploy": "gh-pages -d build", - "serve": "SERVER_PORT=${SERVER_PORT:=3001} node ./src/server.mjs", + "serve": "node ./src/server.mjs", "format": "prettier --write \"**/*.+(mjs|js|css)\"", "postinstall": "patch-package" },