Ambiente de setup

Criação de um ambiente de setup

O ambiente de setup é o ambiente fornecido para que a agência altere o projeto front-end de uma loja. Nesse artigo você confere os passos de criação de um ambiente de setup.

Um ambiente de setup possui dois arquivos: uma pasta Build, responsável pelos scripts disponíveis para a implementação, e a pasta do projeto, que possui os arquivos de template da loja. Então, para alterar a vitrine de uma loja, é preciso ter a Build e a pasta do projeto.

❗️

É importante ressaltar que recomendamos a criação do ambiente de setup uma única vez por loja. Depois de criar o ambiente de setup, é responsabilidade da agência manter o projeto em uma ferramenta de versionamento de código. É a partir do versionamento dos código do projeto que os desenvolvedores devem realizar as alterações no front-end de uma loja.

Como instalar a Build

Os arquivos da pasta Build são responsáveis pelos comandos utilizados na implementação de um projeto. Para instalar a pasta Build:

  1. Crie uma pasta para armazenamento de todo projeto no seu dispositivo;
  2. Acesse o link do repositório da Build;
  3. Clone esse diretório para sua máquina;
  4. Mova a pasta Build para dentro da pasta de arquivos criada no passo 1.
  5. Acesse a pasta Build pelo terminal;
  6. Digite o comando npm run install;
  7. Clique em Enter;

🚧

Nunca altere os arquivos do diretório Build. Alterações na Build podem impactar na renderização da sua loja. Faça um pull request periodicamente para manter a sua versão de pasta Build sempre atualizada com o nosso repositório.

Como criar um projeto

Nesse etapa, você irá escolher um template base para a loja. O resultado da escolha do template é a criação da pasta do projeto. A pasta do Projeto é onde os arquivos que compõem o template estão disponíveis, e é preciso uma hierarquia de diretórios para o funcionamento do template. Veja a seguir a hierarquia de pastas e como a Build e a pasta Projeto compõem o ambiente de setup.

10001000

Hierarquia de pastas

📘

Para implementar projetos de diferentes lojas, não é preciso a reinstalação da pasta Build para cada projeto. Você pode utilizar a mesma Build para diferentes lojas, no entanto as pastas dos projetos devem ficar na mesma hierarquia da pasta Build.

Para escolher um template e então criar pasta de projeto:

  1. Acesse a pasta Build localmente no seu terminal.

🚧

Para desenvolvedores que utilizam Windows em sua máquina: realize essa etapa no terminal Powershell.

  1. Digite o comando npm run init;
  2. As perguntas para criação do projeto ficarão disponíveis. Então, responda:
    • ? Qual é o subdomínio de staging da loja?:
      Escreva o nomeDaLoja ;
    • ? Deseja prosseguir e substituir todos os arquivos?: ***
      Digite Yes caso queira substituir todo o arquivo da loja pelo template. Atente-se que caso haja algum código anteriormente na loja, o mesmo será sobrescrito.
    • ? Qual é o host de produção da loja?
      Escreva a URL da loja www.nomeDaLoja.com.br
    • Obtendo lista de templates…...
      ? Escolha o template que deseja utilizar:
      Selecione o basictemplate;
    • ? Quase tudo pronto. Deseja criar o projeto "nomeDaLoja" utilizando o template "basictemplate":
      Responda Yes.
  3. No final do preenchimento, verifique se o projeto foi criado pelo caminho do diretório que está na mensagem final.

Com a pasta do projeto criada você já pode dar início a customização de loja. Antes de iniciar a customização, lembre-se de:

  • Reinstalar na pasta do projeto as dependências utilizando o comando npm i todas as vezes em que você adicionar, excluir ou alterar versões do seu projeto.
  • A Vnda não se responsabiliza pelo versionamento de código, dessa forma, recomendamos que você faça as edições e customizações da sua loja utilizando uma ferramenta para esse propósito.
  • Para os casos em que seja necessário recomeçar um projeto ou substituir um template, você pode subscrever a de um projeto já existente. Para este caso, refaça o processo de criação de projeto (do passo 1 ao passo 5), utilizando o mesmo domínio e nome da loja já existente. Lembre-se que nesse caso todas as alterações feitas no projeto anterior serão perdidas.

📘

Saiba mais sobre os comandos utilizados nesse guia em Comandos disponíveis


Did this page help you?