Génération et déploiement du magasin

L'React Store application personnalisée est conçue comme un modèle statique de SPA React et peut être déployée sur n'importe quel serveur Web de votre choix. Le processus de génération Store SDK prend en charge la création de plusieurs applications.

React Store application générer le flux

Le diagramme suivant montre le flux de génération React Store application typique.

Processus de génération

Le Store SDK contient deux Reference Store application : l'application Emerald basée sur un magasin B2C et l'application Sapphire basée sur un magasin B2B.

Lorsque vous lancez la génération de la production, les fichiers groupés sont sortis dans les dossiers dist/Emerald et dist/Sapphire. La valeur nom de base du routage React pour les applications est défini par défaut sur Emerald et Sapphire respectivement.

Le processus de génération Store SDK est intégré au-dessus de react-script depuis l'application Créer React. Pour plus d'informations, voir https://create-react-app.dev/docs/getting-started.

Pour personnaliser le processus de génération, voir Personnalisation du processus de génération.

Scripts de génération

Les scripts de génération sont situés dans le dossier tools/scripts.

  • start.js est utilisé lorsqu'un utilisateur exécute les commandes npm start, npm run mock ou npm run preview qui démarrent un serveur de développement React.
  • build.js est utilisé lorsqu'un utilisateur exécute npm run build pour générer les groupements d'application.
  • buildConstant.js définit les constantes utilisées pendant la génération.
  • Les autres scripts du dossier sont des scripts d'assistance pour build.js et start.js.

Générer des actifs

Les actifs de génération sont situés dans le dossier assets.

  • Le sous-dossier common possède tous les actifs courants utilisés par les applications.
  • Les sous-dossiers Emerald et Sapphire sont nommés en fonction des noms d'applications. Tous les actifs spécifiques à l'application sont situés dans ces dossiers.
  • Le sous-dossier template est destiné aux fichiers de modèle utilisés pendant le processus de génération. Un fichier de modèle contient généralement des jetons correspondant à des valeurs dans les scripts de génération.

Pendant le processus de génération, tous les fichiers dans les sous-dossiers sont copiés vers la destination en gardant la même structure que dans le projet. Par exemple, .env.development.template dans le dossier template est affiché à la racine du projet en tant que .env.development.

La séquence dans laquelle les fichiers sont copiés dépend du mode :
  • Le dossier par défaut est copié en premier.
  • Pour le mode fictif, lorsque vous exécutez npm run mock, les fichiers du dossier mock sont copiés et le dossier par défaut est remplacé.
  • Pour le mode aperçu, lorsque vous exécutez npm run preview, les fichiers du dossier preview sont copiés et le dossier par défaut est remplacé.
  • Si un mode n'est pas spécifié et que vous exécutez npm start, seul le dossier par défaut est copié.
  • Pour la génération de production, lorsque vous exécutez npm run build, le dossier production est copié et le dossier par défaut est remplacé.

Flux du processus de génération

Les actions suivantes se produisent lorsque vous exécutez une commande de génération :

Commandes npm start, npm run preview et npm run mock :
  1. Nettoyer le dossier public. Le dossier public est le dossier des actifs de l'application Créer React. Pour plus d'informations, voir https://create-react-app.dev/docs/using-the-public-folder/.
  2. Copiez les actifs de l'application depuis le dossier assets vers le dossier public par défaut.
  3. Copiez des modèles à partir du template dossier, y compris les variables d'environnement, dans .env.
  4. Exécutez react-script start.
npm run build
  1. Nettoyer le dossier dist. dist est l'endroit où les groupements sont sortis par le processus de génération.
  2. Nettoyer le dossier public.
  3. Copiez les ressources de l'application depuis le dossier assets vers le dossier public par défaut.
  4. Copiez des modèles à partir du template dossier, y compris les variables d'environnement, dans .env.
  5. Exécutez react-script build.
  6. Copiez les fichiers depuis le dossier build vers le dossier dist/<appName>.
  7. Nettoyer le dossier public.
  8. Poursuivez par la génération de la deuxième application, le cas échéant.