O que é Vite? Um guia simples para criadores de apps

Vite (pronunciado “vit”, que em francês significa “rápido”) é uma ferramenta de build para sites e apps web. Enquanto você constrói, ela roda um servidor de desenvolvimento que mostra suas mudanças no navegador quase instantaneamente. Quando você está pronto para publicar, ela empacota seu código em arquivos pequenos e otimizados que qualquer hospedagem web consegue servir. É gratuita, de código aberto e a ferramenta padrão por trás de muitos projetos React, Vue e Svelte.

Por que o Vite importa ao criar com IA

Você pode nunca digitar um comando do Vite, mas, se seu app foi criado com um criador de apps com IA, provavelmente é o Vite que o roda. O Mythex inicia novos projetos com Vite + React + TypeScript + Tailwind, a menos que você peça outra coisa (como a tecnologia é escolhida).

Entender o que o Vite faz ajuda você a:

• Entender o Preview. A prévia ao vivo que se atualiza enquanto a IA edita os arquivos normalmente é um servidor de desenvolvimento do Vite.
• Entender a publicação. Um app Vite vira uma pasta de arquivos estáticos — HTML, JavaScript, CSS e imagens —, o que é barato e simples de hospedar.
• Ler mensagens de erro. Quando a prévia mostra uma sobreposição vermelha de erro ou uma página em branco, muitas vezes é o Vite informando que um arquivo não compilou.
• Conhecer seus limites. O Vite constrói o frontend. Se seu app precisa de um backend — um banco de dados, chaves secretas de API, pagamentos —, isso roda em outro lugar. Veja frontend vs backend.

Uma analogia do dia a dia

Pense em uma cozinha de restaurante.

• Durante o preparo do serviço (desenvolvimento), o chef prova e ajusta cada prato enquanto cozinha. Muda o tempero, prova de novo um segundo depois. É isso o servidor de desenvolvimento do Vite: você muda um arquivo, a página se atualiza na hora, muitas vezes sem perder o que tinha digitado em um formulário.
• Para um pedido de buffet (produção), tudo é cozido, porcionado, embalado e rotulado para viajar bem e ser servido em qualquer lugar. É isso o vite build: seu código é agrupado, reduzido e recebe identificadores de versão nos arquivos, prontos para qualquer hospedagem.

As mesmas receitas, duas formas bem diferentes de trabalhá-las — e o Vite faz as duas.

O que o Vite realmente faz

Um app web moderno é feito de muitos arquivos: componentes, estilos, imagens e bibliotecas de terceiros. Os navegadores não conseguem usar tudo isso como está escrito. O TypeScript precisa virar JavaScript, o JSX do React precisa ser transformado, e as classes do Tailwind precisam virar CSS.

O Vite cuida disso em dois modos:

Ferramentas mais antigas agrupavam o app inteiro antes de mostrar qualquer coisa, então iniciar e atualizar um projeto grande podia demorar muito. O truque do Vite é pular isso durante o desenvolvimento e deixar o navegador carregar os arquivos conforme necessário. Para produção, ele ainda agrupa — a partir do Vite 8, com um empacotador chamado Rolldown — porque muitos arquivos pequenos são mais lentos para os visitantes do que alguns arquivos otimizados.

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

Aqui está, de forma aproximada, como é um pequeno app Vite + React:

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

E os scripts no package.json:

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

Agora acompanhe uma única mudança:

1. Você pede à IA para “deixar o título azul”.
2. Ela edita uma classe em App.tsx.
3. O Vite percebe que o arquivo mudou, transforma só esse arquivo e envia a atualização para o navegador.
4. O título fica azul na prévia, normalmente em menos de um segundo.

Ao publicar, vite build gera algo como dist/index.html mais dist/assets/index-a1b2c3.js. Aquela parte com cara de número aleatório no nome do arquivo muda sempre que o conteúdo muda, para que navegadores e CDNs possam guardar os arquivos em cache por muito tempo sem servir código antigo.

Variáveis de ambiente no Vite

O Vite só expõe ao código do navegador as variáveis cujo nome começa com VITE_, por exemplo VITE_PUBLIC_MAP_ID. Isso é uma medida de segurança: qualquer coisa no código do navegador pode ser vista pelos visitantes, então chaves secretas nunca podem ter esse prefixo e devem ficar em um backend. Veja variáveis de ambiente e segredos.

Termos-chave

Equívocos comuns

• “Vite é um framework.” É uma ferramenta de build. React, Vue ou Svelte é o framework; o Vite o roda e o empacota.
• “Um app Vite inclui um backend.” Um app Vite padrão é apenas frontend. Bancos de dados, logins e chaves secretas precisam de um servidor ou API ao lado.
• “O servidor de desenvolvimento pode ficar online.” Ele não foi feito para tráfego real. Sempre publique a saída do build de produção.
• “Tudo que está no .env é secreto.” Em um app Vite, as variáveis VITE_ são incorporadas nos arquivos que todo visitante baixa.
• “Atualizar uma página que dá erro 404 significa que o app está quebrado.” Em um single-page app, a hospedagem precisa devolver todas as rotas para o index.html. É uma configuração da hospedagem — veja como corrigir erros 404 depois de publicar.

O que pedir ao seu criador com IA

• “Este app é só Vite (frontend) ou também tem backend? Onde roda cada parte?”
• “Rode o build de produção e corrija todos os erros e avisos antes de eu publicar.”
• “Confira se nenhuma chave secreta está em variáveis VITE_ ou em qualquer código do frontend.”
• “A prévia mostra uma página em branco — verifique os erros do Vite e do console do navegador e corrija a causa.” Veja como corrigir uma tela branca.
• “Garanta que atualizar qualquer URL de página funcione depois de publicar, não só a página inicial.”

Vite no Mythex

Todo novo projeto Mythex começa com Vite, a menos que você peça Next.js, HTML estático ou um backend diferente. A prévia ao vivo no seu sandbox privado se atualiza conforme o agente edita os arquivos, e Publicar faz o build do app e o implanta — não há hospedagem para você configurar. Se depois precisar de uma API ou de um banco de dados, peça no chat e o Mythex pode adicionar um serviço de backend junto ao frontend Vite (apps com múltiplos serviços).

Perguntas