DEV Community

Cover image for Como configurar o deploy do Turborepo no Netlify
Rafael Thayto
Rafael Thayto

Posted on • Edited on

4 3

Como configurar o deploy do Turborepo no Netlify

Hello, hello devs e divas! 😎

Um dia desses passei por uma dificuldade que foi fazer o deploy de uma aplicação minha utilizando Turborepo com Next.js e como acredito que mais pessoas possam ter esse problema, resolvi fazer um guia de como fazer as configurações iniciais, bora lá?

Setup / Configurações iniciais

Bom primeiro vamos começar com o básico mesmo, criar uma aplicação utilizando o Turborepo, que é bem simples, basta você executar esse comando abaixo no terminal :)



npx create-turbo@latest


Enter fullscreen mode Exit fullscreen mode

E aí provavelmente vai aparecer algo do tipo:



Need to install the following packages:
  create-turbo@1.2.16
Ok to proceed? (y)


Enter fullscreen mode Exit fullscreen mode

Basta você apertar enter ⏎ ou y que ele vai baixar essa dependência pra você poder criar o projeto de uma forma bem mais simples. Logo após vai algo parecido com isso:



>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? (./my-turborepo)


Enter fullscreen mode Exit fullscreen mode

E nesse caso eu apertei enter ⏎ pra ele usar esse nome padrão mesmo. Depois ele vai pedir pra você utilizar o package manager de sua preferência:



? Which package manager do you want to use? (Use arrow keys)
❯ npm
  pnpm
  yarn


Enter fullscreen mode Exit fullscreen mode

Eu escolhi o npm mesmo pra facilitar a vida de vocês :D

Após tudo isso provavelmente na tela de vocês vai ter algo assim:



>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? ./my-turborepo
? Which package manager do you want to use? npm

>>> Creating a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>   Installing dependencies...


Enter fullscreen mode Exit fullscreen mode

E por fim vai estar tudo instalado lindamente e a gente vai poder ir pra parte que interessa. 😎.

Vamos abrir a pasta com nosso editor de código preferido (no meu caso é o VSCode) e quando a gente abrir a gente vai ter algo parecido com isso na estrutura de pastas:

Imagem mostrando como deveria ficar a estrutura do projeto

Criando arquivo de configuração do Netlify

Após verificar que está tudo certo, vamos criar um arquivo chamado netlify.toml dentro do ./apps/web

Imagem mostrando onde deve ficar o arquivo que criamos

E dentro do netlify.toml vamos colocar o seguinte código:



[build]
  command = "cd ../.. && npm install && npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"


Enter fullscreen mode Exit fullscreen mode

Tá, mas pra que isso?

Bom, isso é basicamente o arquivo de configuração que o Netlify olha antes de fazer o deployment.

O [build] é a etapa que o Netlify olha para saber como vai fazer o build
O [[plugins]] é a etapa que antes de fazer o build ele instala alguns plugins que vão facilitar o deployment internamente. No nosso caso é de extrema importância adicionar o plugin do Next.js para não termos nenhuma complicação na hora dele criar o cache interno e utilizar o SSR e Edge Functions do Next.

Após isso configurado a gente vai fazer um commit no nosso repo para que a gente possa subir em um repo no GitHub e fazer o deploy em si. Nesse commit abaixo reparem que estou utilizando uma convenção famosa para commits que é o conventional commits coloquem um comentário caso queiram que eu traga algo relacionado a padrões de commit :)



git add .
git commit -m "build(web): adding Netlify configuration file"


Enter fullscreen mode Exit fullscreen mode

Já feito o commit agora precisamos criar um repo no GitHub para settarmos o remote e podermos dar push

Imagem mostrando criação do repo no GitHub

Aqui eu criei o repo com o nome netlify-turborepo-post mas vocês podem dar o nome que preferirem.

Após isso vai abrir a tela do GitHub mostrando algo tipo assim

Imagem mostrando o estado inicial do repo vazio no GitHub

Vocês vão copiar a parte de baixo já que já temos um repo existente

Imagem mostrando o segundo quadrado do GitHub que devemos copiar

E depois vocês vão colar no terminal do nosso projeto, rodar os comandos e voilá ✨, temos agora o nosso código dentro do GitHub

Imagem mostrando nosso código dentro do GitHub

Bom... depois de ter criado e subido nosso código no GitHub, agora podemos ir pro Netlify fazer a última etapa 😁!

Deployando site no Netlify

Abram a conta de vocês no Netlify, depois clickem no Add new site

Imagem mostrando uma seta apontando para o botão Add new site

Selecionem a opção Import an existent project

Imagem mostrando selecionando a opção Import an existent project

Selecionem o provider do GitHub

Imagem mostrando uma seta apontando para o ícone do GitHub que é o provider que devemos selecionar

Pesquisem o nome que deram ao projeto de vocês

Image mostrando a pesquisa para o nosso repo

Depois coloquem essas configurações no Basic build settings

Imagem mostrando que devemos colocar o base directory como apps/web, deixar o build command vazio e colocar o publish directory como apps/web/<br>
.next

Aí é só clicar em deploy e aguardar 😎...
Após alguns minutos o site de vocês já vai estar deployado no Netlify lindamente 😁🎆.

Porém ele vai ter essa cara feia aqui, masssssss... aí pra alterar isso é por conta de vocês!

Imagem mostrando como ficou o site

Link do deploy: https://thayto-netlify-turborepo-post.netlify.app/
Link do repositório no GitHub: https://github.com/rafa-thayto/netlify-turborepo-post

Originalmente postado em https://thayto.com dia 21 de junho de 2022.

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay