在WebStorm中配置React+Node Express全栈项目端口的方法

没问题，我经常在WebStorm里这么搞全栈项目，给你一步步说清楚怎么实现：

第一步：调整package.json的脚本命令 #

既然不能只用一个start脚本，咱们给前后端分别设置独立的命令就行。打开项目根目录的package.json，把scripts改成这样：

"scripts": {
  "dev:client": "parcel client/index.html", // 前端React服务，Parcel默认跑1234端口
  "dev:server": "node server/app.js", // 后端Express服务
  "start": "concurrently \"npm run dev:client\" \"npm run dev:server\"" // 可选：一键启动两个服务
}

注意几个细节：

• 非常推荐把前后端代码放在不同子目录（比如client/和server/），这样项目结构更清晰，脚本里的文件路径要对应上。
• Express这边，一定要在app.js里指定端口3000：

  app.listen(3000, () => {
    console.log('Express server running on http://localhost:3000');
  });
  

• 如果想修改Parcel的端口（比如默认不是1234），可以加--port参数：parcel client/index.html --port 1234

第二步：在WebStorm里配置独立的启动项 #

接下来配置WebStorm的Run/Debug Configurations，让你可以单独启动前端或后端：

1. 点击WebStorm右上角的运行配置下拉框，选择「Edit Configurations...」
2. 点击左上角的+号，选择「npm」
3. 配置前端启动项：
   • Name：随便起，比如「React Client」
   • Script：选择dev:client
   • Working directory：如果前端在client/子目录，就选这个目录；如果是根目录直接放前端代码，就保持默认
4. 再新建一个npm配置，用来启动后端：
   • Name：比如「Express Server」
   • Script：选择dev:server
   • Working directory：对应后端代码所在的server/目录

配置完之后，你就可以在右上角分别选择「React Client」或「Express Server」点击运行，它们会各自在1234和3000端口启动，互不干扰。

第三步：可选——一键同时启动前后端 #

如果不想每次手动启动两个服务，可以用concurrently包来同时运行两个脚本：

1. 先安装依赖：

   npm install --save-dev concurrently
   

2. 就是咱们第一步里加的start脚本，现在直接在WebStorm里配一个npm启动项选择start，或者在终端里跑npm start，就能同时启动前后端服务了，控制台会分开显示两个服务的日志。

这样整个项目就可以在同一个WebStorm窗口里开发，前后端各占一个端口，调试起来也方便～

内容的提问来源于stack exchange，提问作者ALEXANDER SL