Iniciar novo projeto

Projetos finalizados ou em desenvolvimento

Caso o projeto em questão já tenha sido lançado ou esteja em desenvolvimento, deve-se ignorar esta etapa e utilizar o repositório de versionamento de código onde o projeto está alocado.

A primeira etapa a ser feita para iniciar uma nova loja é acessar o Template Maker para montar o template e as customizações desejadas, utilizando-se das estruturas que já entregamos prontas e que atendem as necessidades da loja que você está criando.

Ao final, o Template Maker permitirá que você faça o download dos arquivos fonte do template. É muito importante que você baixe esses arquivos e os organize corretamente, em conjunto com a Build, para que você possa dar os próximos passos para programar e customizar o template.

Passo a passo

Para criar uma loja nova:

1. Crie a pasta da loja, no mesmo local onde se encontra a pasta da Build. A pasta deve conter o mesmo nome da loja que está na sua URL de Staging. Exemplo: se a URL de Staging for minhaloja.vnda.dev, o nome da pasta deve ser minhaloja. IMPORTANTE: não crie a pasta da loja dentro da pasta da Build, crie fora e no mesmo nível onde se encontra a Build. Veja a imagem abaixo para referência
2. Acesse o Template Maker, escolha uma estrutura pré-pronta de exemplo e customize as seções de cada página. Ao final, faça o download dos arquivos e coloque-os dentro da pasta do projeto, criada no passo 1
3. Abra os arquivos no seu editor de código e acesse o arquivo package.json. Nele, altere os seguintes campos:
   • name: coloque o nome da loja exatamente como utilizado no domínio da URL de staging. Esta URL é no formato nomedaloja.vnda.dev, você deve colocar exatamente como está o nome da loja, sem a parte do .vnda.dev. Este campo será utilizado para sincronizar seus arquivos para o ambiente de staging.
   • repository: opcional, se você utiliza uma ferramenta de versionamento do código, ou se mantém backup dos arquivos na nuvem, coloque o endereço do repositório/backup aqui
   • bugs: opcional, se você utiliza uma ferramenta de versionamento, direcione para o caminho de issues do repositório
   • config/url: O endereço completo, final, do site em produção, no formato https://www.nomedaloja.com.br. Este é um exemplo, coloque exatamente o endereço do site em produção, incluindo o protocolo HTTPS
4. No terminal, na pasta do projeto, instale as dependências executando o comando npm install
5. Após instalar as dependências, sincronize os arquivos para o ambiente de staging, executando o comando npm run sync
6. Você já pode ver o template da loja na URL de Staging. Para iniciar a customização do template via código, execute o comando npm run dev

Versionamento de Código

É necessário que você mantenha um backup ou versione o código de sua loja, através de ferramentas como GitHub, Bitbucket e outras. Use a ferramenta que você melhor se adaptar, mas é necessário que você realize o versionamento do seu código.

Caso você ou seu time já seja habituado com o GitHub, você pode usar o nosso GitLab, que funciona da mesma forma. Nossos parceiros recebem uma pasta dedicada para os projetos, onde realizamos backups dos deploys que são feitos, mas você pode usar o mesmo repositório para versionar o código, mantendo a branch utilizada para backup de deploy.

A Olist Ecommerce não se responsabiliza pelo versionamento do código e mantém somente um backup da última versão que foi feito deploy. Alterações não publicadas, testes e similares são de responsabilidade sua e do seu time.

Organização dos Arquivos

A pasta Build funciona para todos os projetos

Não é necessário reinstalar a pasta Build caso você possua projetos de diferentes lojas. Para utilizar a mesma Build mantenha as pastas de projeto de todas as lojas na mesma hierarquia da Build.

Veja o processo de inicialização de um novo projeto e conheça mais a estrutura dos templates aqui: