Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Merge requests
  • !816

add logging of existing default port process on start

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/ianmcnally/guess-existing-port-process-441 into master 8 years ago
  • Overview 20
  • Commits 15
  • Pipelines 0
  • Changes 4

Created by: ianmcnally

Hello awesome contributors,

In #441 (closed), there are was a request to guess the name of the existing process running on the default port when starting CRA. So, building on the incomplete yet solid work done in #454, this PR aims to complete that feature.

with a CRA app process found

screen shot 2016-11-02 at 16 37 20

It shows the app's name and directory.

Note: my-test-app is the name of a CRA app in ~/dev/test2

with a non-CRA process found

screen shot 2016-11-02 at 16 39 36

It shows the command name and directory.

without a process found

screen shot 2016-10-01 at 14 47 15

It shows the original, generic message.

Compare
  • master (base)

and
  • latest version
    03122b5d
    15 commits, 2 years ago

4 files
+ 83
- 2

    Preferences

    File browser
    Compare changes
pack‎ages‎
react-d‎ev-utils‎
READ‎ME.md‎ +16 -0
getProcess‎ForPort.js‎ +61 -0
packag‎e.json‎ +1 -0
react-scri‎pts/scripts‎
star‎t.js‎ +5 -2
packages/react-dev-utils/README.md
+ 16
- 0
  • View file @ 03122b5d

  • Edit in single-file editor

  • Open in Web IDE


@@ -142,6 +142,22 @@ compiler.plugin('done', function(stats) {
});
```
#### `getProcessForPort(port: number): string`
Finds the currently running process on `port`.
Returns a string containing the name and directory, e.g.,
```
create-react-app
in /Users/developer/create-react-app
```
```js
var getProcessForPort = require('react-dev-utils/getProcessForPort');
getProcessForPort(3000);
```
#### `openBrowser(url: string): boolean`
Attempts to open the browser with a given URL.
packages/react-dev-utils/getProcessForPort.js 0 → 100644
+ 61
- 0
  • View file @ 03122b5d

  • Edit in single-file editor

  • Open in Web IDE

var chalk = require('chalk');
var execSync = require('child_process').execSync;
var path = require('path');
var execOptions = {
encoding: 'utf8',
stdio: [
'pipe', // stdin (default)
'pipe', // stdout (default)
'ignore' //stderr
]
};
function isProcessAReactApp(processCommand) {
return /^node .*react-scripts\/scripts\/start\.js\s?$/.test(processCommand);
}
function getProcessIdOnPort(port) {
return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions).trim();
}
function getPackageNameInDirectory(directory) {
var packagePath = path.join(directory.trim(), 'package.json');
try {
return require(packagePath).name;
} catch(e) {
return null;
}
}
function getProcessCommand(processId, processDirectory) {
var command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions);
if (isProcessAReactApp(command)) {
const packageName = getPackageNameInDirectory(processDirectory);
return (packageName) ? packageName + '\n' : command;
} else {
return command;
}
}
function getDirectoryOfProcessById(processId) {
return execSync('lsof -p '+ processId + ' | grep cwd | awk \'{print $9}\'', execOptions).trim();
}
function getProcessForPort(port) {
try {
var processId = getProcessIdOnPort(port);
var directory = getDirectoryOfProcessById(processId);
var command = getProcessCommand(processId, directory);
return chalk.cyan(command) + chalk.blue(' in ') + chalk.cyan(directory);
} catch(e) {
return null;
}
}
module.exports = getProcessForPort;
packages/react-dev-utils/package.json
+ 1
- 0
  • View file @ 03122b5d

  • Edit in single-file editor

  • Open in Web IDE


@@ -14,6 +14,7 @@
"clearConsole.js",
"checkRequiredFiles.js",
"formatWebpackMessages.js",
"getProcessForPort.js",
"InterpolateHtmlPlugin.js",
"openChrome.applescript",
"openBrowser.js",
packages/react-scripts/scripts/start.js
+ 5
- 2
  • View file @ 03122b5d

  • Edit in single-file editor

  • Open in Web IDE


@@ -26,6 +26,7 @@ var detect = require('detect-port');
var clearConsole = require('react-dev-utils/clearConsole');
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
var getProcessForPort = require('react-dev-utils/getProcessForPort');
var openBrowser = require('react-dev-utils/openBrowser');
var prompt = require('react-dev-utils/prompt');
var config = require('../config/webpack.config.dev');
@@ -267,9 +268,11 @@ detect(DEFAULT_PORT).then(port => {
}
clearConsole();
var existingProcess = getProcessForPort(DEFAULT_PORT);
var question =
chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
'\n\nWould you like to run the app on another port instead?';
chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
((existingProcess) ? ' Probably:\n ' + existingProcess : '')) +
'\n\nWould you like to run the app on another port instead?';
prompt(question, true).then(shouldChangePort => {
if (shouldChangePort) {
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
2
CLA Signed tag: enhancement
2
CLA Signed tag: enhancement
    Assign labels
  • Manage project labels

Milestone
0.8.0
0.8.0
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference: facebook/create-react-app!816
Source branch: github/fork/ianmcnally/guess-existing-port-process-441

Menu

Explore Projects Groups Snippets