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
E aí provavelmente vai aparecer algo do tipo:
Need to install the following packages:
create-turbo@1.2.16
Ok to proceed? (y)
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)
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
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...
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:
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
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"
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"
Já feito o commit agora precisamos criar um repo no GitHub para settarmos o remote e podermos dar push
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
Vocês vão copiar a parte de baixo já que já temos um repo existente
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
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
Selecionem a opção Import an existent project
Selecionem o provider do GitHub
Pesquisem o nome que deram ao projeto de vocês
Depois coloquem essas configurações no Basic build settings
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!
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)