Create React App – Pfade zu den statischen Dateien korrigieren

Was man machen kann, wenn im Build einer Create-React-App die Pfade zu den statischen Dateien nicht gefunden werden, zeigen wir in diesem Beitrag.

Create React App ist ein sehr nützliches Tool für den schnellen Start von React Apps, denn man braucht keine Zeit mit dem Einrichten von Webpack, Babel und weiteren Tools zu verbringen, da alles bereits vorbereitet ist. Ein paar Fallstricke kann es aber trotzdem geben.

Im Build werden die Pfade zu den Javascript- und CSS-Dateien nicht gefunden

Normalerweise muss man beim Bauen mittels „npm build“ nichts weiter beachten, das funktioniert sehr bequem. Manchmal bekommt man nach dem Deploy auf den Webserver vom Browser aber die Meldung, dass Dateien nicht gefunden wurden. Das liegt daran, dass standardmäßig die Pfade beim Bauen so gesetzt werden, dass sie auf die Domain zeigen.

Beispiel:

Standardmäßig zeigen die Pfade zu den statischen Dateien aber auf

Möchte ich meine Anwendung aber unter http://meine-domain.de/meine-app/ laufen lassen, werden die Dateien nicht gefunden. Die Pfade müssten folgendermaßen aussehen:

Lösung

Um das zu lösen muss man die package.json anpassen. Dort muss man einen Eintrag „Hompage“ setzen und den Wert entsprechend auf den korrekten Pfad setzten.
In unserem Fall müsste das so aussehen:

Quellen:

• https://github.com/facebookincubator/create-react-app/issues/2842