So stellen Sie eine React-App in einem Unterverzeichnis bereit

In den letzten Monaten habe ich an einer Prototyp-App gearbeitet, die mit der React- JavaScript-Bibliothek erstellt wurde. Es hat viel Spaß gemacht und ich freue mich immer wieder über die Herausforderung, etwas ganz Neues zu lernen!

Ich habe die App so weit gebracht, dass ich meinen Teamkollegen meine Fortschritte zeigen wollte, um Feedback zur Benutzerfreundlichkeit und Zugänglichkeit der App zu erhalten. Dazu musste ich den Produktions-Build der App in einem Unterverzeichnis auf unserem Webserver bereitstellen.

Nach der ersten Bereitstellung habe ich die App in meinen Browser geladen, nur um einen völlig leeren Bildschirm zu sehen! Was war hier los? Ich bin schnell zu Google gesprungen, um mir dabei zu helfen, das herauszufinden.

Hinweis: Dieser Beitrag geht davon aus, dass Sie create-react-app und react-router v4+ verwenden.

Nach ein wenig Suchen und Lesen einiger Dokumente konnte ich die Dinge zum Laufen bringen! Hier ist, was ich gefunden habe, das Ihnen, lieber Leser, hoffentlich helfen wird, Ihre eigene React-App in einem Unterverzeichnis zum Laufen zu bringen! 🚀

1. Legen Sie den Basisnamen fest

Das Setzen des basename Attributs in der <Router /> -Komponente teilt React Router mit, dass die App aus einem Unterverzeichnis bereitgestellt wird.

 <Router basename={'/directory-name'}> <Route path='/' component={Home} /> {/* … */} </Router>

Lesen Sie mehr über die Verwendung des basename -Attributs auf ReactTraining.com .

2. Legen Sie die App-Homepage fest

In Ihrer Datei package.json befindet sich eine Eigenschaft namens homepage . Der Befehl npm run build , der mit create``-``react-``app verwendet diese Eigenschaft, um sicherzustellen, dass der Produktions-Build auf den richtigen Speicherort verweist.

 "homepage" : "https://myapp.com/directory-name" ,

Lesen Sie mehr über die Verwendung der homepage -Eigenschaft von Create React App .

3. Aktualisieren Sie die Routen

Sie können auch den in der oben besprochenen homepage -Eigenschaft festgelegten Wert in Ihrem JSX verwenden. Dieser Wert wird zur Erstellungszeit in der Variable process.env.PUBLIC_URL .

Beispielsweise musste ich die Routen in meiner App aktualisieren, um das Unterverzeichnis in der Produktion zu verwenden, indem ich die folgenden Änderungen vornahm:

 <Router basename={'/subdirectory'}> <Route path={`${process.env.PUBLIC_URL}/`} component={Home} /> <Route path={`${process.env.PUBLIC_URL}/news`} component={News} /> <Route path={`${process.env.PUBLIC_URL}/about`} component={About} /> </Router>

Hinweis: Dies wirkt sich nicht auf die lokale Entwicklung aus, sodass Sie es sicher sofort zu Ihrem Projekt hinzufügen können!

Nachdem ich die oben genannten Änderungen vorgenommen hatte, wurde mir nach einem neuen Build + Deploy der Startbildschirm angezeigt. Fortschritt! Allerdings ist mir aufgefallen, dass meine <Link/> s immer noch auf den Domänenstamm verweisen…

4. Aktualisieren Sie die Links

Über die App verteilt waren einige <Link/> -Komponenten, die ich verwendet habe, um von „Seite“ zu „Seite“ zu verlinken. Diese benötigten auch die gleiche Behandlung wie die <Route/> -Komponenten:

 <Link to={`${process.env.PUBLIC_URL}/page-path`}>…</Link>

Mit all diesen Änderungen in meiner App konnte ich npm run build noch einmal ausführen und die Änderungen auf dem Server bereitstellen. Zu diesem Zeitpunkt war meine App einsatzbereit 💯 ohne Probleme! 😀

Ich hoffe, diese Hinweise helfen Ihnen dabei, Ihre React-App in einem Unterverzeichnis zum Laufen zu bringen!

Habe ich irgendetwas vergessen, von dem Sie wissen, dass es den Prozess erleichtern würde? Haben Sie Tipps zum Festlegen des Unterverzeichnispfads, ohne all diese zusätzlichen Aktualisierungen vorzunehmen? Bitte lassen Sie es mich wissen, da ich React noch lerne! 🙌

Fröhliches Hacken! 💻😄💖