App Custom com React.js em VTEX IO

A VTEX possuí muitos componentes prontos para serem adicionados a sua loja. Mas pode ser que você queira customizar ou mesmo criar um exclusivo para sua necessidade de negócio. Para isso você vai precisar criar um App React.js Custom para VTEX IO. Neste artigo, vou te mostrar como eu crio os meus Apps.

💡

Para nossa demonstração, iremos criar um App com React + GraphQl para criar uma navbar dinâmica com dados do catálogo VTEX.

Pré-requisitos

React.js CLI Toolbelt

GraphQl

Introdução

Para começar a criar o seu próprio React Ap, você precisará clonar o template da VTEX:


git clone https://github.com/vtex-apps/react-app-template.git

Ou acesse o repositório e clique em “use este modelo” para fazer um fork direto para o seu Github.

Abra o repositório que você acabou de criar usando seu editor de código preferido.

ℹ️

Siga os passos indicados nessa documentação oficial da VTEX. Depois volte para este artigo para finalizarmos o App.

Configurações

Antes de começarmos o projeto, vamos fazer alguns ajustes…

Ao abrir seu projeto, você deverá ver uma estrutura como está:

Abra seu arquivo manigest.json e realize as configurações, como manda a documentação.

Abra seu terminal e execute o comando yarn install ou npm i na raiz do projeto.

Vamos adicionar algumas dependências ao objeto dependencies dentro do arquivo manifest.json.


//manifest.json
"dependencies": {
    "vtex.css-handles": "1.x",
    "vtex.styleguide": "9.x"
  },

ℹ️

CSS Handles será nossa escolha para estilizar nosso App, enquanto VTEX Styleguide servirá como nossa UI para criar componentes mais rápido.

Vamos adicionar também o builder store.


//manifest.json
"builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x"
  },

Adicionando tipos do IO

Em seguida execute cd react/ para acessar a pasta react. Agora já na pasta react, execute no seu terminal vtex setup —typings && vtex setup. Não se preocupe em rodar yarn install ou npm i na pasta react pois o comando vtex setup já realiza essa ação.

ℹ️

O comando vtex setup —typings ajusta os tipos e variáveis IO com base nos valores definidos na configuração do aplicativo.

Organizando as pastas

Agora vamos mudar um pouco da estrutura padrão. Essa é uma etapa que eu faço para manter meu código organizado.

Crie uma pasta components dentro da pasta react. E crie outra pasta chamada Navbar dentro da pasta components. Agora crie um arquivo index.tsx dentro da pasta Navbar.

Agora, exclua os arquivos Greeting.test.tsx e Greeting.tsx da pasta react.

Na raiz do projeto, crie uma pasta chamada store. Agora dentro da pasta store crie um arquivo chamado interfaces.json

Esse arquivo irá exportar nossas interfaces criadas com React.js para o app principal tema da sua loja. Explico isso melhor mais pra frente.

Volte a pasta react e crie um arquivo nomeado Navbar.ts. Dentro deste arquivo informe o caminho do index.tsx do componente navbar.


//Navbar.ts
import Navbar from './components/Navbar/index'

export default Navbar

Com isso, podemos exportar nosso componente de navbar para ser convertido em bloco e então poderemos injetá-lo no store theme da sua loja.

Volte ao arquivo interfaces.json da pasta store e então adicione o seguinte trecho de código:


//interfaces.json
{
  "custom-navbar": {
    "component": "Navbar"
  }
}

Pronto, agora poderemos incluir o componente navbar que irá conter o código React no store theme.

ℹ️

A partir de agora vamos começar a escrever o código React da nossa Navbar

React.js

Para começar, abra o arquivo index.tsx da pasta Navbar. E então adicione o seguinte trecho de código:


//index.tsx
import React from 'react'

const Navbar = () => {
  return (
    <>
      <h1 className="flex items-center justify-center">Navbar</h1>
    </>
  )
}

export default Navbar

Pronto, agora acessa sua store theme e faça os seguintes passos:

Inclua o seu app react custom como dependência do arquivo manifest.json do seu store theme


//manifest.json do seu store-theme
"dependencies": {
    //others dependencies...
"vendor.brendev-react": "0.x" //informe seu vendor e o nome do seu app
  },

Muito bem, estamos quase no fim dessa primeira etapa. Lembra que exportarmos nosso navbar no arquivo interfaces.json agora vamos usa-lo.

Agora vamos invocar nosso bloco custom para nossa home.

Crie uma flex row para inserir nosso bloco custom em um container:


// home.jsonc
"flex-layout.row#custom-navbar": {
    "children": ["custom-navbar"],
    "props": {
      "blockClass": ["custom-navbar"]
    }
  }

Para criar seus blocos nativos da VTEX como Flex Row mais rápido, use minha extensão com diversos snippets para VTEX IO.

Pronto! Chegou a hora tão esperada

Em seu terminal, faça login em sua conta:


vtex login vendor

Em seu terminal, crie seu workspace de desenvolvimento:


vtex use myworkspace && vtex browse

Em seu terminal, execute o comando:


vtex link --clean

Lembre-se de linkar seu app React Custom primeiro, em seguida você poderá linkar seu store theme

Depois de linkar seu App custom e seu store theme, você deve visualizar em seu browser algo parecido com isso:

Acesse meu repositório no Github para consultar o código fonte deste artigo.

Continua…

Por hoje é só. No próximo artigo iremos começar a construir uma navbar com informações dinâmicas do catálogo da VTEX.

Até logo 🖖🏻

👉

Siga-me no twitter para mais coisas incríveis como essa @brendonguedes