Configurações Básicas Para Seguir Trilha All Bound

Meus companheiros de bootcamp! <3
Inspirada por algumas postagens que vi no slack, decidi tentar descrever o mais básico das configurações necessárias para usar o VTEX IO e seguir a trilha do All Bound.

Vou dividir em passos para ficar bem explicativo:
Passo 1: Entre na plataforma do All Bound, entre com o email no qual você se cadastrou para o Hiring Coders.
Não vou colocar o link aqui porque não tenho certeza se posso, mas é só entrar no All Bound, fazer o login e ir em “Training and Pre-Sales”

Passo 2: Clone o minimum-boiler-plate no github e coloque a pasta em um lugar de fácil acesso no seu computador. (Como uma pasta de projetos ou na Área de Trabalho se preferir)
O link é esse: GitHub - vtex-apps/minimum-boilerplate-theme: This is the bare minimum setup to start your own Store Framework theme

Olhem também essa dica aqui do @AlbertoVictorRebello :sparkles:

Passo 3: Abra essa pasta no VSCode (ou o editor que você costuma usar) e procure o arquivo “manifest.json”. Mude o valor do “vendor” para o nome da sua casa e o “name” para um nome de sua preferência.
Como no exemplo:

image

Como podem ver, “control” é o nome da minha casa e “thetaking” foi só um nome que eu escolhi.

Passo 4: Abra o seu terminal (prompt de comando, hyper, git bash, powershell, o terminal do VSCode, o que preferir…) dentro da pasta que você clonou. Lembre-se que é muito importante que o manifest.json esteja na pasta em que você abrir o terminal.

Passo 5: Faça o login na sua casa. Deixando bem claro que, apesar da trilha dizer que o comando é “VTEX login appliancetheme”, você deve colocar “VTEX login nomeDaSuaCasa”, como no exemplo:

image

Quando você fizer o login, aguarde um pouco. Uma aba vai ser aberta em seu navegador. Se houver algum passo a seguir, siga. Se for apenas uma mensagem dizendo para fechar a aba, parabéns! Você está logado.

Passo 6: Crie o seu workspace inserindo “VTEX workspace use nomeDoSeuWorkspace”. Se não houver nenhum workspace com o nome que você inserir, o terminal vai perguntar se você quer criar um e você pode apenas digitar “y”.

Passo 7: Agora você pode dar o “VTEX link”. As modificações que você fizer no arquivo serão linkadas em tempo real para a página. Há duas formas de ver essa página: clicando no link que aparece assim que o “VTEX link” começa a funcionar, ou então colocando “VTEX browse” no terminal, é a mesma coisa.

A partir daí, segue a trilha do All Bound e bons estudos!

Observação: “macarena” não é meu workspace, só criei como exemplo e já excluí. kkkkkk

Alguns adendos:

33 Likes

manero, parabéns!

4 Likes

Se não tiver compartilhado lá no slack, faça isso. Vi que tem muita gente iniciante por lá que ainda está perdido. Seu post pode ajudar muita gente. :rocket:

6 Likes

Obrigado!

2 Likes

Compartilhei lá, sim :slight_smile:

2 Likes

Muito bom! Vai ajudar bastante!

4 Likes

Muito legal! Uma sugestão prática para o passo 2 (clonar o repositório ) é usar o comando VTEX init porque reduz digitação ao evitar termos que copiar o link do github, e além do minimum-boiler-plate dá outros modelos para escolhermos:

  • Modo alternativo usando VTEX init;
    • mkdir nomeDaPasta
    • cd nomeDaPasta
    • VTEX init

10 Likes

Nossa, é verdade! Eu tinha esquecido disso porque só usei na primeira vez (foi quando deu problema e eu tive que clonar o template de novo e fiz do outro jeito). :grin:

3 Likes

Usando essa sequencia de comandos o resultado esperado é um workspace básico que funcione para ser alterado nas aulas práticas de complex layouts. Me digam se ajudou:

Create minimum-boiler-plate

  • Open a Terminal
  • mkdir folderName
  • cd folderName
  • VTEX init
  • Chose store option and answer Y to the question
  • cd minimum-boilerplate-theme

Open workspace

notes:

  • Change dreamscape to your account name

  • complexlayouts may be replaced by other workspace name

  • code .

  • Change on manifest.json:

    • “vendor”: “dreamscape”,
    • “name”: “complexlayouts”,
    • “version”: “0.0.0”,
  • VTEX login dreamscape

  • VTEX use complexlayouts
    VTEX whoami
    12:47:25.692 - info: Logged into dreamscape as albertorebello@gmail.com at dev workspace complexlayouts

  • VTEX browse

  • VTEX link

7 Likes

Ótimo, obrigado!!

3 Likes

Nossa muito obrigado @SamileyKnight !

Estava totalmente perdido, estava tentando configurar conforme o manual ou o site da VTEX Learn e não estava conseguindo por conta da configuração, onde pedia para iniciar o login com “appliancetheme”, você salvou o meu dia :heart:

3 Likes

Teu post me salvou @SamileyKnight. Complementado pelas dicas do @AlbertoVictorRebello então… Detonaram!
Parabéns pessoal! :clap:t2:

3 Likes

Nossa muito top, salvou demais!!!

1 Like

Excelente compilação, @SamileyKnight! A VTEX deveria colocar esse seu Getting Started no treinamento deles! :wink:

2 Likes

só para constar que vc arrasou mto! A proposito macarena é ótimo.
tony-stark-icegif-6

2 Likes

Foi a única palavra que consegui pensar. Me deu um branco na hora. XD

3 Likes