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

Question

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

在这种情况下,如何指定我选择的端口？我想同时运行这个项目中的两个(用于测试),一个在端口3005,另一个在3006

Answer 1

如果您不想设置环境变量,另一个选项是修改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"

由于我的答案的流行而更新:目前我更喜欢使用保存在.env文件中的环境变量(用于以deploy方便和可读的形式存储不同配置的变量集).不要忘记添加*.env到.gitignore如果你还在存储你的秘密.env文件.以下是为什么在大多数情况下使用环境变量更好的原因.这里解释为什么在环境中存储秘密是个坏主意.

Answer 2

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

在项目根目录下创建.env文件并在那里指定端口号.喜欢:

PORT = 3005

Answer 3

.env此外package.json，在主目录中创建一个具有名称的文件，并将PORT变量设置为所需的端口号。

例如：

.env

PORT=4200

您可以在此处找到此操作的文档：https : //create-react-app.dev/docs/advanced-configuration

Answer 4

方法一

在项目根文件夹中创建 .env 文件

像这样设置

PORT=3005

方法二

在package.json中

set PORT=3006 && react-scripts start

Answer 5

对于windows，可以直接在cmd上运行此命令

set PORT=3001 && npm start

Answer 6

这适用于 Windows 和 Linux（不适用于 Mac）

包.json

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

但您可能更喜欢创建 .env 并在其中写入 PORT=3006

Answer 7

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

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

Answer 8

您可以修改package.json中的脚本：

-在 MacO 上：

"scripts": {
     "start": "PORT=9002 react-scripts start",
     "build": "react-scripts build",
     ...     
}

-在 Windows 上

  "scripts": {
      "start": "set PORT=9002 && react-scripts start",
      "build": "react-scripts build",
      ...
}

Answer 9

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

package.json （视窗）：

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

package.json （乌班图）：

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

Answer 10

您可以使用cross-env来设置端口,它可以在Windows,Linux和Mac上运行.

yarn add -D cross-env

然后在package.json中,start链接可能是这样的:

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

Answer 11

这适用于 Linux Elementary OS

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

Answer 12

为什么不只是

PORT=3030 npm run start

Answer 13

要指定一个端口来运行基于 Create React App (CRA) 的项目，您可以使用 PORT 环境变量。默认情况下，CRA 使用端口 3000，但您可以使用自定义端口号覆盖它。您可以这样做：

1. 打开终端或命令提示符
2. 导航到 CRA 项目的根目录。
3. 将 PORT 环境变量设置为所需的端口号。例如，要在端口 8000 上运行，可以使用以下命令：

在 macOS/Linux 上：

PORT=8000 npm start

在 Windows 上（命令提示符）

set PORT=8000 && npm start

在 Windows 上（PowerShell）：

$env:PORT = 8000; npm start

此命令在执行 npm start 命令之前将 PORT 环境变量设置为 8000，该命令启动开发服务器。

Answer 14

很多答案都没有提到Windows的一个关键部分。对我来说，在 Windows 中的指定端口中运行 React 应用程序的方法是使用以下命令。您可以从下面的示例中更改端口号。不要忘记使用&&。

set PORT=4200 && react-scripts start

Answer 15

对于我的 Windows 人员，我发现了一种更改 ReactJS 端口以在您想要的任何端口上运行的方法。在运行服务器之前转到

 node_modules/react-scripts/scripts/start.js

在其中，搜索下面的行并将端口号更改为您想要的端口

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

你很高兴去。

Answer 16

只需运行以下命令

PORT=3001 npm start

Answer 17

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

yourapp/scripts/start.js

向下滚动并将端口更改为您想要的端口

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4000；

希望这可以帮助你；）

Answer 18

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

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

然后npm start再次运行。

Answer 19

在调用命令时提供端口号而不需要更改应用程序代码或环境文件中的任何内容怎么样？这样就可以从多个不同的端口运行和服务相同的代码库。

喜欢：

$ export PORT=4000 && npm start

您可以用您喜欢的端口号代替4000上面的示例值。

您也可以在package.json 脚本中使用相同的表达式。

喜欢：

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

但对于后一个，您将需要更改package.json，但是，对于前一个，除了从命令行调用时的端口值外，您不会更改任何内容。

Answer 20

可以在 package.json 中通过定义端口号来指定 Port：

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

或者可以在终端中运行脚本时指定端口：

PORT=3003 npm start