Logotipo do GitHub à esquerda e logotipo da VTEX à direita, conectados por uma seta verde, com código de programação ao fundo.

Criando e Configurando seu Repositório VTEX: Passo a Passo

Quando falamos sobre desenvolvimento em plataformas de e-commerce, a VTEX é uma das mais robustas e flexíveis do mercado.
Se você recebeu os arquivos do projeto e quer mantê-los organizados e versionados no GitHub (ou GitLab), o primeiro passo é criar um repositório para armazenar esses arquivos. Neste guia, vou mostrar como criar um novo repositório, copiar os arquivos recebidos e configurá-los na branch main. Isso garante que todas as alterações futuras estejam documentadas e fáceis de gerenciar. Vamos começar!

Passo 1: Criando o Repositório no GitHub

O primeiro passo é criar seu repositório no GitHub, que será utilizado para versionar o código e permitir que sua equipe colabore no desenvolvimento de maneira organizada.
  1. Acesse o GitHub e faça login na sua conta.
  2. No canto superior direito, clique no botão “+” e selecione “Novo repositório”.
  3. Escolha um nome para o repositório, defina a visibilidade (pública ou privada) e, opcionalmente, adicione um arquivo README.
  4. Clique em “Criar repositório”.

Passo 2: Instalando e Configurando o VTEX IO CLI

A plataforma VTEX utiliza o VTEX IO, um framework de desenvolvimento que permite criar soluções customizadas e dinâmicas para sua loja online. Para começar, é necessário instalar o CLI (Command Line Interface) do VTEX IO.
  1. Instalar Node.js: Acesse o site oficial do Node.js e faça o download da versão LTS (Long Term Support).
  2. Instalar VTEX IO CLI: Após a instalação do Node.js, abra o terminal e execute o seguinte comando:
bash
Copiar código
npm install -g vtex
  1. Após a instalação, você pode verificar se o CLI foi instalado corretamente executando:
bash
Copiar código
vtex --version

Passo 3: Logando no Workspace VTEX

Agora que o VTEX CLI está instalado, é hora de fazer login no ambiente da VTEX e configurar o workspace de desenvolvimento.
  1. No terminal, execute o comando:
bash
Copiar código
vtex login
  1. Isso abrirá uma janela do navegador onde você deverá se autenticar com sua conta VTEX.
  2. Após o login, escolha a conta em que você deseja trabalhar e o ambiente (staging ou produção).

Passo 4: Criando um Workspace de Desenvolvimento

Na VTEX, o conceito de “workspaces” é crucial. Um workspace é um ambiente isolado onde você pode desenvolver e testar suas modificações sem impactar a loja ao vivo.
  1. No terminal, crie um novo workspace executando:
bash
Copiar código
vtex use nome-do-workspace
  1. O nome do workspace pode ser algo como “dev”, “test” ou qualquer outro que faça sentido para o fluxo de trabalho da sua equipe.

Passo 5: Inicializando o Projeto

Com o workspace configurado, agora é hora de iniciar o projeto no VTEX IO. A estrutura básica de um projeto VTEX pode ser criada a partir de templates fornecidos pela própria plataforma.
  1. No terminal, execute o comando para clonar um template VTEX:
bash
Copiar código
vtex init
  1. Selecione o template desejado, como “store theme” ou outro disponível.

Passo 6: Conectando o Repositório com a VTEX

Após configurar o workspace e clonar o template, você precisa conectar o repositório local ao GitHub e começar a versionar seu código.
  1. No terminal, dentro da pasta do projeto, inicialize o Git:
bash
Copiar código
git init
  1. Adicione o repositório remoto do GitHub:
bash
Copiar código
git remote add origin https://github.com/seu-usuario/seu-repositorio.git
  1. Faça o primeiro commit e envie o código para o GitHub:
bash
Copiar código
git add .
git commit -m "Primeiro commit"
git push -u origin master

Passo 7: Desenvolvendo e Subindo o Código para a VTEX

Agora que seu repositório está configurado, é hora de desenvolver suas funcionalidades e enviar as mudanças para o ambiente da VTEX.
  1. Faça as modificações necessárias no código.
  2. Para subir as alterações ao workspace VTEX, use o comando:
bash
Copiar código
vtex link
  1. Isso fará o upload do código para o seu workspace de desenvolvimento, permitindo que você visualize as alterações em tempo real na loja.
  2. Quando estiver satisfeito com as modificações e pronto para enviá-las para produção, basta promover o workspace para master:
bash
Copiar código
vtex workspace promote

Conclusão

Seguindo esses passos, você terá seu repositório VTEX configurado corretamente, facilitando o desenvolvimento, o versionamento do código e a colaboração entre a equipe. A VTEX IO oferece um ambiente poderoso e flexível, que quando combinado com uma boa organização de repositórios, pode acelerar o desenvolvimento e garantir a qualidade do seu projeto. Mantenha-se atualizado com as melhores práticas de desenvolvimento para garantir que sua loja VTEX funcione de maneira otimizada e escalável.

Preencha o formulário abaixo e nossa equipe entrará em contato para entender suas necessidades e oferecer a melhor solução