ReactJs Comment passer un nom d'hôte de serveur personnalisé ?

Question

Je veux être en mesure de passer un nom d'hôte de serveur personnalisé lors de l'exécution de mon application react pour être utilisé dans l'url lorsque je dois récupérer des données. Le serveur est actuellement exécuté sur mon ordinateur local, donc lorsque je récupère (url), j'ai utilisé " http://localhost :....", ce qui a parfaitement fonctionné. Mais je voudrais pouvoir passer un nom d'hôte personnalisé, tel que mon adresse IP, à utiliser dans l'URL (par exemple, le nom de l'hôte de l'utilisateur). http://ipaddress :.. .).

J'ai essayé de commencer mon application comme ça :

serverhost=ipaddress npm start

et ensuite dans mon fichier package.json

"scripts" : {
   "start": "react-scripts start $serverhost"
}

et dans start.js, je peux accéder à process.env.serverhost, mais je veux pouvoir accéder au nom de l'hôte dans le navigateur pour mes appels de récupération réels. Je ne veux pas définir le nom d'hôte dans la "config" du package.json ou dans un fichier .env, car il doit pouvoir être modifié (j'ai l'impression que ce n'est pas possible). Je veux juste pouvoir accéder au nom d'hôte du serveur donné comme argument dans la ligne de commande dans mes fichiers src.

(J'ai lu quelque part qu'il fallait faire

REACT_APP_MY_VAR=test npm start 

puis en y accédant comme

process.env.REACT_APP_MY_VAR

dans les fichiers src mais quand j'ai essayé de récupérer(url) j'ai eu un tas d'erreurs d'URL non analysées)

EDIT : J'ai essayé d'utiliser les variables REACT_APP et je n'ai plus eu d'erreurs d'analyse d'URL lors de la récupération.

Answer 1

Vous pouvez définir un base dans votre index.html qui servira de base à toutes vos requêtes à partir de là.

Vous pouvez créer la balise de base de façon dynamique en lisant la balise document.location et tracer le chemin souhaité.

Notez que tous les chemins relatifs seront ensuite mappés à partir de votre baseTag.

Un exemple serait quelque chose comme ceci

<base href="https://www.dog.ceo/" />

Et ensuite, créez une requête comme ceci

fetch('api/breeds/list/all')
  .then( response => response.json() )
  .then( ({message}) => console.log( message ) );

L'adresse complète de cet appel serait https://www.dog.ceo/api/breeds/list/all

Answer 2

Vous pouvez avoir un fichier .env par environnement et ensuite définir

REACT_APP_API_ENDPOINT=http://localhost.whatever

Ainsi, par exemple, .env.development

REACT_APP_API_ENDPOINT=http://localhost.whatever

.env.production

REACT_APP_API_ENDPOINT=http://production.whatever

L'utilisation des variables env est expliquée ici https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#what-other-env-files-can-be-used

Finalement, vous pouvez l'ajouter à votre script comme suit

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=http://localhost.whatever npm/yarn start"
   "start-production": "REACT_APP_API_ENDPOINT=http://production.whatever npm/yarn start"
}

Si vous ne souhaitez pas utiliser les approches ci-dessus, attribuez votre adresse IP à une variable et ajoutez-la à la commande pour exécuter votre application.

"scripts" : {
   "start": "REACT_APP_API_ENDPOINT=$(curl ifconfig.me) npm/yarn start"
   "start-other: "REACT_APP_API_ENDPOINT=$(echo MY_VAR_WITH_IP) npm/yarn start"
}

Et ensuite, accédez à votre url à partir de process.env.REACT_APP_API_ENDPOINT