devServerPort not set on fresh install with "Just the basics" & "Express Server" target

[tnightingale]

What version of Remix are you using?

v1.5.1

Steps to Reproduce

1. Start with a fresh create-remix@latest install, select "Just the basics" for app type and "Express Server" for target.
2. Run the application with npm run dev
3. Visit http://localhost:3000 with dev tools open.
4. Observe WebSocket connection to 'ws://localhost:8002/socket' failed: & Remix dev asset server web socket error: messages in console.

Terminal log:

❯ npx create-remix@latest
Need to install the following packages:
  create-remix@latest
Ok to proceed? (y) y
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
? Where would you like to create your app? remix-1.5.1
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets. Express Server
? Do you want me to run `npm install`? Yes
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 1131 packages, and audited 1132 packages in 21s

213 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
? TypeScript or JavaScript? TypeScript
💿 That's it! `cd` into "/remix-1.5.1" and check the README for development and deploy instructions!

❯ npm run dev

Expected Behavior

No errors in console & @remix/remix-dev websocket connection + LiveReload to work as expected.

Note: This can be resolved by explicitly setting "devServerPort": 8002 in remix.config.js but the documentation (and functionality in prior versions) indicate that 8002 should be the default devServerPort value.

Actual Behavior

WebSocket connection to 'ws://localhost:8002/socket' failed: & Remix dev asset server web socket error: messages in browser console (see screenshot).

[abn5x]

same here, but with netlify...

[EkaanshArora]

This is because in #3206 the script obtains a random available port if the environment variable isn't set - it's undefined for this template as remix.config.js does not include a devServerPort.

Adding "devServerPort": 8002 in the remix.config.js of this (and other) templates should fix the problem.

[kiliman]

Yes, I've noticed the same thing and commented here as to why it's happening and a couple of solutions. One as you noted is to specify the devServerPort in remix.config. But if you still want random ports, I wrote a script that will help. #3314

[bluefire2121]

It seems like this is still an issue. Anyways we can add back in the default devServerPort?

[acurry]

I'm running into the same issue while going through the Remix app tutorial. Setting devServerPort: 8002 in the remix.config.js did not fix the issue. Does anyone have any other ideas for a workaround?

[sepbot]

@acurry had the same issue. looks like its broken in v2. setting future.v2_dev to false in remix.config.js fixed it for me

[acurry]

@sepbot That worked! Thanks!