在 WebStorm 中配置端口 - React + Node Express 应用程序

Posted

技术标签:

【中文标题】在 WebStorm 中配置端口 - React + Node Express 应用程序【英文标题】:Configure ports in WebStorm - React + Node Express app 【发布时间】:2019-10-16 03:00:29 【问题描述】:

我将使用 WebStorm IDE 进行全栈实现。我为此使用 react.js 和 node-express。我可以在单独的项目中做到这一点。但是我想知道如何在配置端口的同时在WebStorm项目中实现后端和前端。

在启动前端时,我们可以在"start": "parcel index.html" 下的 package.json 文件中提供启动 html 文件。启动后端时我们可以给"node app.js" 但是当我们在两个不同的项目中进行实现时可以这样做。

但是,如果我们同时做前端和后端,我该如何在两个不同的端口上启动 react 部分和 node-express 部分?例如: - 反应应用 > localhost:1234 - node-express > localhost:3000

"start": "parcel index.html"
"start": "node app.js"

//在package.json中我们只能设置一个start

【问题讨论】:

【参考方案1】:

您可以使用像npm-run-all 这样的包来实现这一点。安装它,然后在你的 package.json 中有两个单独的脚本(如 start-front-end 和 start-server),npm-run-all 运行这两个脚本,例如

"scripts": 
  "start-front-end": "parcel index.html --open",
  "start-server": "node app.js",
  "start": "npm-run-all start-server start-front-end",

【讨论】:

非常感谢。 @Tom 前两个可以分别运行和启动。但是当运行第 3 行而不运行第 2 行时,前端不会启动。 你能列出你的脚本块的内容吗?另外,每个单独命令的命令行输出是什么? "main": "server.js", "scripts": "start-server": "node server.js", "start-front-end": "parcel ./public/index.html --open", "start": "npm-run-all start-server start-front-end" , start-server > 如果我使用 WebStorm 的运行按钮单独运行它,这将启动后端。 start-front-end > 如果我使用 WebStorm 的运行按钮单独运行它,这将启动前端并在浏览器中打开 html 页面。 start > 这将只运行后端并且运行良好。但不允许启动前端或在终端中不生成前端 localhost 链接。即使我在浏览器中浏览网址也找不到页面。 这可能是一个 Webstorm 问题。您是否尝试过在普通终端中运行npm start

以上是关于在 WebStorm 中配置端口 - React + Node Express 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

webstorm断点调试React

WebStorm react-native 调试不起作用

如何使用 WebStorm 调试 NextJS React 应用程序?

webstorm 10 更改默认端口

webstorm运行到服务器(Apache)

ReactNative——WebStorm的基本配置