如何使用节点后端构建一个使用 react 构建的独立桌面应用程序，并将前端和后端都包装在电子中作为桌面应用程序？

Question

作为标题，我目前所有 3 个部分都是单独完成的。我有一个反应应用程序、节点/快递服务器和一个电子包装反应应用程序。

我的目标是将 react 应用程序和节点服务器包装在 Electron 中。 react 应用程序在 localhost:3000 上运行，节点在 localhost:8080 上运行，所以我不确定 localhost 部分将如何工作。

我现在的工作是当我在 dev 中单独运行 react 应用程序和节点服务器，然后在电子中像这样打开 mainWindow，然后它就可以工作了。

  mainWindow = new BrowserWindow({ 
    width: 1100, 
    height: 1000, 
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    }
  });
  mainWindow.loadURL("localhost:3000");

我还在 build 文件夹中构建了 react 应用程序，当使用 nginx 服务器为其提供服务时，react 构建很好。但是当我将 startUrl 更改为此 index.html 显示一个空白屏幕。我还注意到，如果我在 chrome 中打开 index.html，它是相同的空白屏幕，因此它仅在有服务器提供服务时才有效。

  const startUrl = url.format({
pathname: path.join(__dirname, '../build/index.html'),
protocol: 'file:',
slashes: true,
  });
  console.log(startUrl)
  
  mainWindow = new BrowserWindow({ 
width: 1100, 
height: 1000, 
webPreferences: {
  nodeIntegration: true,
  webSecurity: false
}
  });
  mainWindow.loadURL(startUrl);

创建这个独立应用程序我应该做的任何一般指导或步骤，或者这是否可能？

这是我运行生产版本时的 index.html。它似乎拥有反应应用程序应具备的一切，但它是一个空白屏幕

Answer 1

我想出了解决办法。当使用 react 包装电子时，react 应用程序必须使用 hashRouter 而不是 browserRouter。有关详细信息，请查看我的另一个问题： How to use React HashRouter for route query parameters?

然后包装节点服务器，将节点服务器文件夹作为依赖项放在 React app 文件夹的 package.json 中。然后运行 ​​npm install 将其安装为依赖项。然后在电子的启动文件中要求节点服务器的主启动文件，这将启动服务器。

Answer 2

哇。这当然看起来很有趣。

您可以构建 react 应用程序，然后将 Electron 包裹在其周围，而不是运行 react 服务器。如果您使用的是 create-react-app 样板，yarn build 应该可以解决问题。

您需要确保构建路径正确。这就是为什么您构建的 react 应用在 Electron 中为空的原因。

所以，所有变量都从index.html 正确调用。您可以通过在package.json 中指定"homepage":"./" 来实现此功能。您必须找出绝对参考的电子路径。或者您可以为构建目录中的所有文件打开一个static 端点。你必须弄清楚这一点。我从未与 Electron 合作过。 检查这个。这里它说“主页”：“。/”应该可以工作。 https://medium.com/@brockhoff/using-electron-with-react-the-basics-e93f9761f86f

至于节点服务器，我确信您必须调用您编写的 API 端点。如果没有，您可以使用本机 Javascript 来执行此操作。我个人更喜欢使用 axios。

import axios from 'axios';

async componentWillMount(){
    const result = await axios.get(localhost:8080/get)
    console.log(result)
    // You can now directly display result on the react app or save it save. 
    this.setState({result:result})
}

Axios 包：https://www.npmjs.com/package/axios