Comment déployer une application React dans un sous-répertoire

Depuis environ un mois, je travaille sur un prototype d'application construit avec la bibliothèque React JavaScript. Cela a été très amusant et j'aime toujours le défi d'apprendre quelque chose de complètement nouveau !

J'ai amené l'application à un point où je voulais montrer mes progrès à mes coéquipiers afin d'obtenir des commentaires sur la convivialité et l'accessibilité de l'application. Pour ce faire, j'ai dû déployer la version de production de l'application dans un sous-répertoire de notre serveur Web.

Après le déploiement initial, j'ai chargé l'application dans mon navigateur et j'ai rencontré un écran complètement vide ! Que se passait-il ici ? J'ai rapidement sauté sur Google pour m'aider à comprendre cela.

Remarque : Ce message suppose que vous utilisez create-react-app et react-router v4+.

Après un peu de recherche et de lecture de certains documents, j'ai pu mettre les choses en marche ! Voici ce que j'ai trouvé qui, espérons-le, vous aidera, cher lecteur, à mettre en place votre propre application React dans un sous-répertoire ! 🚀

1. Définir le nom de base

La définition de l'attribut basename sur le composant <Router /> indique à React Router que l'application sera servie à partir d'un sous-répertoire.

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

En savoir plus sur l'utilisation de l'attribut basename sur ReactTraining.com .

2. Définir la page d'accueil de l'application

Dans votre fichier package.json se trouve une propriété appelée homepage . La commande npm run build fournie avec create``-``react-``app utilise cette propriété afin de s'assurer que la version de production pointe vers le bon emplacement.

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

En savoir plus sur l'utilisation de la propriété homepage de Create React App .

3. Mettre à jour les itinéraires

Vous pouvez également utiliser la valeur définie dans la propriété homepage décrite ci-dessus dans votre JSX . Cette valeur est exposée dans la variable process.env.PUBLIC_URL au moment de la construction.

Par exemple, j'ai dû mettre à jour les routes de mon application pour utiliser le sous-répertoire en production en apportant les modifications suivantes :

 <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>

Remarque : cela n'affecte pas le développement local, vous pouvez donc l'ajouter immédiatement à votre projet en toute sécurité !

Après avoir apporté les modifications ci-dessus, j'ai rencontré l'écran d'accueil après une nouvelle construction + déploiement. Progrès! Cependant, j'ai remarqué que mes <Link/> s pointaient toujours vers la racine du domaine…

4. Mettez à jour les liens

Dispersés dans l'application, il y avait des composants <Link/> que j'utilisais pour relier de "page" à "page". Ceux-ci nécessitaient également le même traitement que les composants <Route/> :

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

Avec toutes ces modifications définies dans mon application, j'ai pu exécuter à nouveau npm run build et déployer les modifications sur le serveur. À ce stade, mon application était opérationnelle 💯 sans aucun problème ! 😀

J'espère que ces notes vous aideront à faire fonctionner votre application React dans un sous-répertoire !

Ai-je oublié quelque chose que vous savez qui aiderait à faciliter le processus ? Avez-vous des conseils pour définir le chemin du sous-répertoire sans effectuer toutes ces mises à jour supplémentaires ? S'il vous plaît faites le moi savoir car j'apprends encore React! 🙌

Bon piratage ! 💻😄💖