O que é o Vite? Guia simples para criadores de aplicações

O Vite (pronuncia-se "vit", que em francês quer dizer "rápido") é uma ferramenta de build para sites e aplicações web. Enquanto está a construir, corre um servidor de desenvolvimento que mostra as alterações no navegador quase de imediato. Quando está pronto para publicar, empacota o seu código em ficheiros pequenos e otimizados que qualquer alojamento web consegue servir. É gratuito, de código aberto e a ferramenta predefinida por trás de muitos projetos React, Vue e Svelte.

Porque é que o Vite importa quando se cria com IA

Pode nunca escrever um comando do Vite, mas, se a sua aplicação foi criada com um construtor de aplicações com IA, é provável que o Vite a esteja a correr. O Mythex começa os novos projetos com Vite + React + TypeScript + Tailwind, a não ser que peça outra coisa (como a tecnologia é escolhida).

Saber o que o Vite faz ajuda-o a:

• Perceber a Pré-visualização. A pré-visualização em direto que se atualiza enquanto a IA edita ficheiros é, tipicamente, um servidor de desenvolvimento Vite.
• Perceber a publicação. Uma aplicação Vite transforma-se numa pasta de ficheiros estáticos — HTML, JavaScript, CSS e imagens — que é barata e simples de alojar.
• Ler mensagens de erro. Quando a pré-visualização mostra uma sobreposição de erro a vermelho ou uma página em branco, muitas vezes é o Vite a indicar que um ficheiro não compilou.
• Conhecer os seus limites. O Vite constrói o frontend. Se a sua aplicação precisar de um backend — uma base de dados, chaves de API secretas, pagamentos — isso corre noutro lugar. Veja frontend vs backend.

Uma analogia do dia a dia

Pense na cozinha de um restaurante.

• Durante a preparação do serviço (desenvolvimento), o chef prova e ajusta cada prato à medida que avança. Muda o tempero e volta a provar um segundo depois. É isso o servidor de desenvolvimento do Vite: altera um ficheiro, a página atualiza-se de imediato, muitas vezes sem perder o que tinha escrito num formulário.
• Para um pedido de catering (produção), tudo é cozinhado, porcionado, embalado e etiquetado para viajar bem e poder ser servido em qualquer lugar. É isso o vite build: o seu código é agrupado, reduzido e marcado com impressões digitais em ficheiros prontos para qualquer alojamento.

As mesmas receitas, duas formas muito diferentes de as preparar — e o Vite faz as duas.

O que o Vite realmente faz

Uma aplicação web moderna é feita de muitos ficheiros: componentes, estilos, imagens e bibliotecas de terceiros. Os navegadores não conseguem usar tudo isso tal como está escrito. O TypeScript tem de se tornar JavaScript, o JSX do React tem de ser transformado, e as classes do Tailwind têm de se tornar CSS.

O Vite trata disto em dois modos:

As ferramentas mais antigas agrupavam a aplicação inteira antes de mostrar o que quer que fosse, por isso iniciar ou atualizar um projeto grande podia demorar muito. O truque do Vite é saltar esse passo durante o desenvolvimento e deixar o navegador carregar os ficheiros conforme são necessários. Para produção, continua a agrupar — a partir do Vite 8, com um agrupador chamado Rolldown — porque muitos ficheiros pequenos são mais lentos para os visitantes do que alguns ficheiros otimizados.

Um exemplo prático: o que há dentro de um projeto Vite

Eis, mais ou menos, o aspeto de uma pequena aplicação Vite + React:

my-app/
  index.html          ← a única página HTML onde a aplicação começa
  package.json        ← lista de bibliotecas e scripts (dev, build)
  vite.config.ts      ← definições e plugins do Vite
  src/
    main.tsx          ← inicia o React e monta-o no index.html
    App.tsx           ← o componente de topo da sua aplicação
    index.css         ← estilos, por exemplo @import "tailwindcss";
  public/             ← ficheiros copiados tal como estão (favicon, robots.txt)

E os scripts em package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Agora acompanhe uma única alteração:

1. Pede à IA para "deixar o título azul".
2. Ela edita uma classe em App.tsx.
3. O Vite repara que o ficheiro mudou, transforma apenas esse ficheiro e envia a atualização para o navegador.
4. O título fica azul na pré-visualização, normalmente em menos de um segundo.

Ao publicar, vite build produz algo como dist/index.html mais dist/assets/index-a1b2c3.js. Essa parte do nome do ficheiro, que parece aleatória, muda sempre que o conteúdo muda, para que os navegadores e as CDNs possam guardar os ficheiros em cache durante muito tempo sem servir código desatualizado.

Variáveis de ambiente no Vite

O Vite só expõe ao código do navegador as variáveis cujo nome começa por VITE_, por exemplo VITE_PUBLIC_MAP_ID. É uma medida de segurança: tudo o que está no código do navegador pode ser visto pelos visitantes, por isso as chaves secretas nunca devem ter esse prefixo e devem ficar num backend. Veja variáveis de ambiente e segredos.

Termos-chave

Ideias erradas comuns

• "O Vite é uma framework." É uma ferramenta de build. O React, o Vue ou o Svelte é que são a framework; o Vite corre-a e empacota-a.
• "Uma aplicação Vite inclui um backend." Uma aplicação Vite standard é apenas frontend. Bases de dados, inícios de sessão e chaves secretas precisam de um servidor ou API ao lado.
• "O servidor de desenvolvimento pode ficar online." Não foi feito para tráfego real. Publique sempre o resultado da build de produção.
• "Tudo o que está no .env é secreto." Numa aplicação Vite, as variáveis VITE_ ficam incorporadas nos ficheiros que cada visitante descarrega.
• "Se atualizar uma página que dá 404, a aplicação está avariada." Numa aplicação de página única, o alojamento tem de devolver todas as rotas para index.html. É uma definição de alojamento — veja como corrigir erros 404 depois de publicar.

O que pedir ao seu construtor de IA

• "Esta aplicação é só Vite (frontend) ou também tem backend? Onde corre cada parte?"
• "Execute a build de produção e corrija todos os erros ou avisos antes de eu publicar."
• "Confirme que nenhuma chave secreta está em variáveis VITE_ ou em qualquer código de frontend."
• "A pré-visualização mostra uma página em branco — verifique os erros do Vite e da consola do navegador e corrija a causa." Veja como corrigir uma página branca.
• "Garanta que atualizar qualquer URL de página funciona depois de publicar, e não apenas a página inicial."

O Vite no Mythex

Cada novo projeto do Mythex começa no Vite, a não ser que peça Next.js, HTML estático ou um backend diferente. A Pré-visualização em direto no seu sandbox privado atualiza-se à medida que o agente edita ficheiros, e a Publicação faz a build da aplicação e publica-a — não precisa de configurar nenhum alojamento. Se mais tarde precisar de uma API ou de uma base de dados, peça no chat e o Mythex pode acrescentar um serviço de backend junto do frontend Vite (aplicações com vários serviços).

Perguntas