Application multi-locataire dans React

Question

Je crée une application multi-locataires dans React (avec l'installation de Webpack via les fichiers de base, dev et prod config), et je me demande quel est le meilleur moyen de créer et d'accéder aux variables par locataire.

Quand je lance mon application avec:

npm run start tenant1

Je suis en mesure d'accéder à tenant1 Webpack en utilisant ceci:

const tenant1 = process.argv[process.argv.length -1];

Cependant, maintenant je me demande ce qui est le meilleur moyen de rendre cette variable globalement accessible. Mon espoir est d'utiliser cette variable à la création d'une structure dossier au sein de l'application dans le sens de:

/app/${tenant}/img/ /app/${tenant}/css/ /app/${tenant}/components/

Idéalement, sans avoir à importer une variable dans chaque fichier javascript unique.

Toute suggestion ou tout lien vers des installations existantes serait grandement apprécié.

Answer 1

J'ai fini par adopter une approche plutôt manuelle à ce sujet.

J'utilise un react/redux boilerplate, mais je l'ai modifié les scripts de NPM comme ceci:

"start:tenant1": "cp -r ./tenants/tenant1 ./app/tenant && cross-env NODE_ENV=development node server", 
"start:tenant2": "cp -r ./tenants/tenant2 ./app/tenant && cross-env NODE_ENV=development node server", 

Chaque dossier de locataire est copié sur l'application lorsque le serveur de développement est exécuté avec la commande correspondante, et les fichiers sont nommés pareil dans chaque dossier de locataire (masthead.svg, vars.js, etc.) de sorte que les importations dans toute l'application peuvent être statiques.

Généralement cela fonctionne parce que je n'utilise pas un serveur de noeud dans la production, un dossier de construction statique est généré par le passe-partout.

Espérons que cela aide quelqu'un.