example storefront
v5.2.1
MailChimp Open Commerce es una plataforma de comercio sin cabeza API construida con Node.js, React y GraphQL. Juega bien con NPM, Docker y Kubernetes.
Esta tienda de ejemplo es servir como referencia sobre cómo implementar una tienda basada en la web utilizando la API GraphQL de comercio de reacción. Puede desembolsar este proyecto como un punto de salto o crear su propia experiencia personalizada utilizando su tecnología preferida del lado del cliente. Si bien creemos que nuestra tienda de ejemplo es lo suficientemente ofrecida como para usar en la producción, puede estar faltando características que su tienda requiere en este momento.
MailChimp Open Commerce viene con un conjunto robusto de capacidades de comercio central de inmediato. Y dado que cualquier cosa en nuestra base de código puede extenderse, sobrescribirse o instalar como un paquete, también puede personalizar cualquier cosa en nuestra plataforma.
Esta tienda de ejemplo está construida con el cliente Next.js, React, GraphQL y Apollo
Siga la guía de inicio rápido para instalar y ejecutar todos los servicios necesarios para ejecutar la tienda:
| Directorio: Servicio | Url |
|---|---|
reaction : API GraphQL | Localhost: 3000/GraphQL |
reaction-admin : administrador de reacción | Localhost: 4080 |
reaction : MongoDB | Localhost: 27017 |
example-storefront : escaparate | Localhost: 4000 |
Nota : La tienda tiene redireccionamientos para que si abre http: // localhost: 4000/graphql, será redirigido al patio de juegos GraphQL.
Al ejecutar la tienda y la reacción por primera vez, deberá configurar las opciones de procesamiento de pagos y envío de rayas para probar un flujo de pago completo de pedidos. Después de registrarse para obtener una tecla API Stripe, siga estos pasos:
STRIPE_PUBLIC_API_KEY ) a .env .http://localhost:4080 . Inicie sesión como usuario administrador.Lea los documentos para configurar el segmento o un rastreador de análisis personalizado
La plataforma de reacción ejecuta la tienda con Docker, por lo que tendrá que usar comandos Docker para ver registros, ejecutar comandos dentro del contenedor y más. Para ejecutar comandos específicamente para la tienda, asegúrese de cambiar los directorios en el directorio example-storefront dentro del repositorio reaction-platform :
cd example-storefrontCree un enlace simbólico para usar la imagen Docker de desarrollo:
ln -s docker-compose.dev.yml docker-compose.override.yml
Si se ejecuta por primera vez o variables de entorno en .env.example ha cambiado Ejecutar el comando a continuación para actualizar las variables de entorno.
./bin/setup
Inicie la tienda ejecutando:
docker-compose up -d && docker-compose logs -f Cambie el INTERNAL_GRAPHQL_URL en .env a la URL de la API de producción. La URL debe terminar en /graphql , como: https://my-website.com/graphql . Guarde el archivo .env y reinicie la aplicación con:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Ejecute cualquier comando dentro de un contenedor Docker y luego retire el contenedor. Use esto para ejecutar cualquier operación de herramientas. Recuerde que el directorio de su proyecto se montará y las cosas generalmente solo funcionarán. Consulte la sección de hilo a continuación para obtener más ejemplos.
Ejecutar pruebas localmente
docker-compose run --rm web yarn testEjecutar pruebas localmente sin caché (esto puede ser útil si los cambios no están apareciendo)
docker-compose run --rm web yarn test --no-cachePara ejecutar pruebas de seguridad SNYK (esto ejecutará pruebas de la misma manera que CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Para ejecutar eslint
docker-compose run --rm web eslint srcPuede usar el Google Chrome DevTools para depurar el código que se ejecuta en el servidor de aplicaciones Node.js mientras se ejecuta dentro de 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 . Encuentre el proceso en el objetivo remoto y haga clic en Inspeccionar .Yarn y NPM deben ejecutarse dentro del contenedor Docker. Hemos tomado medidas para asegurarnos de que los Node_Modules se coloquen en una ubicación almacenable. Si ejecuta el hilo localmente, los node_modules se escriben directamente al directorio del proyecto y tienen prioridad sobre los de la construcción de Docker. Hilo Agregar
docker-compose run --rm web yarn add --dev [package]
Instalación de hilo
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
A veces necesitamos probar el ejemplo de componentes de la biblioteca de componentes de la tienda en el contexto de la tienda. Desafortunadamente, no hay una savia fácil para hacer esto dentro de nuestros contenedores Docker, por lo que necesitamos ejecutar la storefront fuera de Docker.
cd a su repositorio reaction-component-library local.cd en la carpeta package de este repositorio y ejecuta la yarn install de comando seguido de yarn buildcd en la nueva carpeta dist que acaba de construir y ejecuta yarn link para permitir que la biblioteca se instale en la tienda. Esto vinculará @reactioncommerce/componentsexample-storefront , cambie el nombre temporalmente de su archivo .yarnrc a cualquier otra cosa (es decir, .yarnrc-temp )yarn install y luego el yarn link "@reactioncommerce/components" para establecer la versión local como una anulación de la versión NPM publicada.env , cambie INTERNAL_GRAPHQL_URL a igual http://localhost:3000/graphql , lo mismo que el EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add cada uno de esos paquetes en la carpeta package/dist . (Esta carpeta se gitigna de todos modos).CTRL+Cyarn unlink "@reactioncommerce/components" en la carpeta de repositorio de la tiendacd a la carpeta package/dist del repositorio reaction-component-library . Ejecute el yarn unlink para desinyciones de la versión local de la biblioteca de componentes.yarnrc.env Detener y retener contenedores:
docker-compose stopDetente y retire los contenedores:
docker-compose downDetente y elimina contenedores, volúmenes e imágenes construidas:
docker-compose down -v --rmi local A veces es útil durante el desarrollo hacer una construcción de producción de la aplicación y ejecutarla localmente.
Ejecute este comando para crear una imagen Docker con la compilación de producción de la aplicación:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Donde xxx indica la versión de la etiqueta que desea usar, es decir, 3.1.0
Luego, para iniciar la aplicación en su máquina, asegúrese de que el contenedor de API de reacción ya esté funcionando e ingrese:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X NOTA: Puede reemplazar el número antes del colon en 4000:4000 con un puerto localhost diferente en el que desea que se ejecute.
Nota: Esta no es la forma de ejecutar la aplicación en la implementación de producción real. Esto es solo para ejecutar la construcción de producción localmente para fines de desarrollo, demostración o prueba.
Para detener el contenedor Docker después de comenzar con el comando anterior, use:
docker stop reaction-storefront¿Encuentra un error, un error tipográfico o algo que no esté bien documentado? ¡Nos encantaría que abrieras un problema que nos diga qué podemos mejorar! Este proyecto utiliza liberación semántica, utilice su formato de mensaje de confirmación.
¿Quieres solicitar una función? Use nuestro repositorio de solicitudes de función de reacción para presentar una solicitud.
¡Nos encantan tus solicitudes de extracción! Consulte nuestro Good First Issue y Help Wanted para buenos problemas para abordar.
Las solicitudes de extracción deben pasar todas las pruebas automatizadas, estilo y verificaciones de seguridad.
Su código debe aprobar todas las pruebas de aceptación y pruebas unitarias. Correr
docker-compose run --rm web yarn test para ejecutar las suites de prueba localmente. Si está agregando funcionalidad a la reacción, debe agregar pruebas para la funcionalidad adicional. Puede ejecutar las pruebas localmente sin caché si es necesario pasar el indicador --no-cache . Esto puede ser útil si los cambios no aparecen.
docker-compose run --rm web yarn test --no-cachePara actualizar una instantánea en falla (si ha realizado cambios en un componente)
docker-compose run --rm web yarn test -uRequerimos que todo el código contribuido a la reacción siga las reglas de Eslint de reacción. Puedes correr
docker-compose run --rm web eslint src
para ejecutar Eslint contra su código localmente.
Utilizamos el Certificado de origen del desarrollador (DCO) en lugar de un acuerdo de licencia de contribuyentes para todas las contribuciones a los proyectos de código abierto de comercio de reacción. Solicitamos que los contribuyentes acepten los términos del DCO e indicamos que el acuerdo firmando todos los compromisos realizados a los proyectos de comercio de reacción agregando una línea con su nombre y dirección de correo electrónico a cada mensaje de confirmación de GIT contribuido:
Signed-off-by: Jane Doe <[email protected]>
Puede firmar su compromiso automáticamente con Git utilizando git commit -s user.email tiene su user.name .
Le pedimos que use su nombre real (por favor no hay contribuciones anónimas o seudónimos). Al firmar su compromiso, está certificando que tiene el derecho tiene el derecho de enviarlo bajo la licencia de código abierto utilizada por ese proyecto de comercio de reacción en particular. Debe usar su nombre real (no se permiten seudónimos o contribuciones anónimas).
Utilizamos la aplicación Probot DCO GitHub para verificar las firmas de DCO de cada confirmación.
Si se olvida de firmar sus confirmaciones, el DCO Bot le recordará y le dará instrucciones detalladas sobre cómo enmendar sus compromisos para agregar una firma.
Copyright 2019 Reacción Comercio
Licenciado bajo la licencia Apache, versión 2.0 (la "licencia"); No puede usar este archivo, excepto de conformidad con la licencia. Puede obtener una copia de la licencia en
http://www.apache.org/licenses/LICENSE-2.0
A menos que la ley aplicable sea requerida o acordado por escrito, el software distribuido bajo la licencia se distribuye de manera "como es", sin garantías o condiciones de ningún tipo, ya sea expresas o implícitas. Consulte la licencia para los permisos y limitaciones de rigor de idioma específico bajo la licencia.
