Bien que la plupart des usages de React soient desti­nés à Inter­net il arrive que l’on ne puisse pas avoir d’ac­cès exté­rieur dans le cadre du déploie­ment d’une appli­ca­tion sur des machines auto­nomes décon­nec­tées d’In­ter­net.

Tout fonc­tion­nait parfai­te­ment pour moi jusqu’au moment du déploie­ment sur l’or­di­na­teur cible, je voulais garder les url telles qu’elles étaient afin de ne pas avoir à réadap­ter l’ap­pli­ca­tion si elle venait à être publiée sur le web et la docu­men­ta­tion React conseille plusieurs serveurs web, Serve, Apache, Express, etc.

Dans cet article je vais vous montrer comment procé­der avec npm et serve.

Tout d’abord il vous faut une appli­ca­tion React, si vous n’en avez pas vous pouvez récu­pé­rer un star­ter kit ici https://create-react-app.dev/docs/getting-star­ted .

Vous pouvez tester l’exé­cu­tion de l’ap­pli­ca­tion en faisant un npm start en ouvrant ensuite votre navi­ga­teur à l’adresse http://local­host:3000

Je suppose ici que vous avez déjà un envi­ron­ne­ment de déve­lop­pe­ment React d’ins­tallé.

Une fois prêt nous allons récu­pé­rer une version portable de Nodejs (https://nodejs.org/en/down­load/) en zip. à l’heure de l’écri­ture de cet article la plus récente étant 10.16.3 en LTS. Pour l’ar­chi­tec­ture je vous laisse le choix selon vos besoins.

Dé zippez l’ar­chive et ouvrez une invite de commande dans ce dossier. (vous pouvez direc­te­ment taper cmd dans la barre d’adresse de l’ex­plo­ra­teur de fichier)

Si vous exécu­tez sur votre ordi­na­teur npx serve, npm ira direc­te­ment cher­cher dans votre envi­ron­ne­ment de déve­lop­pe­ment les modules liés à serve et par l’oc­ca­sion ne télé­char­gera pas en local dans le dossier ou alors il ira télé­char­ger les modules mais les placera dans %appdata%/Roaming/npm-cache ce qui fait qu’en déployant le dossier zip seul vous obtien­drez le message suivant:

npx serve
npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://regis­try.npmjs.org/serve failed, reason: getad­drinfo ENOTFOUND regis­try.npmjs.org regis­try.npmjs.org:443
npm ERR! network This is a problem rela­ted to network connec­ti­vity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\micka\AppData\Roaming\npm-cache\_logs\2019–09–26T22_03_50_668Z-debug.log
Install for serve@­la­test failed with code 1

Pour éviter ce problème il faut au préa­lable instal­ler de manière locale avec l’op­tion –save de npm le serveur serve.

npm install serve –save

Atten­tion il est impor­tant que vous soyez dans le dossier ou se trouvent npm et npx avant de lancer cette commande.

Une fois cette étape effec­tuée, vous aurez les fichiers serve et serve.cmd au même niveau que npm et npx et dans le dossier node_modules, l’en­semble des dépen­dances seront présentes. L’ins­tal­la­tion est main­te­nant réel­le­ment portable.

Vous pouvez aller plus loin en ajou­tant un navi­ga­teur embarqué comme Elec­tron par exemple et propo­ser un package encore plus complet.