example storefront
v5.2.1
MailChimp Open Commerce est une plate-forme de commerce sans API-First sans tête construite à l'aide de Node.js, React et GraphQL. Il joue bien avec NPM, Docker et Kubernetes.
Cet exemple de vitrine consiste à servir de référence sur la façon d'implémenter un magasin basé sur le Web à l'aide de l'API GraphQL de réaction Commerce. Vous pouvez débarquer ce projet comme un point de départ ou créer votre propre expérience personnalisée en utilisant votre technologie de côté client préféré. Bien que nous croyions que notre exemple de vitrine est suffisamment complet pour être utilisé en production, il peut être manquant des fonctionnalités dont votre magasin a besoin pour le moment.
MailChimp Open Commerce est livré avec un ensemble robuste de capacités de commerce de base dès la sortie de la boîte. Et comme tout ce qui est dans notre base de code peut être étendu, écrasé ou installé comme un package, vous pouvez également personnaliser n'importe quoi sur notre plate-forme.
Cet exemple de vitrine est construit avec le client Next.js, React, GraphQL et Apollo
Suivez le guide de démarrage rapide pour installer et exécuter tous les services nécessaires pour exécuter la vitrine:
| Répertoire: service | URL |
|---|---|
reaction : API GraphQL | LocalHost: 3000 / GraphQL |
reaction-admin : administrateur de réaction | LocalHost: 4080 |
reaction : MongoDB | LocalHost: 27017 |
example-storefront : Storefront | LocalHost: 4000 |
Remarque : La vitrine a des redirections afin que si vous ouvrez http: // localhost: 4000 / graphQL, vous serez redirigé vers le terrain de jeu GraphQL.
Lorsque vous exécutez la vitrine et la réaction pour la première fois, vous devrez configurer les options de traitement des paiements et d'expédition de la bande pour tester un flux de paiement complet de commande. Après avoir inscrit une clé API Stripe, suivez ces étapes:
STRIPE_PUBLIC_API_KEY ) à .env .http://localhost:4080 . Connectez-vous en tant qu'utilisateur administrateur.Lisez les documents pour configurer le segment ou un tracker d'analyse personnalisé
La plate-forme de réaction exécute la vitrine avec Docker, vous devrez donc utiliser les commandes Docker pour afficher les journaux, exécuter les commandes à l'intérieur du conteneur et plus encore. Pour exécuter des commandes spécifiquement pour la vitrine, assurez-vous de changer les répertoires dans le répertoire example-storefront dans le référentiel reaction-platform :
cd example-storefrontCréez un lien symbolique pour utiliser l'image Docker de développement:
ln -s docker-compose.dev.yml docker-compose.override.yml
Si vous exécutez pour la première fois ou les variables d'environnement dans .env.example ont changé d'exécuter la commande ci-dessous pour mettre à jour les variables d'environnement.
./bin/setup
Démarrez la vitrine en exécutant:
docker-compose up -d && docker-compose logs -f Modifiez l' INTERNAL_GRAPHQL_URL dans .env en URL de l'API de production. L'URL doit se terminer par /graphql , comme: https://my-website.com/graphql . Enregistrez le fichier .env et redémarrez l'application avec:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Exécutez n'importe quelle commande dans un conteneur Docker, puis retirez le conteneur. Utilisez-le pour exécuter toutes les opérations d'outillage. N'oubliez pas que votre répertoire de projet sera monté et que les choses fonctionneront généralement. Voir la section du fil ci-dessous pour plus d'exemples.
Exécutez les tests localement
docker-compose run --rm web yarn testExécutez des tests localement sans cache (cela peut être utile si les modifications n'apparaissent pas)
docker-compose run --rm web yarn test --no-cachePour exécuter les tests de sécurité SNYK (cela exécutera des tests de la même manière que CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Pour exécuter Eslint
docker-compose run --rm web eslint srcVous pouvez utiliser le Google Chrome Devtools pour déboguer le code en cours d'exécution dans le serveur d'applications Node.js pendant qu'il s'exécute dans Docker.
docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.jschrome://inspect . Trouvez le processus sous cible distante et cliquez sur Inspecter .Yarn & NPM doit fonctionner à l'intérieur du conteneur Docker. Nous avons pris des mesures pour nous assurer que les Node_Modules sont placés dans un emplacement cacheable. Si vous exécutez du fil localement, les Node_Modules sont écrits directement dans le répertoire du projet et avez la priorité sur ceux de la construction Docker. Ajouter du fil
docker-compose run --rm web yarn add --dev [package]
Installation du fil
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Parfois, nous devons tester l'exemple de composants de la bibliothèque des composants de magasin dans le contexte de la vitrine. Malheureusement, il n'y a pas un Wasy facile à le faire dans nos conteneurs Docker, nous devons donc exécuter la storefront à l'extérieur de Docker.
cd à votre reaction-component-library de réaction locale.cd dans le dossier package de ce dépôt et exécutez l' yarn install de commande suivie d' yarn buildcd dans le nouveau dossier dist qu'il vient de construire et d'exécuter yarn link pour permettre à la bibliothèque d'être installée dans la vitrine. Cela liera @reactioncommerce/componentsexample-storefront , renommer temporairement votre fichier .yarnrc à toute autre chose (c'est-à-dire .yarnrc-temp )yarn install , puis le yarn link "@reactioncommerce/components" pour définir la version locale comme un remplacement de la version NPM publiée.env , modifiez INTERNAL_GRAPHQL_URL pour égaler http://localhost:3000/graphql , comme l' EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add chacun de ces packages dans le package/dist de bibliothèque de composants. (Ce dossier est gignoré de toute façon.)CTRL+Cyarn unlink "@reactioncommerce/components" dans le dossier de réapprovisionnement de la devanturecd dans le dossier package/dist du reaction-component-library Repo. Exécutez le yarn unlink pour dissocier la version locale de la bibliothèque des composants.yarnrc.env Arrêtez et conservez les conteneurs:
docker-compose stopArrêtez et retirez les conteneurs:
docker-compose downArrêtez et supprimez les conteneurs, les volumes et les images construites:
docker-compose down -v --rmi local Parfois, il est utile pendant le développement de faire une construction de production de l'application et de l'exécuter localement.
Exécutez cette commande pour créer une image Docker avec la construction de production de l'application:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Où xxx indique la version tag que vous souhaitez utiliser, c'est-à-dire 3.1.0
Ensuite, pour démarrer l'application sur votre machine, assurez-vous que le conteneur de l'API de réaction est déjà en cours d'exécution et entrez:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X Remarque: vous pouvez remplacer le numéro avant le côlon en 4000:4000 par un autre port localhost que vous aimeriez que l'application fonctionne.
Remarque: Ce n'est pas le moyen d'exécuter l'application dans le déploiement de la production réel. Ceci est uniquement pour gérer la construction de production localement à des fins de développement, de démo ou d'essai.
Pour arrêter le conteneur Docker après l'avoir commencé avec la commande ci-dessus, utilisez:
docker stop reaction-storefrontTrouvez un bug, une faute de frappe ou quelque chose qui n'est pas bien documenté? Nous aimerions que vous ouvrions un problème nous disant ce que nous pouvons améliorer! Ce projet utilise la libération sémantique, veuillez utiliser leur format de message de validation.
Vous voulez demander une fonctionnalité? Utilisez notre référentiel de demandes de fonctionnalité de réaction pour déposer une demande.
Nous aimons vos demandes de traction! Vérifiez notre Good First Issue et Help Wanted pour de bons problèmes à résoudre.
Les demandes de traction doivent passer tous les tests automatisés, le style et les contrôles de sécurité.
Votre code doit passer tous les tests d'acceptation et les tests unitaires. Courir
docker-compose run --rm web yarn test Pour exécuter les suites de test localement. Si vous ajoutez des fonctionnalités à la réaction, vous devez ajouter des tests pour les fonctionnalités ajoutées. Vous pouvez exécuter les tests localement sans cache si nécessaire en passant l'indicateur --no-cache . Cela peut être utile si les modifications n'apparaissent pas.
docker-compose run --rm web yarn test --no-cachePour mettre à jour un instantané défaillant (si vous avez apporté des modifications à un composant)
docker-compose run --rm web yarn test -uNous exigeons que tout le code contribué à la réaction suit les règles d'Eslint de la réaction. Tu peux courir
docker-compose run --rm web eslint src
Pour exécuter Eslint contre votre code localement.
Nous utilisons le Certificat d'origine du développeur (DCO) au lieu d'un accord de licence de contributeur pour toutes les contributions aux projets open source du commerce de réaction. Nous demandons que les contributeurs acceptent les termes du DCO et indiquons cet accord en signant tous les engagements réalisés pour réaction des projets de commerce en ajoutant une ligne avec votre nom et votre adresse e-mail à chaque message de validation GIT contribué:
Signed-off-by: Jane Doe <[email protected]>
Vous pouvez signer votre engagement automatiquement avec GIT en utilisant git commit -s si vous avez votre user.name et user.email Set dans le cadre de votre configuration GIT.
Nous vous demandons d'utiliser votre vrai nom (s'il vous plaît pas de contributions anonymes ou de pseudonymes). En signant votre engagement, vous certifiez que vous avez le droit d'avoir le droit de le soumettre sous la licence open source utilisée par ce projet de commerce de réaction particulier. Vous devez utiliser votre vrai nom (aucun pseudonyme ou contribution anonyme n'est autorisé.)
Nous utilisons l'application Probot DCO GitHub pour vérifier les panneaux DCO de chaque engagement.
Si vous oubliez de signer vos commits, le bot DCO vous le rappellera et vous donnera des instructions détaillées sur la façon de modifier vos engagements pour ajouter une signature.
Copyright 2019 Reaction Commerce
Licencié sous la licence Apache, version 2.0 (la "licence"); Vous ne pouvez pas utiliser ce fichier sauf conforme à la licence. Vous pouvez obtenir une copie de la licence à
http://www.apache.org/licenses/LICENSE-2.0
Sauf exiger la loi applicable ou convenu par écrit, les logiciels distribués en vertu de la licence sont distribués sur une base «tel quel», sans garantie ou conditions d'aucune sorte, expresse ou implicite. Voir la licence pour la langue spécifique régissant les autorisations et les limitations sous la licence.
