如何同时启动我的 Node 服务器和 React 应用程序？

Question

我使用Express创建了一个API，想在我的前端服务器中使用它，但问题是我的API必须在服务器上不断运行才能正常工作。然而，我无法同时运行React应用程序和API。因此，我的问题是如何同时启动React服务器和API？

P.S. 我尝试过concurrently，但不知道如何让它工作，这里是我 package.json 的一些示例代码：

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@material-ui/core": "^4.1.1",
    "@material-ui/icons": "^4.2.0",
    "axios": "^0.19.0",
    "concurrently": "^4.1.0",
    "express": "^4.17.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
     "scripts": {
     "start": "node src/connection",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "react": "react-scripts start",
     "dev": "concurrently \"npm start\" \"npm react\""
     },
     "proxy": "http://localhost:3000",
    "eslintConfig": {
    "extends": "react-app"
    },
    "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
 }
}

- martha1352

---

可能是如何并行运行多个npm脚本？的重复问题。 - Will Jenkins

Answer 1

在5个步骤中：

1. 安装 npm i --s concurrently 包。 2. 在Node/server/backend's的 package.json 文件中添加以下脚本。

    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client" 

3. 确保您为客户端和服务器提供了正确的路径
4. 运行 'npm run dev'
5. 微笑

- Aamer

Answer 2

安装npm-run-all包，它可以帮助你执行多个脚本。 你可以参考下面的链接：

https://www.npmjs.com/package/npm-run-all

安装此软件包后，您需要在package.json文件中添加此脚本，例如：

"scripts": {    
  "start-js": "react-scripts start",
  "backend-start": "NODE_ENV=production node node_api/server.js",
  "start": "concurrently \"npm-run-all -p backend-start start-js\"",
  "build": "npm-run-all build-css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

在这里，当您运行命令“npm start”时，它首先运行“backend-start”脚本，启动后端服务器，然后启动React。

只需更改“backend-start”脚本中的路径。 将“node_api/server.js”替换为您的节点启动文件的路径。

- Dhvani

Answer 3

同时运行的一个可能解决方案是：

1. 首先，您需要将代理更改为5000

   "proxy": "http://localhost:5000",

2. 确保文件夹结构如下所示： 类似这样

3. 在后端（外部）package.json中使用concurrently：

"scripts": {

"start": "node backend/server.js",

"client": "npm start --prefix frontend",

"dev": "concurrently "npm run start" "npm run client""}

- Sri Krishna Chowdary

Answer 4

1. 在后端安装npm concurrently 包

2. 在后端的package.json文件中添加以下脚本

   "start": "node server.js",
   "server": "nodemon server.js",
   "frontend": "cd ./frontend && npm run dev",
   "dev": "concurrently \"npm run server\" \"npm run frontend\""
   

3. 确保您提供了客户端和服务器的正确路径

   将 "proxy": "localhost:5000" 添加为代理到您的React应用程序的package.json文件中。假设您的Node.js应用程序正在端口5000上运行。

4. 从后端根目录运行 'npm run dev'

- JustAG33K

Answer 5

npm-run-all 包将帮助您完成此任务。

在 Create React App 的 package.json 中有一个选项，可以将非 text/html 请求代理到另一个后端。您可以使用此功能将代理到其他地方运行的应用程序，使用此功能，您将能够在 React 项目本身中运行服务器。

将以下行添加到 package.json 文件中："proxy": "http://localhost:3001",

将 scripts 部分修改如下：

    "scripts": {
    "start": "react-scripts start",
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

最终你的 package.json 文件将会是这个样子。

{
          "name": "frontend_backend",
          "version": "0.1.0",
          "private": true,
          "dependencies": {
            "@testing-library/jest-dom": "^5.11.8",
            "@testing-library/react": "^11.2.2",
            "@testing-library/user-event": "^12.6.0",
            "nodemon": "^2.0.6",
            "npm-run-all": "^4.1.5",
            "react": "^17.0.1",
            "react-dom": "^17.0.1",
            "react-scripts": "4.0.1",
            "web-vitals": "^0.2.4"
          },
          "proxy": "http://localhost:3001",
          "scripts": {
            "start": "react-scripts start",
            "server": "node-env-run server --exec nodemon",
            "dev": "run-p server start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject"
          },
          "eslintConfig": {
            "extends": [
              "react-app",
              "react-app/jest"
            ]
          },
          "browserslist": {
            "production": [
              ">0.2%",
              "not dead",
              "not op_mini all"
            ],
            "development": [
              "last 1 chrome version",
              "last 1 firefox version",
              "last 1 safari version"
            ]
          }
        } 

现在，使用npm run dev来运行应用程序。（您可以将'dev'更改为任何您想要的内容，例如："app": "run-p server start"，然后使用npm run app命令来运行应用程序）

- Ishara Kularatna

---

太棒了！感谢您提供这个解决方案！ - incarnate