example storefront
v5.2.1
MailChimp Open Commerce-это первая API-первая платформа для коммерции без головы, созданная с использованием Node.js, React и GraphQL. Это хорошо играет с NPM, Docker и Kubernetes.
Этот пример Storefront должен служить ссылкой на то, как реализовать веб -магазин с использованием API GraphQL Commerce Commerce. Вы можете разжечь этот проект в качестве точки прыжка или создать свой собственный опыт, используя вашу предпочтительную технологию на стороне клиента. Несмотря на то, что мы считаем, что наша пример Storefront достаточно полнофункциональной для использования в производстве, в настоящее время не хватает функций, которые требуются вашему магазину.
MailChimp Open Commerce поставляется с надежным набором основных возможностей торговли прямо из коробки. А поскольку все в нашей кодовой базе может быть расширена, перезаписано или установлено в качестве пакета, вы также можете настроить что -либо на нашей платформе.
Этот пример Storefront построен с Next.js, React, GraphQL и Apollo Client
Следуйте руководству быстрого начала для установки и запуска всех услуг, необходимых для запуска магазина:
| Справочник: служба | URL |
|---|---|
reaction : API GraphQL | Localhost: 3000/Graphql |
reaction-admin : реакция администратора | Localhost: 4080 |
reaction : Mongodb | Localhost: 27017 |
example-storefront : Storefront | Localhost: 4000 |
Примечание . У магазина есть перенаправления, так что если вы откроете http: // localhost: 4000/graphql, вы будете перенаправлены на игровую площадку GraphQL.
При запуске Storefront и реакции в первый раз вам необходимо будет настроить варианты обработки платежей и доставки полос, чтобы проверить полный поток оформления заказа. После регистрации для ключа API полосы, следуйте этим шагам:
STRIPE_PUBLIC_API_KEY ) в .env .http://localhost:4080 . Войдите в систему как пользователь администратора.Прочитайте документы для настройки сегмента или пользовательской аналитической трекера
Платформа реакции запускает магазин с Docker, поэтому вам придется использовать команды Docker для просмотра журналов, запуска команд внутри контейнера и многое другое. Чтобы запустить команды специально для магазина, обязательно измените каталоги в каталоге example-storefront в репозитории reaction-platform :
cd example-storefrontСоздайте символическую ссылку для использования изображения Docker Docker:
ln -s docker-compose.dev.yml docker-compose.override.yml
Если запуск впервые или переменные среды в .env.example изменили команду ниже, чтобы обновить переменные среды.
./bin/setup
Начните магазин, выполнив:
docker-compose up -d && docker-compose logs -f Измените INTERNAL_GRAPHQL_URL в .env URL должен закончиться в /graphql , например: https://my-website.com/graphql . Сохраните файл .env и перезапустите приложение с помощью:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Запустите любую команду внутри контейнера Docker, а затем удалите контейнер. Используйте это, чтобы запустить любые операции по инструментам. Помните, что ваш каталог проектов будет установлен, и все будет просто работать. Смотрите раздел пряжи ниже для получения дополнительных примеров.
Запустите тесты локально
docker-compose run --rm web yarn testЗапустите тесты локально без кэша (это может быть полезно, если изменения не будут отображаться)
docker-compose run --rm web yarn test --no-cacheДля запуска SNYK Security Tests (это будет запускать тесты так же, как CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Запустить Eslint
docker-compose run --rm web eslint srcВы можете использовать Google Chrome Devtools для отладки кода, работающего на сервере приложений Node.js, когда он работает внутри 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 . Найдите процесс под удаленной целью и нажмите «Проспект» .Пряжа и NPM должны работать внутри контейнера Docker. Мы предприняли шаги, чтобы гарантировать, что node_modules помещается в кэк -местное место. Если вы запускаете пряжу локально, Node_Modules записаны непосредственно в каталог проектов и получают приоритет над теми, кто из сборки Docker. Пряжа добавить
docker-compose run --rm web yarn add --dev [package]
Установка пряжи
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Иногда нам нужно проверить пример компонентов библиотеки компонентов магазина в контексте магазина. К сожалению, в наших контейнерах Docker это нелегко сделать это, поэтому нам нужно запустить storefront за пределами Docker.
cd в вашем местном репокровании reaction-component-library .cd в папку package этого репо и запустите yarn install за которой следует yarn buildcd в новую папку dist , он только что построил, и запустите yarn link , чтобы позволить библиотеке установлена на витрину. Это будет связывать @reactioncommerce/componentsexample-storefront , временно переименовать свой файл .yarnrc во что-либо еще (то есть .yarnrc-temp )yarn install , а затем yarn link "@reactioncommerce/components" чтобы установить локальную версию в качестве переопределения опубликованной версии NPM.env измените INTERNAL_GRAPHQL_URL на равные http://localhost:3000/graphql , так же, как и EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add каждый из этих пакетов в папку библиотеки компонентов package/dist . (Эта папка все равно заводится.)CTRL+Cyarn unlink "@reactioncommerce/components" в папке REPO StoreFrontcd в package/dist Polder репозитории reaction-component-library . Запустите командную yarn unlink , чтобы не дать локальную версию библиотеки компонентов.yarnrc.env Остановиться и сохранить контейнеры:
docker-compose stopОстановитесь и удалите контейнеры:
docker-compose downОстановите и удалите контейнеры, объемы и встроенные изображения:
docker-compose down -v --rmi local Иногда во время разработки полезно сделать производственную сборку приложения и запустить это на местном уровне.
Запустите эту команду, чтобы построить изображение Docker с производственной сборкой приложения в нем:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Где xxx указывает версию тега, которую вы хотите использовать, т.е. 3.1.0
Затем, чтобы запустить приложение на вашем компьютере, убедитесь, что контейнер API реакции уже работает, и введите:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X ПРИМЕЧАНИЕ. Вы можете заменить номер перед толстой кишкой в 4000:4000 на другой порт Localhost, в котором вы хотели бы запустить приложение.
Примечание. Это не способ запустить приложение в реальном развертывании производства. Это только для того, чтобы запустить производственную сборку локально для разработки, демонстрационных или пробных целей.
Чтобы остановить контейнер Docker после запуска его с вышеуказанной командой, используйте:
docker stop reaction-storefrontНайдите ошибку, опечатку или что -то, что не задокументировано хорошо? Мы хотели бы, чтобы вы открыли проблему, рассказывающая нам, что мы можем улучшить! В этом проекте используется семантическое высвобождение, используйте их формат сообщений.
Хотите запросить функцию? Используйте наши запросы на функцию реакции, чтобы подать запрос.
Нам нравятся ваши запросы на притяжение! Проверьте нашу Good First Issue и Help Wanted теги для хороших проблем для решения.
Запросы на вывод должны пройти все автоматические тесты, стиль и проверки безопасности.
Ваш код должен пройти все приемные тесты и модульные тесты. Бегать
docker-compose run --rm web yarn test запустить тестовые люксы на местном уровне. Если вы добавляете функциональность к реакции, вы должны добавить тесты для дополнительной функциональности. Вы можете запустить тесты локально без кэша, если это необходимо, передавая флаг --no-cache . Это может быть полезно, если изменения не будут отображаться.
docker-compose run --rm web yarn test --no-cacheЧтобы обновить сбои сбоя (если вы внесли изменения в компонент)
docker-compose run --rm web yarn test -uМы требуем, чтобы весь код способствовал реакции, следуя правилам ESLINT реакции. Вы можете бежать
docker-compose run --rm web eslint src
Запустить Eslint против вашего кода на местном уровне.
Мы используем Сертификат происхождения разработчика (DCO) вместо лицензионного соглашения о внесении лицензии на все взносы в проекты реакции Commerce с открытым исходным кодом. Мы просим, чтобы участники соглашались с условиями DCO и указывали на это соглашение, подписав все коммиты, выполненные в проектах, добавив строку с вашим именем и адресом электронной почты в каждое внесено в комплект сообщения GIT:
Signed-off-by: Jane Doe <[email protected]>
Вы можете автоматически подписать свой коммит с помощью GIT, используя git commit -s если у вас есть ваш user.name и user.email установленные как часть вашей конфигурации GIT.
Мы просим вас использовать ваше настоящее имя (пожалуйста, никаких анонимных вкладов или псевдонимов). Подписывая свой коммит, вы подтверждаете, что у вас есть право, имеете право отправлять его по лицензии с открытым исходным кодом, используемой этим конкретным проектом Commerce. Вы должны использовать свое настоящее имя (псевдонимы или анонимные взносы не допускаются.)
Мы используем приложение Probot DCO Github для проверки на получение DCO -подписи каждого коммита.
Если вы забудете подписать свои коммиты, бот DCO напомнит вам и даст вам подробные инструкции о том, как изменить ваши коммиты, чтобы добавить подпись.
Copyright 2019 Реакционная торговля
Лицензировано по лицензии Apache, версия 2.0 («Лицензия»); Вы не можете использовать этот файл, кроме как в соответствии с лицензией. Вы можете получить копию лицензии на
http://www.apache.org/licenses/LICENSE-2.0
Если не требуется применимый закон или не согласен в письменной форме, программное обеспечение, распространяемое по лицензии, распределяется по основам «как есть», без каких -либо гарантий или условий, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующих разрешения и ограничения по лицензии.
