Gibt es eine Möglichkeit, Firebase-Hosting zum React-Projekt hinzuzufügen, das Webpack verwendet? Insbesondere versuche ich, es zu Ссылка
hinzuzufügenDies ist meine firebase.json-Datei
%Vor% Wenn ich firebase serve aufruft, ist die Seite leer. Wenn ich jedoch npm start verwende, funktioniert die App korrekt. Daher wird der JS / React-Code nicht in die index.html, die
Ich verwende die create-react-App Paket, um meine reaktive App zu erstellen. Rufen Sie den Befehl "npm run build" auf. Dies erzeugt ein "Build" -Verzeichnis, das die Webpack-Ausgabe enthält. Zeigen Sie stattdessen in Ihrer firebase.json-Datei auf das Verzeichnis "build". Führen Sie dann den Befehl "fireBase serve" oder "fireBase deploy" aus.
%Vor%In Ihrem speziellen Fall, wenn Sie eine Demo / Raw / Boiler-Plate-Indexdatei haben, von der ich annehme, dass sie sich im Verzeichnis "/ app /" befindet. Sie können dies durch Ihre ursprüngliche Anwendung ersetzen index.html und Sie sind fertig.
Tipp 1: Wenn Sie die Anwendung auf Firebase bereitstellen und versuchen, auf die Anwendung browser (insbesondere React, Redux ) zuzugreifen, erhalten Sie möglicherweise eine Fehlermeldung mit folgendem Wortlaut:
%Vor%So wie in der Antwort erwähnt, ist es muss, und danach müssen Sie den Befehl ausführen:
%Vor% Dieser Befehl wird die bundle.js neu generieren und das "run" Modul, das wir während der Entwicklung verwendet haben, nicht enthalten / benötigen. Danach können Sie die neueste bundle.js auf dem Server bereitstellen. Tipp 2: Im webpack.config Abschnitt output:{...} sollten Sie path und festlegen publicPath in ein neues Verzeichnis, zB / public / . Anderenfalls auf dem Firebase -Host, wenn Sie das public-Verzeichnis als Standardverzeichnis für die Bereitstellung angegeben haben - dann wird ein Problem verursacht und die Anwendung wird nicht auf dem Firebase-Server ausgeführt.
Hinweis: Ich bin mir eigentlich nicht sicher und weiß nicht, wie ich Firebase anweisen soll, Dateien auf meinem root und nicht in meinem "public" -Ordner zu verwenden
Aber ich denke, dass das Ausgeben der vom Webpack generierten Dateien und das Speichern anderer öffentlicher Dateien ( css, html ) im öffentlichen Ordner gut ist, da andernfalls fire base deploy andere Dateien hochladen kann, die sich ebenfalls im Stammverzeichnis befinden. (korrigiere mich, wenn ich falsch liege).
Ok, wenn Sie also die webpack.config -Ausgabewerte aktualisiert haben, wie folgt:
output: {
path: __dirname+ '/public',
publicPath: '/public/',
filename: 'bundle.js'
}
Dann (stellen Sie sicher, dass Sie auch mit Tip.1 fertig sind) und führen Sie den Befehl aus, um die neueste bundle.js
zu erhalten %Vor%. Und schließlich können Sie mit der folgenden Methode loslegen:can not find module "run" in bundle.jsIch glaube, Sie haben die ersten Schritte zum Initiieren von
firebase login und anderen init-Befehlen ausgeführt, bevor Sie den letzten deploy-Befehl ausführen.
Hinweis: Der Befehl "firebase serve" ist auch hilfreich, um zu debuggen und zu testen, ob die Anwendung auf dem lokalen Computer gut läuft, und dann auch auf dem Live-Firebase-Server.
Ich hatte das gleiche Problem. @Caritos hat es richtig gemacht. Ich habe jedoch zusätzliche Probleme gefunden.
1) Ich musste der HTML-Datei Code hinzufügen:
%Vor%2) Dieses Link-Tag wurde im npm-Build-Verzeichnis nicht korrekt erstellt, da es nicht selbstschließend war:
falsch:
%Vor%richtig:
%Vor%Sobald ich das Link-Tag geschlossen habe, wird meine React-App bereitgestellt.
Tags und Links firebase reactjs firebase-hosting reactfire