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

Question

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

我的目标是将 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 build 很好。但是当我将 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 应用程序，然后将 Electron 包裹在它周围，而不是运行 React 服务器。yarn build如果您使用 create-react-app 样板，应该可以解决问题。

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

因此，所有变量都正确地从index.html. 您可以通过"homepage":"./"在 中指定来实现此功能package.json。你必须找出 Electron 的绝对参考路径。或者，您可以static为构建目录中的所有文件打开一个端点。你必须弄清楚这一点。我从未与 Electron 合作过。检查一下。这里说“homepage”：“./”应该可以工作。 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