Roadmap
Avançado

Ecommerce em 2024

O jeito mais moderno de criar um ecommerce

tailwind
vercel
github
medusajs
render
nuxt

Criando um repositório novo no github

Crie um novo repositório no GitHub, coloque o nome medusa-storefront e clique em "Create Repository".

Dentro da pasta medusa-storefront abra o terminal e rode os seguintes comandos em sequência:

Lembre-se de substituir a parte da url do segundo comando {seu_usuario_github} com o seu nome de usuário do GitHub.

git init
git remote add origin https://github.com/{seu_usuario_github}/medusa-storefront.git
git add .
git commit -m "first commit"
git branch -M main
git push -u origin main
Clique aqui para expandir

Pronto! Se não deu nenhum erro no seu terminal significa que você subiu o projeto do storefront para o GitHub.

Criando mais um projeto na Vercel para seu storefront

Clique aqui para criar um novo projeto na Vercel, procure pelo repositório medusa-storefront e clique em "Import".

Subindo o projeto do medusa storefront na Vercel

Dentro de "Environment Variables" adicione uma variável de ambiente chamada MEDUSA_URL e coloque o valor do {server_url} dentro da pasta credenciais.txt.

Lembre-se de remover a barra / no final da sua url.

Então deve ficar mais ou menos assim:

Variáveis de ambiente da Vercel para o medusa storefront

Depois de terminar, copie o valor do domínio do projeto storefront da Vercel:

Copiando o domínio da Vercel

Agora salve a url do domínio dentro do arquivo credenciais.txt como storefront_url:

credenciais.txt
> internal_database_url: COLE_AQUI_A_INTERNAL_DATABASE_URL
> internal_redis_url: COLE_AQUI_A_INTERNAL_REDIS_URL
> server_url: COLE_AQUI_O_SERVER_URL
> admin_url: https://COLE_AQUI_O_ADMIN_URL
> storefront_url: https://COLE_AQUI_O_STOREFRONT_URL
Clique aqui para expandir

Atualizando a API no Render para liberar o CORS para seu novo projeto storefront

Vá no seu dashboard do Render, selecione o projeto medusa-server, clique em "Enviroment" e adicione sua storefront_url dentro do arquivo credenciais.txt na variável STORE_CORS, então vai ficar mais ou menos assim:

Adicionando a url do medusa storefront na api do render.com

Agora só clicar em "Save Changes" e aguardar de 5 à 10 minutos para terminar o deploy da api.

Para verificar se funcionou, abra sua storefront_url no browser e confira se sumiu todos os erros de CORS do console.

Pronto! Agora podemos começar a fazer as páginas da nossa loja.

Opa, calma aí!

Parece que você não está logado, caso tenha interesse em salvar seu progresso de estudo faça login agora.