Skip to content

[WIP] Use a different port if 3000 is used #100

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
wants to merge 2 commits into from
Closed

[WIP] Use a different port if 3000 is used #100

wants to merge 2 commits into from

Conversation

sotojuan
Copy link

Work in progress!

Fixes #85.

The idea is to detect if port 3000 is used by something else and if so, use a different port.

portfinder takes in a basePort and returns that if it's available. If not, it'll use the next available port. This was a good solution because we can use 3000 as the basePort.

The problem is that while I can pass the port to the function that opens the browser, I can't pass it to the function that logs The app is running at http://localhost:3000/.

Assuming this UX is fine (@gaearon wanted a prompt, but I feel like this is less intrusive), how can I let the logging functions know about the new port?

Thanks!

@@ -16,6 +16,9 @@ var WebpackDevServer = require('webpack-dev-server');
var config = require('../config/webpack.config.dev');
var execSync = require('child_process').execSync;
var opn = require('opn');
var portfinder = require('portfinder');

Copy link
Contributor

Choose a reason for hiding this comment

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

I think you can have a var PORT = 3000 here and let the callback of portfinder.getPort re-assign this variable. Then the webpack done callback can just do console.log('The app is running at http://localhost:' + PORT + '/');

Copy link
Author

Choose a reason for hiding this comment

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

👍 Keyan to the rescue.

@sotojuan
Copy link
Author

Updated—now it's working (I think) but UX is still up to debate. I like this way of doing it as the user doesn't have to worry about anything—it'll work and show the available port.

@gaearon
Copy link
Contributor

gaearon commented Jul 22, 2016

What if you didn't intend to start another secret and just forgot one is already running in a different terminal tab? Ideally we wouldn't want to spend time initializing just to open :3001 at which point you'll realize what happened.

@sotojuan
Copy link
Author

Good point. I'm gonna close this in favor of #101, that's looks like a better solution!

@sotojuan sotojuan closed this Jul 24, 2016
@sotojuan sotojuan deleted the port branch July 24, 2016 14:15
kalekseev pushed a commit to kalekseev/create-react-app that referenced this pull request Sep 11, 2017
Use ts-jest instead of custom solution for transforming ts files
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants