在Electron中提供静态文件（React应用程序）

我正在研究一个需要在Electron中构建桌面应用程序的项目。大部分功能将以React为基础构建，但是我们需要集成第三方静态HTML杂志。我需要一些关于如何做到这一点的建议。我正在构建一个概念验证应用程序，我已经基于此https://github.com/chentsulin/electron-react-boilerplate 在Electron中提供静态文件（React应用程序）

我将如何添加/ static/I服务器静态HTML文件。我知道我可以用express来做，但我真的不希望仅仅为了提供静态文件而包含整个express框架。

我在看这个https://www.npmjs.com/package/serve-static，但没有想法如何将它集成到我的反应应用程序中，并将其捆绑到电子应用程序中。

来源

2016-07-05 Ales Maticic

在你的主文件必须

const app = require("app") 
app.on("ready",() => { 
    ...

在这里，您可以启动服务器，就像您在node.js中

const serveStatic = require('serve-static') 
    // or 
    const express = require('express') 
    ... 
}

来源

2016-07-05 14:13:04 Julian

我找到了另一种解决方案，而无需使用express或serve-static，只有我们做需要定制Electron内置interceptFileProtocol()来提供静态内容。

代码：（main.js）

（我用的是electron-quick-start为电子模板）

function createWindow() { 
    window = new BrowserWindow({ width: 800, height: 600 }) 
    window.loadURL(url.format({ 
    pathname: 'index.html', /* Attention here: origin is path.join(__dirname, 'index.html') */ 
    protocol: 'file', 
    slashes: true 
    })) 

    window.on('closed',() => { 
    window = null 
    }) 
} 

app.on('ready',() => { 
    protocol.interceptFileProtocol('file', (request, callback) => { 
    const url = request.url.substr(7) /* all urls start with 'file://' */ 
    callback({ path: path.normalize(`${__dirname}/${url}`)}) 
    }, (err) => { 
    if (err) console.error('Failed to register protocol') 
    }) 
    createWindow() 
})

参考： protocol.interceptFileProtocol()

释：

通常，如果您将React应用程序作为普通网站运行，则应通过HTTP [GET]方法提供所有静态内容。虽然他们使用相对路径，但您的HTTP服务器将处理路径解析工作。
但是，在Electron下运行时，情况会改变。
你的静态内容通常使用像./picture.jpg相对路径，电子将使用file协议，而不是HTTP协议下找到根路径中的文件一样C://.//。因此，像./picture.jpg这样的静态内容将无法正确加载。
通过自定义interceptFileProtocol()，所有静态内容的请求将被指向您的工作目录而不是Windows（或其他操作系统）根目录。

最后，我不知道它是否是所有电子项目的一个很好的解决方案，但如果你已经有了一个React项目（或其他一些SPA），并希望与电子把它包起来，此解决方案将是罚款使用。

来源

2017-04-15 06:54:43 yeze322

这对我有用，但后来在索引index.html中使用相对路径时遇到了索引js文件的问题。通过使用'require（'electron'）。remote.app'获取应用程序路径，最终需要使用绝对路径。getAppPath（）' –

在Electron中提供静态文件（React应用程序）

回答

相关问题