Desenvolvimento local

Setup prévio

As instruções aqui partem dos pressupostos:

• O projeto já foi criado e configurado em uma conta VTEX

• Seu ambiente local já atende aos pré-requisitos

Para mais detalhes, consulte os respectivos links

Estrutura do projeto

Apesar de ser uma aplicação Next.js, a FS abstrai e trata “por baixo dos panos” várias das convenções observadas em projetos do tipo.

Veja abaixo os diretórios e arquivos mais relevantes:

Alguns deles podem não estar presentes no código-fonte de starter, sendo necessário criar manualmente!

.
├── .faststore/
│
├── cms/
│   └── faststore/
│       ├── content-types.json
│       └── sections.json
│
├── public/
│   ├── favicon.ico
│   └── ...
│
├── src/
│   ├── components/
│   │   ├── atoms/
│   │   ├── molecules/
│   │   ├── organisms/
│   │   ├── sections/
│   │   └── index.tsx
│   ├── fonts/
│   │   └── WebFonts.tsx
│   ├── fragments/
│   ├── graphql/
│   │   ├── thirdParty/
│   │   └── vtex/
│   │       ├── resolvers/
│   │       └── typeDefs/
│   ├── hooks/
│   ├── scripts/
│   │   └── ThirdPartyScripts.tsx
│   ├── styles/
│   │   └── custom-mixins.scss
│   └── themes/
│       └── custom-theme.scss
│
├── cypress.config.ts
├── discovery.config.js
├── package.json
├── README.md
├── tsconfig.json
├── vercel.json
└── yarn.lock

.faststore/

É o @faststore/core ⎯ não deve ser alterado diretamente.

Aqui, é possível identificar:

• Como as páginas são tratadas ao estilo Next.js
• As seções disponibilizadas por padrão
• Hooks e funções experimentais
• Todo conteúdo de src/ transposto em .faststore/src/customizations/
• Dentre outras dependências para o funcionamento geral do starter

cms/faststore/

Diretório dedicado à definição de conteúdo que será sincronizado com o Headless CMS.

public/

Pasta padrão do Next.js para arquivos estáticos (como imagens, ícones, etc.).

É aqui que o favicon da loja é gerenciado, por exemplo.

src/

components/

Diretório onde são organizados todos os componentes React desenvolvidos.

fonts/

Usado para definir fontes customizadas, via <link> no componente WebFonts.tsx.

Para mais detalhes, acesse aqui

fragments/

Local onde são definidos os fragmentos GraphQL que podem ser usados nas consultas.

É normalmente usado para estender queries já existentes.

graphql/

Diretório destinado à definição de tipos e criação de resolvers GraphQL, seja para novas queries e mutations ou adição de campos em queries já existentes.

hooks/

Não é um requisito, mas são grandes as chances de serem necessários hooks customizados (ou replicados da própria FS) conforme as necessidades de desenvolvimento.

scripts/

Pasta onde devem ser incluídos scripts de terceiros, carregados a partir do componente ThirdPartyScripts.tsx.

Para mais detalhes, acesse aqui

styles/ e themes/

Ambos diretórios hospedam arquivos de estilo globais, como:

• Breakpoints e utilitários (styles/custom-mixins.scss)
• Tema customizado (por convenção, themes/custom-theme.scss) a partir dos design tokens da FS

Organização de arquivos

Eventualmente, outros diretórios podem surgir em src/ conforme as necessidades do projeto, por exemplo:

• constants/
• contexts/
• typings/
• utils/
• …

discovery.config.js

Principal arquivo de configuração da loja, usado para definir a conta VTEX, parâmetros de SEO, API, tema, entre outros.

---

Comandos

A seguir são enunciados alguns dos comandos pré-configurados no package.json com base em scripts do FastStore CLI.

Sobre

Além de prover os comandos, o FastStore CLI é o responsável por manter o projeto atualizado com o pacote @faststore/core

dev

Inicia o servidor de desenvolvimento local em http://localhost:3000. É o comando utilizado para ver os resultados em tempo real na sua máquina enquanto trabalha no projeto.

yarn dev

build

Faz o build da aplicação, gerando artefatos “prontos para produção”.

Como o comando realiza validações mais rigorosas, a execução pode apontar erros que não aparecem em dev. Logo, é uma boa prática rodar periodicamente para antecipar ou diagnosticar problemas.

yarn build

GraphQL

Durante o desenvolvimento de queries e mutations, este comando é obrigatório para gerar as respectivas tipagens!

start

Executa a aplicação em http://localhost:3000 a partir de um build previamente gerado. Útil para simular um comportamento mais próximo do ambiente de produção.

yarn start

cms-sync

Sincroniza o diretório cms com o Headless CMS configurado no projeto, considerando o escopo de um workspace VTEX.

yarn cms-sync

Prefira sempre um workspace de desenvolvimento ao testar modificações no CMS!