Comment faire un package hors ligne pour une application React avec NPM Serve?

Bien que la plupart des usages de React soient destinés à Internet il arrive que l’on ne puisse pas avoir d’accès extérieur dans le cadre du déploiement d’une application sur des machines autonomes déconnectées d’Internet.

Tout fonctionnait parfaitement pour moi jusqu’au moment du déploiement sur l’ordinateur cible, je voulais garder les url telles qu’elles étaient afin de ne pas avoir à réadapter l’application si elle venait à être publiée sur le web et la documentation 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 application React, si vous n’en avez pas vous pouvez récupérer un starter kit ici https://create-react-app.dev/docs/getting-started .

 

Vous pouvez tester l’exécution de l’application en faisant un npm start en ouvrant ensuite votre navigateur à l’adresse http://localhost:3000

Je suppose ici que vous avez déjà un environnement de développement React d’installé.

Une fois prêt nous allons récupérer une version portable de Nodejs (https://nodejs.org/en/download/) en zip. à l’heure de l’écriture de cet article la plus récente étant 10.16.3 en LTS. Pour l’architecture je vous laisse le choix selon vos besoins.

 

Dé zippez l’archive et ouvrez une invite de commande dans ce dossier. (vous pouvez directement taper cmd dans la barre d’adresse de l’explorateur de fichier)

Si vous exécutez sur votre ordinateur npx serve, npm ira directement chercher dans votre environnement de développement les modules liés à serve et par l’occasion ne téléchargera pas en local dans le dossier ou alors il ira télécharger les modules mais les placera dans %appdata%/Roaming/npm-cache ce qui fait qu’en déployant le dossier zip seul vous obtiendrez le message suivant:

npx serve
npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/serve failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
npm ERR! network This is a problem related to network connectivity.
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 [email protected] failed with code 1

Pour éviter ce problème il faut au préalable installer de manière locale avec l’option –save de npm le serveur serve.

npm install serve –save

Attention il est important que vous soyez dans le dossier ou se trouvent npm et npx avant de lancer cette commande.

Une fois cette étape effectuée, vous aurez les fichiers serve et serve.cmd au même niveau que npm et npx et dans le dossier node_modules, l’ensemble des dépendances seront présentes. L’installation est maintenant réellement portable.

Vous pouvez aller plus loin en ajoutant un navigateur embarqué comme Electron par exemple et proposer un package encore plus complet.