
## Introdução

Quando estamos desenvolvendo uma aplicação Web e ela acaba escalando, geralmente precisamos de um time. Quando essa aplicação escala mais ainda, precisamos de mais times trabalhando na mesma aplicação.

Por que estou falando isso?

Porque geralmente quando temos muitas pessoas alterando o mesmo projeto, podemos ter diversos problemas. Sejam eles muitos _Pull Requests_, diferenças de escopos, regras de negócio distintas, conflitos de _merge_ e até mesmo divergências de ideias.

Quando isso acontece o que geralmente pensamos é em separar um pedaço dele em outro projeto e criar o famoso Micro Frontend que vai agilizar nossas entregas e garantir que o projeto evolua de maneira mais rápida e independente de outros escopos.

O que facilita e muito o desenvolvimento!

Com o isso o time do _Next.js_ criou uma feature avançada que chama [**Multi Zones**](https://nextjs.org/docs/advanced-features/multi-zones), com ela a gente consegue criar diversos Micro Frontends de forma muito rápida e simples utilizando _**Next.js**_

## Pré-requisitos

Antes de continuar a ler esse artigo, eu presumo que você tenha uma noção básica / familiaridade com **_Next.js_**

## O que vamos fazer

Até o final desse artigo vamos fazer 2 apps com Next.js, combinar eles usando a feature de **Multi Zones**. Vou fazer também uma parte 2 mostrando como deployar as 2 aplicações na Vercel.

## Criando a pasta do projeto

Abre seu terminal/cmd e manda o seguinte comando:

```bash
mkdir nextjs-multi-zones-post
cd nextjs-multi-zones-post
```

Logo em seguida abram essa mesma pasta no editor preferido de vocês! (nessa época era o VSCode 💩, hoje em dia é o Neovim/VIM ❤️)

## Criando os projetos

Após ter entrado na pasta que vai centralizar nossos projetos, chegou a hora de criá-los!

### Primeira aplicação - Home

Abre seu terminal aí e escreve o seguinte comando para criarmos o primeiro projeto que vai ser nossa **HOME**:

```bash
npx create-next-app --ts home
cd home
```

Depois de criar a home, vamos alterar a porta em que o projeto vai rodar pra facilitar a nossa vida e termos um padrão até o final do post

Abra o arquivo `package.json` que está dentro da sua home e altere o script de dev de:

```json
...
"scripts": {
    "dev": "next dev",
    ...
  },
...
```

para:

```json
...
"scripts": {
    "dev": "next dev -p 4444",
    ...
  },
...
```

Abra seu terminal na mesma pasta e rode o seguinte comando pra executar a aplicação:

```
npm run dev
```

### Segunda aplicação - Blog

Abra outro terminal e rode o seguinte comando para criarmos o nosso segundo projeto que vai ser nosso **BLOG**:

```bash
npx create-next-app --ts blog
cd blog
```

Vamos seguir o mesmo procedimento que fizemos para home agora com o blog

Abra o arquivo `package.json` que está dentro do seu blog e altere o script de dev de:

```json
...
"scripts": {
    "dev": "next dev",
    ...
  },
...
```

para:

```json
...
"scripts": {
    "dev": "next dev -p 7777",
    ...
  },
...
```

Abra seu terminal na mesma pasta e rode o seguinte comando pra executar a aplicação:

```
npm run dev
```

Pronto, agora já temos as 2 aplicações rodando e o resultado tem que ser algo parecido com isso:

![Resultado esperado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iemso2388vls7qftr0b9.png)

**Home (Aplicação 1)** rodando na porta **http://localhost:4444** e o **Blog (Aplicação 2)** rodando na porta **http://localhost:7777**

## Configurando a Home (Aplicação 1)

O primeiro projeto que vamos desenvolver e configurar vai ser Home que além de ser o projeto base também vai ser nossa Home. É nele onde vamos configurar as URLs que vamos fazer o [rewrite](https://nextjs.org/docs/api-reference/next.config.js/rewrites) para que o Micro Frontend e as Multi Zones funcionem.

Abram o arquivo `next.config.js` e adicionem as seguintes linhas de código:

```js
const { BLOG_URL } = process.env

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `/:path*`,
      },
      {
        source: '/blog',
        destination: `${BLOG_URL}/blog`,
      },
      {
        source: '/blog/:path*',
        destination: `${BLOG_URL}/blog/:path*`,
      },
    ]
  },
}
```

Na parte de `rewrites` é basicamente uma reescrita mesmo, vamos reescrever as rotas `/blog` e tudo que vier depois, como por exemplo `/blog/posts/hello-world`. Para saber mais sobre rewrites é só acessar a documentação oficial do **Next.js**.

E vocês podem perceber que também adicionamos uma constante usando uma desestruturação no objeto `process.env` para podermos pegara `URL` do blog via variáveis de ambiente.
Agora bora criar o arquivo `.env` na raiz do nosso projeto da `home` como mostra no exemplo abaixo.

![Onde vai ficar localizado o arquivo .env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4ky9svj4jt4txy51zh8.png)

É nele onde vamos colocar o `BLOG_URL` apontando para o `http://localhost:7777` que é onde está rodando nosso projeto do blog.
`.env`

```txt
BLOG_URL=http://localhost:7777
```

Agora dentro do nosso projeto da home vamos transformar o `index.tsx` nisso daqui:

```tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Blog With Multi Zones</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <Link href="/">Home!</Link> :D
        </h1>

        <div className={styles.grid}>
          <a href="/blog" className={styles.card}>
            <h2>Go Blog &rarr;</h2>
            <p>Click here and go home on our other Next.js app :D</p>
          </a>

          <Link href="/about" passHref>
            <a href="/about" className={styles.card}>
              <h2>About us &rarr;</h2>
              <p>Click here and go to About Us page!</p>
            </a>
          </Link>

          <a href="/blog/posts/hello-hello" className={styles.card}>
            <h2>Go to Hello post &rarr;</h2>
            <p>Click here and go to the Hello Hello post</p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home
```

Basicamente adicionamos 3 links, sendo 2 deles para páginas do nosso blog (ainda não construído) e 1 link para o redirecionamento para uma página interna nossa que é a _About Us_.

![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w3xa558sm1z0c5qmdf5.png)

Agora vamos criar o arquivo `about.tsx` dentro de `home/pages/about.tsx`:

![Local onde vai ficar o nosso arquivo about.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7701xk00103lwhr83k8t.png)
`about.tsx`

```tsx
import type { NextPage } from 'next'
import Link from 'next/link'

const About: NextPage = () => {
  return (
    <div>
      <p>About us :O</p>
      <hr />
      <div>
        <Link href="/">
          <a>Go home</a>
        </Link>
      </div>
    </div>
  )
}

export default About
```

Aqui criamos uma página sobre nós bem simples que só tem um texto e um link que nos faz voltar para a home.

E assim finalizamos a parte da **Home**. Agora bora pro Blog!

## Configurando o Blog (Aplicação 2)

Agora vamos configurar o blog. No blog vai ser um pouco mais simples, basicamente vamos abrir o arquivo `next.config.js` e adicionar a propriedade `basePath` dentro do `nextConfig`, ele vai dizer para o next que a _URL_ base dele vai começar no endereço que escolhermos, que nesse caso vai ser `/blog`
`next.config.js`

```js
const nextConfig = {
  basePath: '/blog',
}

module.exports = nextConfig
```

> Lembrando que toda vez que alteramos o arquivo **next.config.js** ou adicionamos algo no **.env** precisamos parar o servidor e inicia-lo novamente 😁

Agora dentro do nosso projeto da blog vamos transformar o `index.tsx` nisso daqui:

```tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Blog: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Blog With Multi Zones</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/blog/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <Link href="/">Blog!</Link>
        </h1>

        <div className={styles.grid}>
          <a href="/" className={styles.card}>
            <h2>Go Home &rarr;</h2>
            <p>Click here and go home on our other Next.js app :D</p>
          </a>

          <Link href="/posts/it-works" passHref>
            <a href="/blog/posts/it-works" className={styles.card}>
              <h2>Go to It Works post &rarr;</h2>
              <p>Click here and go to the It Works post</p>
            </a>
          </Link>

          <Link href="/posts/hello-hello" passHref>
            <a href="/blog/posts/hello-hello" className={styles.card}>
              <h2>Go to Hello post &rarr;</h2>
              <p>Click here and go to the Hello Hello post</p>
            </a>
          </Link>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image
              src="/blog/vercel.svg"
              alt="Vercel Logo"
              width={72}
              height={16}
            />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Blog
```

Na raiz do nosso blog temos 1 link que leva para nossa **Home** e 2 links que nos levam a posts no nosso blog

![Blog page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buxvf0bmqx9e3mnj4erj.png)

Na imagem acima vocês já conseguem ver a mágica acontecendo, se vocês olharem para o URL vão perceber que estamos rodando no **http://localhost:4444/blog**, mas por quê isso acontece?

Quando configuramos o `basePath` dentro do `next.config.js` do projeto **Blog**, dizemos para o next que o `index.tsx` e todos os outros arquivos vão ser acessados sempre a partir do nosso `basePath` que nesse caso é `/blog`.

Também devemos nos lembrar que no `next.config.js` do nosso projeto **Home** configuramos que sempre que estivermos em **http://localhost:4444** e acessarmos o `/blog` ou qualquer coisa depois de blog, estaremos fazendo um rewrite da rota e estaremos apontando para o nosso **Blog** via **Home**.

> Ou seja: http://localhost:4444/blog vai apontar para http://localhost:7777/blog

O mais incrível de tudo isso é que conseguimos acessar a nossa outra aplicação (blog) dentro da nossa aplicação (home) **sem alterar a URL** 🤯, não é impressionante?

_Cover Image: Photo by <a href="https://unsplash.com/@anritikhon?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Andrey Tikhonovskiy</a> on <a href="https://unsplash.com/photos/water-droplets-on-green-leaf-oKbW1q6mXM4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>_


Quando estamos desenvolvendo uma aplicação Web e ela acaba escalando, geralmente precisamos de um time. Quando essa aplicação escala mais ainda, precisamos de mais times trabalhando na mesma aplicação.

Micro Frontends com Next.js Multi Zones


First, you must have a Linux VPS (I'll use Ubuntu 22 in this tutorial).

## Requirements

- Docker
- Docker Compose
- [Docker Rollout Plugin](https://github.com/Wowu/docker-rollout?tab=readme-ov-file#installation)

### Installing Docker Rollout Plugin

It's very simple:

```bash
# Create directory for Docker cli plugins
mkdir -p ~/.docker/cli-plugins

# Download docker-rollout script to Docker cli plugins directory
curl https://raw.githubusercontent.com/wowu/docker-rollout/master/docker-rollout -o ~/.docker/cli-plugins/docker-rollout

# Make the script executable
chmod +x ~/.docker/cli-plugins/docker-rollout
```

### Docker Rollout Usage

Run `docker rollout <name>` instead of `docker compose up -d <name>` to update a service without downtime.

```bash
$ docker rollout -f docker-compose.yml <service-name>
```

## GitHub Actions build_and_deploy.yml workflow

> In this case I'm using a private registry on Digital Ocean.

```yaml
name: CI

# 1
# Controls when the workflow will run
on:
  # Triggers the workflow on push events but only for the master branch
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
    inputs:
      version:
        description: 'Image version'
        required: true
#2
env:
  REGISTRY: 'registry.digitalocean.com/YOUR_REGISTRY_NAME'
  IMAGE_NAME: 'YOUR_IMAGE_NAME'

#3
jobs:
  build_and_push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repo
        uses: actions/checkout@v4

      - name: Build container image
        run: docker build -t $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $GITHUB_SHA | head -c7) .

      - name: Install doctl
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}

      - name: Log in to DigitalOcean Container Registry with short-lived credentials
        run: doctl registry login --expiry-seconds 600

      - name: Remove all old images
        run: if [ ! -z "$(doctl registry repository list | grep "$(echo $IMAGE_NAME)")" ]; then doctl registry repository delete-manifest $(echo $IMAGE_NAME) $(doctl registry repository list-tags $(echo $IMAGE_NAME) | grep -o "sha.*") --force; else echo "No repository"; fi

      - name: Push image to DigitalOcean Container Registry
        run: docker push $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $GITHUB_SHA | head -c7)

  deploy:
    runs-on: ubuntu-latest
    needs: build_and_push

    steps:
      - name: Deploy to Digital Ocean droplet via SSH action
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.OCI_HOST }}
          username: ${{ secrets.OCI_USERNAME }}
          key: ${{ secrets.OCI_SSH_KEY }}
          envs: IMAGE_NAME,REGISTRY,{{ secrets.DIGITALOCEAN_ACCESS_TOKEN }},GITHUB_SHA
          script: |
            whoami
            cd ~/app
            pwd
            ls -la
            # Login to registry
            docker login -u ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }} -p ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }} registry.digitalocean.com
            # Update the APP image in docker-compose.yml
            sed -i '0,/image:/s|image: .*|image: '$(echo $REGISTRY)'/'$(echo $IMAGE_NAME)':'$(echo $GITHUB_SHA | head -c7)'|' docker-compose.yml
            # Pull the latest image
            docker compose pull
            # Here is the magic docker plugin
            docker rollout -f docker-compose.yml app
            echo "Deployed with success to production"
```

## Conclusion

I hope this tutorial helps you in some way,
best regards Rafael Thayto.

_Photo by <a href="https://unsplash.com/@hdbernd?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Bernd 📷 Dittrich</a> on <a href="https://unsplash.com/photos/a-group-of-trucks-parked-next-to-each-other-in-a-parking-lot-bUnsDLFRNWc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>_


First, you must have a Linux VPS (Ill use Ubuntu 22 in this tutorial). Tagged with docker, devops, github actions, linux, tutorial.

Zero Downtime Deployment with Docker Compose in an OCI VPS using GitHub Actions


> Os problemas de "na minha máquina funciona" acabaram!

## Problema

Estava precisando fazer alguns testes de webhooks, porém só conhecia uma maneira que seria deployar a app e só assim conseguir testar os webhooks. Esse método funciona e é muito utilizado por devs. Mas ele tem um problema... todo teste você vai precisar deployar novamente sua aplicação e isso leva bastante tempo.

Pesquisando por aí encontrei o [Ngrok](https://ngrok.com/) e com ele conseguimos expor nosso localhost de forma bem simples.

## Instalação

> você pode seguir a [Documentação Oficial](https://ngrok.com/docs/guides/getting-started/#step-2-install-the-ngrok-agent) também.

### Mac

Use o [Homebrew](https://brew.sh/):

```bash
brew install ngrok/ngrok/ngrok
```

### Linux

Use o apt

```bash
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo gpg --dearmor -o /etc/apt/keyrings/ngrok.gpg && \
  echo "deb [signed-by=/etc/apt/keyrings/ngrok.gpg] https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok
```

### Windows

Use o [Chocolatey](https://chocolatey.org/install)

```bash
choco install ngrok
```

## Conecte o seu agent à sua conta do ngrok

Pra isso é necessário que você faça o [log in ou sign up](https://dashboard.ngrok.com/) no Ngrok e pegue seu Authtoken.

Copie o token e adicione no seu terminal

```bash
ngrok config add-authtoken <TOKEN>
```

## Rode o Ngrok

Starte o Ngrok rodando o comando abaixo (você pode escolher a porta que preferir, mas no exemplo utilizei a porta `8000`):

```bash
ngrok http 8000
```

Obrigado por ler até aqui! Espero que esse post te ajude :)

Confira mais em https://thayto.com/links

_Cover Image: Photo by <a href="https://unsplash.com/@incrprl?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Stepan Kalinin</a> on <a href="https://unsplash.com/photos/a-woman-standing-on-a-platform-waiting-for-a-train-JzjLO92in88?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>_


Estava precisando fazer alguns testes de webhooks, porém só conhecia uma maneira que seria deployar a app e só assim conseguir testar os webhooks. Esse método funciona e é muito utilizado por devs. Mas ele tem um problema... todo teste você vai precisar deployar novamente sua aplicação e isso leva bastante tempo.

Expondo seu localhost com Ngrok (muito útil para testar webhooks)


Salve, salve devs seniors.

Não vou enrolar nada. Basicamente é só você utilizar o _Utility Type_ `Extract` do próprio **TypeScript** e boa! _**Por exemplo:**_

```ts
type CatNames = 'Garfield' | 'Yoru' | 'Yuki' | 'Fluffy' | 'Lady' | 'Lucky'

type MyCatNames = Extract<CatNames, 'Yoru' | 'Yuki'>
// |-> Extract these two `literal types` from CatNames `literal type`

type Cat = {
  age: number
  name: CatNames
}

function getMyCat(age: number, name: MyCatNames): Cat {
  // |--> only show 'Yoru' and
  //                'Yuki'
  return {
    age,
    name,
  } as Cat
}

const myCat1 = getMyCat(1, 'Yoru')
const myCat2 = getMyCat(1, 'Yuki')

const otherCat: Cat = {
  age: 3,
  name: 'Garfield',
}
const otherCatWithMyCatName: Cat = {
  age: 5,
  name: 'Yoru',
}

// tmj!
```

> link do [TS Playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwghsAcnAthAzlAvFA5AcTgCcAzASwgBsATXKAHzwE0B7IgVzsdyfYGsyXPADFK7EiRBDcAGTjUpDPDPYBjPlIBQm0JCgBZEPCSoM2KAFEAHsCJxVwADzHkadABpmbTkp79BAHyaUCGhYeERkVEA9NEMALQBljZ2DlDAABYY0MAA7ixQAAaUZMAQdpTp4BiFUCRELCiwCK5mxaXlcJW6EIXaPc3A5gDewVBwAOYQAFxQAHbsKABG5e5jc6azLqbomgC+2iTscw5kLHNQU8CGxgAUkzPziytEnhtoszctOwCUWwhQUZRYEgsKxBKJKDnSggKDoDIsXJeDh0OBzahQMag7ERcE4kJ+AS4MZECDAdhEC5A0IPNZhd4QOlQPbjTDGfbaVTndBDFBGBAARnMVy+wFuAs8PG8uB+mi5cx5UD5xgATMKyaLxZLeETZXLuUMWJlysZ-kMcNSQg9ZgBmJkhBmzAjEchUWgc+WKo1ZIjGADqpQyotaZpGWPGU1mAFZ7fNNsjOPsgA)

espero que ajude alguém!

(OBS: esse post foi escrito em no máximo 10 minutos)

meus links: https://thayto.com/linktree

_Photo by <a href="https://unsplash.com/@_k_arinn?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Karina Vorozheeva</a> on <a href="https://unsplash.com/photos/white-butterfly-resting-on-cats-nose-rW-I87aPY5Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>_


Não vou enrolar nada. Basicamente é só você utilizar o Utility Type Extract do próprio TypeScript e boa!

TypeScript - Como pegar uma string no seu Literal Types


## O que é Template Literal Types?

**Template Literal Types** é um bglh insano que expande as possibilidades do que já era possível com o `string literals + unions` do TS, dá uma olhada!

Ele tem a mesma sintaxe do template literal string do JavaScript.

```ts
type Tchau = 'tchau!'

type Salve = `Oi ${Tchau}`
```

Com ele é possivel usar sua necessidade + imaginação pra fazer diversas coisas bacanas que vão agregar muito no seu projeto/type.

Um exemplo bacana seria padronizar que todas as propriedades extras que adicionarmos à um type, necessitem de ter o prefixo "data\_" e o suffixo "\_prop", assim conseguimos criar um objeto com um padrão que vai facilitar o consumo de leitura para sabermos quais as propriedades extras que foram enviadas.

Falar é fácil, mas cadê o exemplo? vamos começar criando um type EventData, ele é a nossa base para nosso objeto evento de evento.

```ts
type EventData = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
}
```

Ele já possui propriedades definidas, que não podem ser alteradas, mas agora precisamos enviar mais alguns campos relacionados aos fields que ele tem em cada step, poderiamos extender o type EventData e adicionar os campos, mas ao invés disso, bora usar o Template Literal Types!

```ts
type FormFields = {
  name: string
  age: number
}

type EventDataExtraProps<T> = `field_${string & keyof T}`
// aqui vamos modificar um pouco o EventData
type EventData<T> = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
} & Record<EventDataExtraProps<T>, any>

const event: EventData<FormFields> = {
  id: 'sextou?',
  name: 'thayto',
  step: 'first_step',
  field_name: 'full_name',
  field_age: 22,
}
```

Parece complexo, mas é bem simples, em projetos grandes / libs, com um único utilitário desses, conseguimos fazer mágica nos auto_completes e na padronização do envio de determinadas propriedades!

Espero que tenham aprendido algo, se não aprendeu, pelo menos leu até o final, tmj!

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

![imagem te chamando de burro se você ainda não conhece o template literal types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12fb3fct25e3hcwbhr9d.png)


Template Literal Types é um bglh insano que expande as possibilidades do que já era possível com o string literals + unions do TS, dá uma olhada! Ele tem a mesma sintaxe do template literal string do JavaScript.

TypeScript - Template Literal Types


## De forma rápida:

Basta aperta a tecla `.` dentro do seu repositório de preferência

> no final do post tem algumas outras maneiras de abrir o github.dev também!

## TL;DR

Todo dev já precisou em algum momento editar um arquivo dentro do GitHub e se deparou com essa tela de edição padrão do próprio GitHub:

![Tela de edição padrão do GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3kximxr5ck48anftm7b.png)

No primeiro momento ela parece uma tela "OK" para fazermos uma edição rápida, mas quando precisamos pesquisar mais coisas dentro do repositório, essa tela não nos ajuda muito e é por isso que vou mostrar como abrir o Visual Studio Code(VSCode) direto do GitHub.

É bem simples, basta apertar a tecla `.` **(ponto)** do seu teclado e voilá, vai abrir magicamente um VSCode direto do seu navegador e dentro do seu repositório com quase todas as funcionalidades que o VSCode tem.

![Tela de carregamento do VSCode dentro do navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3fkli1ddemzshin31m6.png)

![VSCode aberto dentro do navegador mostrando o repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oaiou6k7vvaufog1rsgh.png)

Agora você consegue fazer quantas pesquisas quiser, mexer em quantos arquivos forem necessários e também vai poder fazer commits, instalar extensões, mudar o tema, entre outras várias funcionalidades.

## Outras maneiras de abrir o VSCode direto do GitHub

Outras maneiras de abrir qualquer repo do GitHub no `github.dev` (VSCode do GitHub) são:

- Alterando a URL de `github.com` para `github.dev`
- Apertando a tecla `.` dentro de algum repositório
- Ao abrir um arquivo dentro de algum repositório, selecione o menu suspenso ▼ e clique em abrir com (open with) `github.dev`.
  ![Print da tela do github que mostra o menu suspenso e o botão de abrir com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jinx6wgkatgmocwaubzb.png)

Essa foi a dica de hoje, espero ter ajudado, tmj! 😎


Todo dev já precisou em algum momento editar um arquivo dentro do GitHub e se deparou com essa tela de edição padrão do próprio GitHub

Como abrir o Visual Studio Code (VSCode) dentro do GitHub


# Contexto

Acredito que todo dev já ficou em dúvida sobre as diferenças entre alguns operadores do JavaScript/TypeScript. Por isso fiz esse post simples e rápido sobre as diferenças entre os operadores ?, ?? e ||. Confira logo abaixo

## ? - Optional Chaining

`?` -> **Optional Chaining Operator**.
Permite a leitura do valor de uma propriedade localizada internamente em uma cadeia de objetos conectados, sem que a validação de cada referência da cadeia seja expressivamente realizada.

O operador `?.` funciona de maneira similar ao operador `.` de encadeamento, exceto que, ao invés de causar um erro se a referência é [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` ou `undefined`), a expressão sofre um "curto-circuito" e retorna com um valor de `undefined`. Quando utilizado com uma chamada de função, retorna `undefined` se a função executada não existir.

Isso resulta em expressões mais curtas e simples ao acessar propriedades encadeadas quando a possibilidade de uma referência ser inexistente. Isso também pode auxiliar ao explorar o conteúdo de um objeto quando não existe garantia da existência de determinadas propriedades obrigatórias.

**Exemplo**

```js
const user = {
  id: 13,
  name: 'Thayto',
}

console.log(user?.name) // John
console.log(user?.fullName) // undefined, aplicação não vai quebrar.
console.log(user.fullName) // TypeError: Cannot read property ‘fullName’ of undefined, aplicação quebra.
```

## ?? - Nullish Coalesing

`??` -> **Nullish Coalescing Operator**.
É um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é `null` ou `undefined`. Caso contrário, ele retorna o seu operando do lado esquerdo.

**Exemplo**

```js
console.log(13 ?? 'não encontrado') // 13
console.log(0 ?? 'não encontrado') // 0

console.log('Dri' ?? 'não encontrado') // "Dri"
console.log('' ?? 'não encontrado') // ""

console.log(true ?? 'não encontrado') // true
console.log(false ?? 'não encontrado') // false

console.log(undefined ?? 'não encontrado') // "não encontrado"
console.log(null ?? 'não encontrado') // "não encontrado"
```

## || - Logical OR

`||` é o **Logical OR Operator**
A expressão Logical OR é avaliada da esquerda para a direita, é testada para possível avaliação de "curto-circuito" usando a seguinte regra:

`(alguma truthy expression) || expr` é avaliado em curto-circuito para a expressão verdadeira.

Curto-circuito significa que a parte `expr` acima não é avaliada, portanto, quaisquer efeitos colaterais de fazê-lo não têm efeito (por exemplo, se `expr` é uma chamada de função, a chamada nunca ocorre). Isso acontece porque o valor do operador já é determinado após a avaliação do primeiro operando.

**Exemplo**

```js
console.log(13 || 'não encontrado') // 13
console.log(0 || 'não encontrado') // "não encontrado"

console.log('Dri' || 'não encontrado') // "Dri"
console.log('' || 'não encontrado') // "não encontrado"

console.log(true || 'não encontrado') // true
console.log(false || 'não encontrado') // "não encontrado"

console.log(undefined || 'não encontrado') // "não encontrado"
console.log(null || 'não encontrado') // "não encontrado"
```


? -> Optional Chaining Operator. Permite a leitura do valor de uma propriedade localizada internamente em uma cadeia de objetos conectados, sem que a validação de cada referência da cadeia seja expressivamente realizada.

Diferença entre os operadores ?, ?? e || no JavaScript / TypeScript


Nesse guia simples vou mostrar como turbinar o seu git bash com aliases que vão facilitar e agilizar muito na hora de fazer seus commits, pulls, pegarem logs, trocarem de branch, rebases, merges, etc..

> Primeiro pra quem não conhece, o famoso plugin de git do zsh é esse: [zsh git plugin](https://github.com/ohmyzsh/ohmyzsh/blob/master/plugins/git/git.plugin.zsh)

Bom o primeiro passo para adicionar esses aliases é você ter o [git bash](https://git-scm.com/download/win) instalado.

E para adicionar os aliases é bem simples basta acessar a pasta onde estão os profiles do git bash (lembrando que esse guia é somente para **Windows**), que vai estar no seguinte caminho: `C:\Program Files\Git\etc\profile.d`

![Selecionando o arquivo aliases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u76fyz7yqeztqzk54erg.png)

Depois você vai procurar o arquivo `aliases.sh` e abrir no seu editor de texto preferido (pode até ser o notepad) e adicionar as seguintes linhas:

```bash
alias g=git
alias ga='git add'
alias gaa='git add --all'
alias gam='git am'
alias gama='git am --abort'
alias gamc='git am --continue'
alias gams='git am --skip'
alias gamscp='git am --show-current-patch'
alias gap='git apply'
alias gapa='git add --patch'
alias gapt='git apply --3way'
alias gau='git add --update'
alias gav='git add --verbose'
alias gb='git branch'
alias gbD='git branch -D'
alias gba='git branch -a'
alias gbd='git branch -d'
alias gbda='git branch --no-color --merged | command grep -vE "^([+*]|\s*($(git_main_branch)|$(git_develop_branch))\s*$)" | command xargs git branch -d 2>/dev/null'
alias gbl='git blame -b -w'
alias gbnm='git branch --no-merged'
alias gbr='git branch --remote'
alias gbs='git bisect'
alias gbsb='git bisect bad'
alias gbsg='git bisect good'
alias gbsr='git bisect reset'
alias gbss='git bisect start'
alias gc='git commit -v'
alias 'gc!'='git commit -v --amend'
alias gca='git commit -v -a'
alias 'gca!'='git commit -v -a --amend'
alias gcam='git commit -a -m'
alias 'gcan!'='git commit -v -a --no-edit --amend'
alias 'gcans!'='git commit -v -a -s --no-edit --amend'
alias gcas='git commit -a -s'
alias gcasm='git commit -a -s -m'
alias gcb='git checkout -b'
alias gcd='git checkout $(git_develop_branch)'
alias gcf='git config --list'
alias gcl='git clone --recurse-submodules'
alias gclean='git clean -id'
alias gcm='git checkout $(git_main_branch)'
alias gcmsg='git commit -m'
alias 'gcn!'='git commit -v --no-edit --amend'
alias gco='git checkout'
alias gcor='git checkout --recurse-submodules'
alias gcount='git shortlog -sn'
alias gcp='git cherry-pick'
alias gcpa='git cherry-pick --abort'
alias gcpc='git cherry-pick --continue'
alias gcs='git commit -S'
alias gcsm='git commit -s -m'
alias gcss='git commit -S -s'
alias gcssm='git commit -S -s -m'
alias gd='git diff'
alias gdca='git diff --cached'
alias gdct='git describe --tags $(git rev-list --tags --max-count=1)'
alias gdcw='git diff --cached --word-diff'
alias gds='git diff --staged'
alias gdt='git diff-tree --no-commit-id --name-only -r'
alias gdup='git diff @{upstream}'
alias gdw='git diff --word-diff'
alias gf='git fetch'
alias gfa='git fetch --all --prune --jobs=10'
alias gfg='git ls-files | grep'
alias gfo='git fetch origin'
alias gg='git gui citool'
alias gga='git gui citool --amend'
alias ggpull='git pull origin "$(git_current_branch)"'
alias ggpur=ggu
alias ggpush='git push origin "$(git_current_branch)"'
alias ggsup='git branch --set-upstream-to=origin/$(git_current_branch)'
alias ghh='git help'
alias gignore='git update-index --assume-unchanged'
alias gignored='git ls-files -v | grep "^[[:lower:]]"'
alias git-svn-dcommit-push='git svn dcommit && git push github $(git_main_branch):svntrunk'
alias gk='\gitk --all --branches &!'
alias gke='\gitk --all $(git log -g --pretty=%h) &!'
alias gl='git pull'
alias glg='git log --stat'
alias glgg='git log --graph'
alias glgga='git log --graph --decorate --all'
alias glgm='git log --graph --max-count=10'
alias glgp='git log --stat -p'
alias glo='git log --oneline --decorate'
alias globurl='noglob urlglobber '
alias glod='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset'\'
alias glods='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset'\'' --date=short'
alias glog='git log --oneline --decorate --graph'
alias gloga='git log --oneline --decorate --graph --all'
alias glol='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'
alias glola='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'' --all'
alias glols='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'' --stat'
alias glp=_git_log_prettily
alias gluc='git pull upstream $(git_current_branch)'
alias glum='git pull upstream $(git_main_branch)'
alias gm='git merge'
alias gma='git merge --abort'
alias gmom='git merge origin/$(git_main_branch)'
alias gmtl='git mergetool --no-prompt'
alias gmtlvim='git mergetool --no-prompt --tool=vimdiff'
alias gmum='git merge upstream/$(git_main_branch)'
alias gp='git push'
alias gpd='git push --dry-run'
alias gpf='git push --force-with-lease'
alias 'gpf!'='git push --force'
alias gpoat='git push origin --all && git push origin --tags'
alias gpr='git pull --rebase'
alias gpristine='git reset --hard && git clean -dffx'
alias gpsup='git push --set-upstream origin $(git_current_branch)'
alias gpu='git push upstream'
alias gpv='git push -v'
alias gr='git remote'
alias gra='git remote add'
alias grb='git rebase'
alias grba='git rebase --abort'
alias grbc='git rebase --continue'
alias grbd='git rebase $(git_develop_branch)'
alias grbi='git rebase -i'
alias grbm='git rebase $(git_main_branch)'
alias grbo='git rebase --onto'
alias grbom='git rebase origin/$(git_main_branch)'
alias grbs='git rebase --skip'
alias grep='grep --color=auto --exclude-dir={.bzr,CVS,.git,.hg,.svn,.idea,.tox}'
alias grev='git revert'
alias grh='git reset'
alias grhh='git reset --hard'
alias grm='git rm'
alias grmc='git rm --cached'
alias grmv='git remote rename'
alias groh='git reset origin/$(git_current_branch) --hard'
alias grrm='git remote remove'
alias grs='git restore'
alias grset='git remote set-url'
alias grss='git restore --source'
alias grst='git restore --staged'
alias grt='cd "$(git rev-parse --show-toplevel || echo .)"'
alias gru='git reset --'
alias grup='git remote update'
alias grv='git remote -v'
alias gsb='git status -sb'
alias gsd='git svn dcommit'
alias gsh='git show'
alias gsi='git submodule init'
alias gsps='git show --pretty=short --show-signature'
alias gsr='git svn rebase'
alias gss='git status -s'
alias gst='git status'
alias gsta='git stash push'
alias gstaa='git stash apply'
alias gstall='git stash --all'
alias gstc='git stash clear'
alias gstd='git stash drop'
alias gstl='git stash list'
alias gstp='git stash pop'
alias gsts='git stash show --text'
alias gstu='gsta --include-untracked'
alias gsu='git submodule update'
alias gsw='git switch'
alias gswc='git switch -c'
alias gswd='git switch $(git_develop_branch)'
alias gswm='git switch $(git_main_branch)'
alias gtl='gtl(){ git tag --sort=-v:refname -n -l "${1}*" }; noglob gtl'
alias gts='git tag -s'
alias gtv='git tag | sort -V'
alias gunignore='git update-index --no-assume-unchanged'
alias gunwip='git log -n 1 | grep -q -c "\-\-wip\-\-" && git reset HEAD~1'
alias gup='git pull --rebase'
alias gupa='git pull --rebase --autostash'
alias gupav='git pull --rebase --autostash -v'
alias gupom='git pull --rebase origin $(git_main_branch)'
alias gupomi='git pull --rebase=interactive origin $(git_main_branch)'
alias gupv='git pull --rebase -v'
alias gwch='git whatchanged -p --abbrev-commit --pretty=medium'
alias gwip='git add -A; git rm $(git ls-files --deleted) 2> /dev/null; git commit --no-verify --no-gpg-sign -m "--wip-- [skip ci]"'
```

Pronto! Agora você pode ser mais feliz utilizando o git de forma mais ágil e escrevendo bem menos com esses aliases! :D


Nesse guia simples vou mostrar como turbinar o seu git bash com aliases que vão facilitar e agilizar muito na hora de fazer seus commits, pulls, pegarem logs, trocarem de branch, rebases, merges, etc..

Turbinando seu git bash (Windows) adicionando aliases (como se fosse o git plugin do zsh)


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 :)

```bash
npx create-turbo@latest
```

E aí provavelmente vai aparecer algo do tipo:

```bash
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:

```bash
>>> 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:

```bash
? 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:

```bash
>>> 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:

![Imagem mostrando como deveria ficar a estrutura do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fizlxcl9y35xg8ixxxld.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwu7606izt80mx6u6bwx.png)

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

```toml
[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](https://www.conventionalcommits.org/en/v1.0.0/#specification) coloquem um comentário caso queiram que eu traga algo relacionado a padrões de commit :)

```bash
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

![Imagem mostrando criação do repo no GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyz9ih56t7zhxdobuse6.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf8qj76l9l08kxj7s3s9.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vonm2u0moerjgcg1uy29.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjyt2bbhy5f97wxg50s8.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfpndqa3d619fh8wsmbs.png)

Selecionem a opção `Import an existent project`

![Imagem mostrando selecionando a opção Import an existent project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02ryw39x9gvq2oqpvvgw.png)

Selecionem o provider do GitHub

![Imagem mostrando uma seta apontando para o ícone do GitHub que é o provider que devemos selecionar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygc2oh8gwrr7teau4zas.png)

Pesquisem o nome que deram ao projeto de vocês

![Image mostrando a pesquisa para o nosso repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn5y68ln56sni8phfijj.png)

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/
.next](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72w3i8z16opeu4tt3mgr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sl83phei0mqe45rywhu.png)

Link do deploy: https://thayto-netlify-turborepo-post.netlify.app/

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


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á?

Como configurar o deploy do Turborepo no Netlify


Pra quem ainda não conhece, o `nvm` é um excelente utilitário pra quando estamos querendo trocar a versão do node com agilidade sem precisar desinstalar a atual e instalar a desejada.

Por um bom tempo eu utilizei o comando:

```bash
nvm use <VERSÃO_DESEJADA>
```

Para alternar a versão do node pra uma mais recente, até que uns dias atrás descobri como alterar de forma bem simples a versão default do nvm.

Basta utilizar o seguinte comando alterando o trecho `<VERSÃO_DESEJADA>` pela versão que você deseja manter como a padrão, por ex `16.5.0`:

```bash
nvm alias default <VERSÃO_DESEJADA>
```

E pronto, agora você vai estar sempre utilizando essa versão do nvm em qualquer momento ou terminal que você abrir 😁.


Pra quem ainda não conhece, o `nvm` é um excelente utilitário pra quando estamos querendo trocar a versão do node com agilidade sem precisar desinstalar a atual e instalar a desejada.

Rafael Thayto Tani

Senior Software Engineer

Posts