Desafio VTEX IO
| .vscode | ||
| assets | ||
| docs | ||
| react | ||
| store | ||
| styles | ||
| .editorconfig | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .vtexignore | ||
| CHANGELOG.md | ||
| Example.tsx | ||
| gulpfile.js | ||
| html.ts | ||
| index.d.ts | ||
| manifest.json | ||
| package.json | ||
| yarn.lock | ||
Desafio M3 Academy - VTEX IO
Configuração do inicial
- Instale as dependências do projeto
yarn
- Faça o login na VTEX na agencia Magma
vtex login agenciamagma
- Crie um workspace de desenvolvimento.
Recomendamos seguir o padrão:
m3academy<nome>. so e permitido o uso de letras minusculas e números.
vtex use m3academyanabrunasouza
Desenvolvimento
- Inicie o projeto
vtex link
- Rode o gulp para compilar os arquivos
yarn scss
- Abrar o seu workspace no navegador
vtex browse
Problemas frequentes
As vezes pode acontecer de bugar o link do projeto. Para resolver isso, rode o comando abaixo que vai desfazer o link e depois rode o comando de link novamente.
vtex unlink --all
vtex link
Dicas de desenvolvimento
Alternativa para o Flex layout
A VTEX acaba impondo algumas limitacoes e verbosidade a mais nos blocos vtex.flex-layout. Para facilitar o desenvolvimento, criamos um bloco custom chamado html. Ele funciona da mesma forma que o flex-layout, mas com uma sintaxe mais simples que permite a escrita de um html mais semântico. Veja a documentação do bloco aqui.
Blocos JSON para diferente para determinados tamanhos de tela
Para criar telas com diferentes blocos em diferente tamanhos de tela, podemos usar o bloco responsive-layout. Ele nos permite isso. Veja a documentação do bloco aqui.