在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應用程序）

回答

相關問題