Skip to content

fix: port conflicts & syntax errors bringing down flask#36

Merged
datananda merged 8 commits into
mainfrom
claude/fix-port-conflict-W6PIw
Apr 16, 2026
Merged

fix: port conflicts & syntax errors bringing down flask#36
datananda merged 8 commits into
mainfrom
claude/fix-port-conflict-W6PIw

Conversation

@datananda
Copy link
Copy Markdown
Contributor

@datananda datananda commented Apr 10, 2026

Motivation

Can't npm run start while port 5000 is occupied because the Flask API uses hardcoded port 5000.

Additionally, when a candidate introduces a syntax error in pagination.py, the Werkzeug reloader parent process exits entirely (it only loops on exit code 3, and a SyntaxError during import causes exit code 1). Since start.sh runs the API in the background, nothing restarts it -- the dev server dies and stays dead even after the error is fixed.

Changes

Auto-detect a free API port with predictable fallback (scripts/start.sh, package.json): Probes ports sequentially from 5000-5019 and passes the chosen one as API_PORT (for Flask) and REACT_APP_API_PORT (for the frontend). Prints the active port on startup and honors an API_PORT=<port> npm start override for special cases. Drops concurrently -- runs Flask in the background and react-scripts in the foreground so react-scripts built-in port conflict prompt works natively.

Flask reads API_PORT (api/app.py): Reads the port from the env var with or fallback to handle empty strings. Falls back to 5000 for standalone usage.

Configurable API URL (src/api/apiImpl.ts): Replaces hardcoded port 5000 with a URL built from REACT_APP_API_PORT, defaulting to 5000.

Survive syntax errors in candidate files (api/app.py): Wraps the pagination import in try/except so a SyntaxError does not crash the Werkzeug reloader child process. Passes extra_files to app.run() so the file watcher monitors api/*.py even when an import fails (failed imports are not in sys.modules, so Werkzeug would not otherwise notice the fix). Returns a clear 500 with the traceback when the import is broken.

Surface API errors in a full-page overlay (src/Projects.tsx, src/styles.css): When /api/projects returns an error, Projects renders a CRA-style full-page "Server error:" overlay with the traceback. Clears automatically on the next successful request.

Comment thread api/app.py Fixed
@datananda datananda force-pushed the claude/fix-port-conflict-W6PIw branch 5 times, most recently from d4098b5 to a0241f7 Compare April 10, 2026 20:21
@datananda datananda force-pushed the claude/fix-port-conflict-W6PIw branch 3 times, most recently from 850e00e to 7f92a15 Compare April 10, 2026 20:31
@datananda datananda force-pushed the claude/fix-port-conflict-W6PIw branch 2 times, most recently from 17d2fb1 to 6aecacc Compare April 10, 2026 20:35
Running `npm run start` while another instance is already running
crashes because Flask (port 5000) and React (port 3000) use hardcoded
ports. Flask has no built-in port conflict handling unlike react-scripts.

Changes:
- Flask auto-detects a free port via find_free_port() and writes it
  to .api-port. Keeps debug=True (unchanged) for hot reloading.
- New setupProxy.js reads .api-port and proxies /api/* to Flask.
- Frontend uses relative URLs instead of hardcoded http://127.0.0.1:5000.
- Drop concurrently; run Flask in background and react-scripts in
  foreground so its built-in port conflict prompt works natively.

https://claude.ai/code/session_017KPNZRmcaF3fPXMSiiQST1
@datananda datananda force-pushed the claude/fix-port-conflict-W6PIw branch from 6aecacc to 8807c35 Compare April 10, 2026 20:39
@WilliamKelley
Copy link
Copy Markdown
Contributor

I think this approach is a bit much for the problem. We could simply add an npm script like "kill": "kill -9 $(lsof -t -i:5000)" which works for macos/unix.

Comment thread scripts/start.sh Outdated
Comment thread api/app.py Outdated
datananda and others added 2 commits April 10, 2026 13:56
Werkzeug's reloader parent exits when the child crashes with a non-restart
exit code, and nothing in start.sh brings it back. Wrap the pagination
import in try/except so the child always starts, and pass extra_files so
the file watcher monitors api/*.py even when an import fails.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
`os.environ.get("API_PORT", 5000)` returns "" when the key exists but
is empty, causing `int("")` to crash. Use `or` fallback instead.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Comment thread api/app.py Dismissed
@datananda datananda changed the title Fix port conflicts when running multiple interviews fix: port conflicts & syntax errors bringing down flask Apr 10, 2026
Comment thread api/app.py
Copy link
Copy Markdown
Contributor

@gjoseph92 gjoseph92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm in favor of this approach. Asking people to kill random things on other ports is a bit inconsiderate.

Comment thread api/app.py
When pagination.py has a syntax error, surface the traceback in a
CRA-style error overlay in the frontend rather than silently showing
"No projects found". Clears automatically on the next successful request.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Comment thread api/app.py Dismissed
@datananda
Copy link
Copy Markdown
Contributor Author

Updated so a syntax error state is similar between TS and python variants:

TS
Screenshot 2026-04-13 at 2 08 40 PM

python
Screenshot 2026-04-13 at 2 08 59 PM

@datananda datananda requested a review from gjoseph92 April 13, 2026 21:10
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit bff60bf. Configure here.

Comment thread src/Projects.tsx Outdated
claude and others added 2 commits April 14, 2026 15:31
Change "Compiled with problems:" to "Server error:" since this overlay
displays Python API errors, not JavaScript compilation failures.

https://claude.ai/code/session_01CmiEo4xyYQJMR9LoxiqdFL
Copy link
Copy Markdown
Contributor

@melicarls melicarls left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks like a reasonable fix! Thank you so much for taking this on. Agreed that asking candidates to kill processes is poor form.

I'm admittedly not the most adept with startup scripts and port handling - @gjoseph92 , could you give another pass and second approval?

Instead of falling back to a random ephemeral port (e.g. 60736) when
5000 is taken, try ports sequentially from 5000-5019. Print the active
port on startup and support API_PORT env var override for candidates
who need to port-forward.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@jkillian
Copy link
Copy Markdown

ahh @gjoseph92 is out today/tomorrow so we probably shouldn't wait on him

@jkillian
Copy link
Copy Markdown

jkillian commented Apr 16, 2026

I haven't reviewed, but if Gabe was mostly happy with it and @melicarls you think it looks good, let's just merge and try it! We can post in eng-interviews to be on the lookout for issues

@jkillian
Copy link
Copy Markdown

As a last resort, if there are issues, can always have candidates check out the commit before, no worse than having to deal with a stuck server

@datananda datananda merged commit a42c202 into main Apr 16, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants