Serving statische Dateien in Electron (React app)

Question

Ich arbeite an einem Projekt, wo ich eine Desktop-App in Electron bauen muss. Die meisten Funktionen werden in React integriert, aber es wird einen Teil geben, wo wir ein statisches HTML-Magazin von Drittanbietern integrieren müssen. Ich brauche einen Rat, wie man das macht. Ich baue derzeit eine Proof-of-Concept-App, und ich habe es auf dieser https://github.com/chentsulin/electron-react-boilerplate

wie würde ich das auf/statische/I-Server statische HTML-Dateien hinzufügen. Ich weiß, ich könnte es in Express machen, aber ich möchte wirklich nicht das gesamte Express-Framework nur für die Bereitstellung von statischen Dateien enthalten.

Ich habe mir das https://www.npmjs.com/package/serve-static angesehen aber habe keine Ahnung wie man es in meine react App integriert und es in die Elektronen App einbindet.

Answer 1

In Ihrer Hauptdatei haben Sie

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

Hier können Sie den Server starten, wie Sie ohne express oder serve-static wir nur

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

Answer 2

Ich fand eine andere Lösung in node.js tun würde müssen Elektron eingebautes interceptFileProtocol() cusomize, um statischen Inhalt zu dienen.

-Code: (main.js)

(ich die electron-quick-start als Electron Vorlage verwenden)

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() 
}) 

Referenz: protocol.interceptFileProtocol()

Explaination:

• Normalerweise, wenn Sie React App als normale Website ausführen, sollten alle statischen Inhalte von HTTP [GET] Methode bedient werden. Obwohl sie relative Pfade verwenden, kümmert sich Ihr HTTP-Server um die Pfadanalyse.

• Allerdings, wenn unter Electron läuft, ändern sich die Dinge.

• Ihre statischen Inhalte verwenden in der Regel relativen Pfad wie ./picture.jpg wird Electron file Protokoll statt HTTP-Protokoll verwenden, und die Datei unter Root-Pfad wie C://.// finden. So werden statische Inhalte wie ./picture.jpg nicht korrekt geladen.

• Durch Anpassen von interceptFileProtocol() werden alle Anforderungen für statische Inhalte auf Ihr Arbeitsverzeichnis und nicht auf das Stammverzeichnis von Windows (oder eines anderen Betriebssystems) verwiesen.

Schließlich bin ich mir nicht sicher, ob es eine gute Lösung für alle Electron Projekte ist, aber wenn Sie bereits ein React Projekt (oder ein anderes SPA) und wollen es mit Electron wickelt, diese Lösung wäre gut zu benutzen.