create-React-App npm Ausführen des Befehls "build"

Bei der Ausführung von npm run build scheint der Prozess jedoch korrekt auszuführen (erstellt einen Build-Ordner, der die gebündelte js-Datei und die Datei html.index enthält). Wenn ich jedoch die index.html in meinem Browser öffne, wird nichts angezeigt. Was vermisse ich?

Wenn Sie npm run build ausführen, werden die entsprechenden Anweisungen gedruckt:

Sie können index.html nicht einfach öffnen, da es sich dabei um Server mit einem statischen Dateiserver handeln soll.
Dies liegt daran, dass die meisten React-Apps clientseitiges Routing verwenden und dies mit file://-URLs nicht möglich ist.

In der Produktion können Sie Nginx, Apache, Node (z. B. Express) oder einen beliebigen anderen Server für statische Assets verwenden. Stellen Sie nur sicher, dass Sie, wenn Sie clientseitiges Routing verwenden, index.html für unbekannte Anforderungen wie /* und nicht nur für / verwenden.

In der Entwicklung können Sie dazu pushstate-server verwenden. Es funktioniert gut mit clientseitigem Routing. Genau das schlagen die gedruckten Anweisungen vor.

Ich habe auch versucht, es auf einen Remote-Server hochzuladen, und als ich zur URL ging, kam der Browser mit Forbidden zurück: Sie haben keine Berechtigung, auf/auf diesem Server zuzugreifen.

Sie müssen den Inhalt des build-Ordners hochladen, nicht den build-Ordner selbst. Andernfalls kann der Server Ihren index.html nicht finden, da er sich in build/index.html befindet und daher fehlschlägt. Wenn Ihr Server keinen index.html der obersten Ebene erkennt, schlagen Sie in der Dokumentation zum Server nach, wie Sie standardmäßig Dateien konfigurieren.

Hier können Sie dieses Problem auf zwei verschiedene Arten lösen.

1. Ändern Sie den Routing-Verlauf anstelle von browserHistory in "hashHistory" 

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

Erstellen Sie nun die App mit dem Befehl 

Sudo npm run build

Dann legen Sie den Build-Ordner in Ihren var/www/-Ordner. Nun funktioniert die Anwendung mit dem Hinzufügen des # -Tags in jeder URL. mögen 

localhost/#/home localhost/#/aboutus

Lösung 2: Ohne # tag mit browserHistory,

Legen Sie in Ihrem Router Ihr history = {browserHistory} fest. Erstellen Sie es jetzt mit Sudo npm run build.

Sie müssen die "conf" -Datei erstellen, um die nicht gefundene 404-Seite zu lösen. Die -Datei sollte so aussehen.

Öffnen Sie Ihr Terminal mit den folgenden Befehlen 

cd /etc/Apache2/sites-availablelsnano sample.conf Fügen Sie den folgenden Inhalt hinzu.

 <VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${Apache_LOG_DIR}/error.log
    CustomLog ${Apache_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Jetzt müssen Sie die Datei sample.conf mit dem folgenden Befehl aktivieren

cd /etc/Apache2/sites-available
Sudo a2ensite sample.conf

anschließend werden Sie aufgefordert, den Apache-Server mithilfe von .__ neu zu laden. Sudo-Dienst Apache2 neu laden oder neu starten

Öffnen Sie dann den Ordner localhost/build und fügen Sie die .htaccess-Datei mit dem folgenden Inhalt hinzu.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Jetzt funktioniert die App normal.

Hinweis: Ändern Sie 0.0.0.0 in Ihre lokale IP-Adresse.

Ich hoffe es ist hilfreich für andere.

Die Erweiterung "Web Server for Chrome" ist sehr einfach zu bedienen. Installieren Sie es und stellen Sie das Verzeichnis auf ~/my-react-app/build /.

Ich habe versucht, den gleichen Befehl auszuführen und zu reagieren, dass die App auch weißen Bildschirm zeigte. Die js -Datei nahm den relativen Pfad zur Datei und zeigte eine Fehlermeldung an, wenn ich die js-Datei in einem neuen Browser öffne. Ich mache es zum absoluten Pfad und es funktioniert gut.

sie können den Produktions-Build nicht ausführen, indem Sie auf index.html klicken. Sie müssen Ihr Skript wie folgt ändern.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

nachdem Sie npm run-script build ausgeführt haben, führen Sie npm run-script deploy aus. Sie werden Folgendes erhalten: Hier können Sie Ihren Produktions-Build laden.

npm install -g dient vor dem Ausführen von npm run-script deploy.

1. cd in Ihren Build-Ordner,
2. python -m SimpleHTTPServer 8080, um einen Server an Port 8080 zu starten,
3. gehen Sie in Ihrem Browser zur Adresse localhost:8080/index.html.

https://www.taniarascia.com/getting-started-with-react/ und Das endgültige Skript finden Sie auf dem GitHub.

npm run build -> erstellt einen Ordner, der die index.html und den statischen Ordner enthält. Durch einfaches Klicken auf die index.html wird auf der Registerkarte eines neuen Browsers geöffnet. Es werden aber nur leere Seiten angezeigt. Warum? weil es einen Server braucht, damit es funktioniert.

Lösung:

Verschieben Sie die Datei in einen anderen Ordner. Öffnen Sie den Ordner mit VC Code. Öffnen Sie die index.html und klicken Sie mit der rechten Maustaste -> wählen Sie: Open with live server. In Ihrem Browser werden neue Registerkarten mit der zugehörigen IP-Adresse und dem zugehörigen Port geöffnet.

Oder Sie können es auf localhost mit xampp ausführen:

Öffnen Sie den XAMPP-Server. Platziere es auf localhost. Und es muss funktionieren.

Nachdem Sie Ihre Anwendung über create-react-appcreate -react-app erstellt haben

Ausführen des Befehls npm run build Danach Ausführen des Befehls npm install -g serve und schließlich serve -s build 

Weitere Informationen finden Sie hier create -react-app-deploying

öffnen Sie die Datei index.html. Scrolle in der Nähe des Endes und du wirst sehen

<script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>

fügen Sie einfach einen Punkt vor dem Attribut two src hinzu:

<script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>

auch wenn Sie Stile haben, müssen Sie am Anfang scrollen, wo Sie sehen werden:

<link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

und platzieren Sie auch einen Punkt vor dem href-Attribut

<link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">

HINWEIS: Der Dateiname kann/wird für Sie nicht derselbe sein

stellen Sie auch sicher, dass Sie dies wieder ändern, wenn Sie einen Server verwenden oder npm run build erneut ausführen (ich habe keine Ahnung, was passiert, wenn Sie dies nicht tun).