Ecommerce em 2024

Antes de começar eu quero deixar claro que vou usar a nomenclatura "Storefront" pois é a mais comum lá fora e você pode encontrar materiais adicionais na documentação do MedusaJS Storefront.

Storefront é nada mais nada menos do que a loja em si, ou seja, o site que os clientes abrem para ver os produtos, botarem no carrinho e finalizar o pedido.

Além disso, sugiro que instale as extenções Volar e Volar Typescript no seu VSCode para reconhecer os arquivos .vue e conseguir ver o intellisense do typescript.

Criando um projeto NUXT do zero

Para ser um pouquinho diferente nós vamos usar o bun nesse projeto, que é uma alternativa ao node só que mais rápido.

Vá na pasta ecommerce-2024, abra o terminal e rode o seguinte comando para instalar o bun de forma global:

npm i -g bun

Agora inicie um projeto nuxt com o comando abaixo, selecione a opção bun e no "Initialize git repository" selecione Yes:

npx nuxi@latest init medusa-storefront

Para verificar se está rodando corretamente é só executar os seguintes comandos em sequência:

cd medusa-storefront
bun run dev

Ao abrir a url http://localhost:3000/ deverá aparecer a página inicial do nuxt com o texto "Welcome to Nuxt!".

Instalando o shadcn e adicionando alguns componentes

Dentro da pasta medusa-storefront abra o terminal e rode os seguintes comandos em sequência para instalar o typescript, tailwind e shadcn:

bun install -D typescript
bun install -D @nuxtjs/tailwindcss
bun install -D shadcn-nuxt

Agora nós vamos fazer a configuração inicial do shadcn rodando o seguinte comando:

npx shadcn-vue@latest init

Selecione as opções igual na imagem abaixo:

Agora execute os seguintes comandos em sequência para instalar os componentes de botão e de input do shadcn:

npx shadcn-vue@latest add button
npx shadcn-vue@latest add input

Lembre-se: caso queira adicionar mais componentes do shadcn você pode conferir toda a lista aqui na documentação.

Instalando o Medusa Client no NUXT

Dentro da pasta medusa-storefront rode o seguinte comando para instalar o client do medusa, ele vai ser necessário para fazermos a requisição da nossa api de forma completamente tipada:

bun install --D nuxt-medusa

Ainda dentro da pasta medusa-storefront adicione um arquivo .env com o conteúdo abaixo e substitua o {server_url} pelo valor no arquivo credenciais.txt:

MEDUSA_URL={server_url}

Lembre-se: remova a barra / na final da url do {server_url}, se você deixar a barra poderá encontrar problemas durante as próximas aulas.

Esse arquivo .env é necessário para rodar o projeto localmente, ou seja, nós estamos avisando que queremos usar a nossa api hospedada no render quando fizermos as requisições com o medusa client.

Adicionando uma fonte de texto customizada e rodando o projeto localmente

Dentro da pasta medusa-storefront abra o terminal rode o seguinte comando para instalar fontes customizadas do google:

bun install -D @nuxtjs/google-fonts

Agora atualize o arquivo nuxt.config.ts com o seguinte conteúdo:

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt', 'nuxt-medusa', '@nuxtjs/google-fonts'],
  shadcn: {
    prefix: '',
    componentDir: './components/ui'
  },
  googleFonts: {
    families: {
      Inter: [300, 400, 500, 600, 700, 800, 900]
    }
  },
  devServer: {
    port: 8000
  },
})

Também atualize o arquivo assets/css/tailwind.css adicionando o código abaixo no final do arquivo:

// ...

@layer base {
  html {
    font-family: "Inter", system-ui, sans-serif;
  }
}

Só para explicar um pouquinho, nós adicionamos todos os plugins que instalamos anteriormente dentro de modules, adicionamos umas configurações do shadcn (nossa biblioteca de componentes) e adicionamos a fonte Inter e suas variáveis dentro de googleFonts.

Um detalhe interessante também é o devServer na qual a gente definiu para rodar o projeto localmente na porta 8000. Isso acontece pois se rodarmos em outra porta vamos receber erros de CORS pois a nossa api foi configurada pra aceitar somente essa porta.

Agora é só a gente atualizar o arquivo app.vue com o seguinte código:

<script setup lang="ts">
const client = useMedusaClient();
const { products } = await client.products.list();
</script>

<template>
  <div>
    {{ products }}
  </div>
</template>

Para verificar se tudo está funcionando corretamente, rode o comando abaixo dentro da pasta medusa-storefront e abra a url http://localhost:8000 no seu navegador:

bun run dev

Se depois de rodar o projeto seu navegador ficou como a imagem abaixo é porque deu tudo certo:

🚀 Parabéns, você conseguiu criar um projeto NUXT do zero e consumir a API do seu ecommerce.