如何指定运行基于create-react-app的项目的端口？

我的项目基于create-react-app。npm start或yarn start默认情况下将在端口3000上运行该应用程序，并且在package.json中没有指定端口的选项。

在这种情况下，如何指定自己选择的端口？我想同时运行此项目的两个（用于测试），一个在端口3005，另一个在3006

如果您不想设置环境变量，另一个选择是从以下位置修改scriptspackage.json 的一部分：

"start": "react-scripts start"

至

Linux（在Ubuntu 14.04 / 16.04上测试）和MacOS（在MacOS Sierra 10.12.4上通过@ aswin-s测试）：

"start": "PORT=3006 react-scripts start"

或者（可能是）@IsaacPak的更一般的解决方案

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor解决方案

"start": "set PORT=3006 && react-scripts start"

cross-env lib随处可见。有关详细信息，请参见Aguinaldo Possatto 答案

由于我的答案越来越流行，因此进行更新：当前，我更喜欢使用.env文件中保存的环境变量（用于以deploy方便易读的形式存储用于不同配置的变量集）。不要忘记添加*.env到.gitignore如果你还在存储你的秘密.env文件。这是为什么在大多数情况下使用环境变量更好的解释。这是为什么在环境中存储秘密不是一个好主意的解释。

这是完成此任务的另一种方法。

.env在项目根目录下创建一个文件，并在其中指定端口号。喜欢：

PORT=3005

您可以使用cross-env设置端口，并且该端口将在Windows，Linux和Mac上运行。

yarn add -D cross-env

然后在package.json中，开始链接可能是这样的：

"start": "cross-env PORT=3006 react-scripts start",

您可以指定一个名为的环境变量，以PORT指定服务器将在其上运行的端口。

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

对于Windows亲朋好友，我发现了一种更改ReactJS端口以在所需端口上运行的方法。在运行服务器之前，请转到

 node_modules/react-scripts/scripts/start.js

在其中搜索下面的行，并将端口号更改为所需的端口

 var DEFAULT_PORT = process.env.PORT || *4000*;

而且你很好。

.env除了在主目录中创建名称外的文件，package.json然后将PORT变量设置为所需的端口号。

例如：

.env

PORT=4200

只需更新一下webpack.config.js：

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

然后npm start再次运行。

在您的中package.json，转到脚本并使用--port 4000或set PORT=4000，如以下示例所示：

package.json （视窗）：

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json （Ubuntu）：

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

在Windows和Linux上均可使用

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

但是您可能更喜欢使用在其中写入PORT = 3006的方式来创建.env

在我的package.json文件中"start": "export PORT=3001 && react-scripts start"进行更改也对我有用，并且我在macOS 10.13.4上

总而言之，我们有三种方法可以完成此任务：

1. 设置一个名为“ PORT”的环境变量
2. 修改package.json的“脚本”部分下的“开始”键
3. 创建一个.env文件，并将PORT配置放入其中

最可移植的将是最后一种方法。但是，正如其他发布者所述，请将.env添加到.gitignore中，以免将配置上传到公共源存储库。

更多详细信息：本文

您可以在启动应用程序时找到默认端口配置

yourapp / scripts / start.js

向下滚动并将端口更改为所需的端口

const DEFAULT_PORT = parseInt（process.env.PORT，10）|| 4000;

希望这可以对您有所帮助;）

试试这个：

npm start port=30022

能够将除以外的其他端口指定3000为命令行参数或环境变量会很好。

现在，这个过程非常复杂：

1. 跑 npm run eject
2. 等待那完成
3. 编辑scripts/start.js和查找/替换3000您要使用的任何端口
4. 编辑config/webpack.config.dev.js并执行相同的操作
5. npm start

在Windows中，可以通过两种方式完成。

1. 在“ \ node_modules \ react-scripts \ scripts \ start.js”下，搜索“ DEFAULT_PORT”并添加所需的端口号。

   例如：const DEFAULT_PORT = parseInt（process.env.PORT，10）|| 9999;

2. 在package.json中，执行以下行。“ start”：“ set PORT = 9999 && react-scripts start”然后使用NPM start启动应用程序。它将在9999端口启动应用程序。

无需更改应用程序代码或环境文件中的任何内容，如何在调用命令时给出端口号？这样就可以从几个不同的端口运行和提供相同的代码库。

喜欢：

$ export PORT=4000 && npm start

您可以将所需的端口号替换为4000上面的示例值。

如果已经完成npm run eject，请转至scripts / start.js并将port in const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;（在本例中为3000）更改为所需的任何端口。

在React-App上更改默认端口

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

转到此行：

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

用您的端口号更改端口号

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

例如：

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

保存并退出