example storefront
v5.2.1
O MailChimp Open Commerce é uma plataforma de comércio sem cabeça da API, construída usando Node.js, React e GraphQL. Ele toca bem com NPM, Docker e Kubernetes.
Este exemplo da Storefront é servir como uma referência sobre como implementar uma loja de lojas baseada na Web usando a API GraphQL do Commerce Reaction Commerce. Você pode gastar este projeto como ponto de partida ou criar sua própria experiência personalizada usando sua tecnologia preferida do lado do cliente. Embora acreditemos que nossa loja de lojas esteja completa o suficiente para usar na produção, pode estar faltando recursos que sua loja exige no momento.
O Commerce Open do MailChimp vem com um conjunto robusto de recursos de comércio principal imediatamente. E como qualquer coisa em nossa base de código pode ser estendida, substituída ou instalada como um pacote, você também pode personalizar qualquer coisa em nossa plataforma.
Este exemplo da Storefront é construído com o próximo.js, react, grafql e cliente apollo
Siga o guia de início rápido para instalar e executar todos os serviços necessários para executar a loja:
| Diretório: Serviço | Url |
|---|---|
reaction : API grafql | LocalHost: 3000/grafql |
reaction-admin : Reação Admin | Localhost: 4080 |
reaction : MongoDB | Localhost: 27017 |
example-storefront : Storefront | LocalHost: 4000 |
NOTA : O Storefront tem redirecionado para que, se você abrir http: // localhost: 4000/grafql, você será redirecionado para o playground do GraphQL.
Ao executar a fachada da loja e a reação pela primeira vez, você precisará configurar as opções de processamento de pagamento e remessa para testar um fluxo completo de checkout do pedido. Depois de se inscrever para uma chave da API de listras, siga estas etapas:
STRIPE_PUBLIC_API_KEY ) a .env .http://localhost:4080 . Faça login como usuário administrador.Leia os documentos para configurar o segmento ou um rastreador de análise personalizado
A plataforma de reação executa a loja com o Docker, então você precisará usar comandos do Docker para visualizar logs, executar comandos dentro do contêiner e muito mais. Para executar comandos especificamente para a fachada da loja, altere os diretórios para o diretório example-storefront dentro do repositório de reaction-platform :
cd example-storefrontCrie um link simbólico para usar a imagem do Docker de Desenvolvimento:
ln -s docker-compose.dev.yml docker-compose.override.yml
Se estiver em execução pela primeira vez ou variáveis de ambiente em .env.example , ele alterou o comando abaixo para atualizar as variáveis de ambiente.
./bin/setup
Inicie a loja da loja executando:
docker-compose up -d && docker-compose logs -f Altere o INTERNAL_GRAPHQL_URL em .env para o URL da API de produção. O URL deve terminar em /graphql , como: https://my-website.com/graphql . Salve o arquivo .env e reinicie o aplicativo com:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Execute qualquer comando dentro de um contêiner do docker e remova o contêiner. Use isso para executar quaisquer operações de ferramentas. Lembre -se de que o diretório do seu projeto será montado e as coisas geralmente funcionam. Veja a seção de fios abaixo para obter mais exemplos.
Execute testes localmente
docker-compose run --rm web yarn testExecute testes localmente sem cache (isso pode ser útil se as alterações não estiverem aparecendo)
docker-compose run --rm web yarn test --no-cachePara executar os testes de segurança do SNYK (isso executará testes da mesma maneira que o IC)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "Para executar Eslint
docker-compose run --rm web eslint srcVocê pode usar o Google Chrome Devtools para depurar o código em execução no servidor de aplicativos Node.js enquanto estiver em execução no 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 . Encontre o processo sob destino remoto e clique em Inspecionar .Os fios & npm devem ser executados dentro do recipiente do docker. Tomamos medidas para garantir que os Node_modules sejam colocados em um local em cache. Se você executar o fio localmente, os Node_modules serão gravados diretamente no diretório do projeto e precedem os do Docker Build. Fios Adicionar
docker-compose run --rm web yarn add --dev [package]
Instalação do fio
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
Às vezes, precisamos testar o exemplo dos componentes da biblioteca de componentes da loja no contexto da fachada da loja. Infelizmente, não há um Wasy fácil em fazer isso dentro de nossos recipientes do Docker, por isso precisamos executar a storefront fora do Docker.
cd para o seu repositório local reaction-component-library .cd na pasta package deste repositório e execute a yarn install de comando seguida de yarn buildcd na nova pasta dist , ele acabou de criar e executar yarn link para permitir que a biblioteca seja instalada na fachada da loja. Isso vinculará @reactioncommerce/componentsexample-storefront , renomeie temporariamente seu arquivo .yarnrc para qualquer outra coisa (ou seja .yarnrc-temp )yarn install e, em seguida, o yarn link "@reactioncommerce/components" para definir a versão local como uma substituição da versão publicada do NPM.env , altere INTERNAL_GRAPHQL_URL para igual http://localhost:3000/graphql , o mesmo que o EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add cada um desses pacotes na pasta package/dist da biblioteca de componentes. (Esta pasta é gitignored de qualquer maneira.)CTRL+Cyarn unlink "@reactioncommerce/components" na pasta Repo Storefrontcd para a package/dist Dist do repositório de reaction-component-library . Execute o yarn unlink para desvincular a versão local da biblioteca de componentes.yarnrc.env Pare e retenha recipientes:
docker-compose stopPare e remova os recipientes:
docker-compose downPare e remova recipientes, volumes e imagens construídas:
docker-compose down -v --rmi local Às vezes, é útil durante o desenvolvimento fazer uma construção de produção do aplicativo e executar isso localmente.
Execute este comando para construir uma imagem do Docker com a construção de produção do aplicativo:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . Onde xxx indica a versão de tag que você deseja usar, ou seja 3.1.0
Então, para iniciar o aplicativo em sua máquina, verifique se o contêiner da API de reação já está em execução e insira:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X NOTA: Você pode substituir o número antes do cólon em 4000:4000 por uma porta de localhost diferente em que você gostaria que o aplicativo seja executado.
Nota: Esta não é a maneira de executar o aplicativo na implantação real da produção. Isso é apenas para executar a produção construída localmente para fins de desenvolvimento, demonstração ou teste.
Para parar o recipiente do Docker depois de iniciá -lo com o comando acima, use:
docker stop reaction-storefrontEncontre um bug, um erro de digitação ou algo que não esteja bem documentado? Adoraríamos que você abra um problema nos dizendo o que podemos melhorar! Este projeto usa liberação semântica, use o formato de mensagem de comprometimento.
Quer solicitar um recurso? Use nosso repositório de solicitações de recurso de reação para registrar uma solicitação.
Adoramos seus pedidos de tração! Verifique nossa Good First Issue e Help Wanted para obter boas questões para resolver.
Pull Solictações devem passar em todos os testes, estilo e verificações de segurança automatizados.
Seu código deve passar em todos os testes de aceitação e nos testes de unidade. Correr
docker-compose run --rm web yarn test Para executar as suítes de teste localmente. Se você estiver adicionando funcionalidade à reação, adicione testes para a funcionalidade adicionada. Você pode executar os testes localmente sem cache, se necessário, passando o sinalizador --no-cache . Isso pode ser útil se as mudanças não estiverem aparecendo.
docker-compose run --rm web yarn test --no-cachePara atualizar um instantâneo falhado (se você fez alterações em um componente)
docker-compose run --rm web yarn test -uExigimos que todo o código contribuiu para a reação segue as regras de ESLint da reação. Você pode correr
docker-compose run --rm web eslint src
Para executar o ESLint no seu código localmente.
Utilizamos o Certificado de Origidência do Desenvolvedor (DCO) em vez de um contrato de licença de contribuinte para todas as contribuições para projetos de código aberto do comércio de reação. Solicitamos que os colaboradores concordem com os termos do DCO e indiquem esse acordo assinando todos os compromissos feitos aos projetos de comércio de reação, adicionando uma linha com seu nome e endereço de e -mail a cada mensagem de comprometimento do Git contribuída:
Signed-off-by: Jane Doe <[email protected]>
Você pode assinar seu compromisso automaticamente com o Git usando git commit -s se tiver seu user.name e user.email definidos como parte da sua configuração Git.
Pedimos que você use seu nome verdadeiro (por favor, sem contribuições anônimas ou pseudônimos). Ao assinar sua confirmação, você está certificando que tem o direito de ter o direito de enviá -lo sob a licença de código aberto usado por esse projeto de comércio de reação específico. Você deve usar seu nome real (sem pseudônimos ou contribuições anônimas são permitidas.)
Utilizamos o aplicativo Probot DCO Github para verificar se há assinentos de DCO de cada confirmação.
Se você esquecer de assinar seus compromissos, o Bot DCO lembrará e fornecerá instruções detalhadas sobre como alterar suas compromissos para adicionar uma assinatura.
Copyright 2019 Reaction Commerce
Licenciado sob a licença Apache, versão 2.0 (a "licença"); Você não pode usar esse arquivo, exceto em conformidade com a licença. Você pode obter uma cópia da licença em
http://www.apache.org/licenses/LICENSE-2.0
A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído pela licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença.
