Servidor de desenvolvimento Fullstack Bun JS

Para começar, importe arquivos HTML e passe-os para a opção routes em Bun.serve().

import { serve } from "bun";
import dashboard from "./dashboard.html";
import homepage from "./index.html";

const server = serve({
  routes: {
    // ** Imports de HTML **
    // Empacota e roteia index.html para "/". Isso usa HTMLRewriter para escanear
    // o HTML por tags `<script>` e `<link>`, executa o bundler de JavaScript
    // e CSS do Bun neles, transpila qualquer TypeScript, JSX e TSX,
    // faz downlevel de CSS com o parser CSS do Bun e serve o resultado.
    "/": homepage,
    // Empacota e roteia dashboard.html para "/dashboard"
    "/dashboard": dashboard,

    // ** Endpoints de API ** (requer Bun v1.2.3+)
    "/api/users": {
      async GET(req) {
        const users = await sql`SELECT * FROM users`;
        return Response.json(users);
      },
      async POST(req) {
        const { name, email } = await req.json();
        const [user] = await sql`INSERT INTO users (name, email) VALUES (${name}, ${email})`;
        return Response.json(user);
      },
    },
    "/api/users/:id": async req => {
      const { id } = req.params;
      const [user] = await sql`SELECT * FROM users WHERE id = ${id}`;
      return Response.json(user);
    },
  },

  // Habilita modo de desenvolvimento para:
  // - Mensagens de erro detalhadas
  // - Hot reloading (requer Bun v1.2.3+)
  development: true,
});

console.log(`Listening on ${server.url}`);

bash

bun run app.ts

Rotas HTML

Imports de HTML como Rotas

A web começa com HTML, e o servidor de desenvolvimento fullstack do Bun também.

Para especificar entrypoints para seu frontend, importe arquivos HTML em seus arquivos JavaScript/TypeScript/TSX/JSX.

import dashboard from "./dashboard.html";
import homepage from "./index.html";

Estes arquivos HTML são usados como rotas no servidor de desenvolvimento do Bun que você pode passar para Bun.serve().

Bun.serve({
  routes: {
    "/": homepage,
    "/dashboard": dashboard,
  },

  fetch(req) {
    // ... requisições de api
  },
});

Quando você faz uma requisição para /dashboard ou /, Bun automaticamente empacota as tags <script> e <link> nos arquivos HTML, expõe-nas como rotas estáticas e serve o resultado.

Exemplo de Processamento de HTML

Um arquivo index.html como este:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./sentry-and-preloads.ts"></script>
    <script type="module" src="./my-app.tsx"></script>
  </body>
</html>

Torna-se algo como isto:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link rel="stylesheet" href="/index-[hash].css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index-[hash].js"></script>
  </body>
</html>

Integração com React

Para usar React no seu código do lado do cliente, importe react-dom/client e renderize seu app.

src/backend.ts

import dashboard from "../public/dashboard.html";
import { serve } from "bun";

serve({
  routes: {
    "/": dashboard,
  },
  async fetch(req) {
    // ... requisições de api
    return new Response("hello world");
  },
});

tsx

import { createRoot } from 'react-dom/client';
import App from './app';

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

html

<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../src/frontend.tsx"></script>
  </body>
</html>

tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

Modo de Desenvolvimento

Ao buildar localmente, habilite o modo de desenvolvimento definindo development: true em Bun.serve().

import homepage from "./index.html";
import dashboard from "./dashboard.html";

Bun.serve({
  routes: {
    "/": homepage,
    "/dashboard": dashboard,
  },

  development: true,

  fetch(req) {
    // ... requisições de api
  },
});

Recursos do Modo de Desenvolvimento

Quando development é true, Bun irá:

Incluir o cabeçalho SourceMap na resposta para que devtools possam mostrar o código fonte original
Desabilitar minificação
Re-empacotar assets em cada requisição para um arquivo .html
Habilitar hot module reloading (a menos que hmr: false esteja definido)
Ecoar logs de console do navegador para o terminal

Configuração Avançada de Desenvolvimento

Bun.serve() suporta ecoar logs de console do navegador para o terminal.

Para habilitar isso, passe console: true no objeto development em Bun.serve().

import homepage from "./index.html";

Bun.serve({
  // development também pode ser um objeto.
  development: {
    // Habilita Hot Module Reloading
    hmr: true,

    // Ecoar logs de console do navegador para o terminal
    console: true,
  },

  routes: {
    "/": homepage,
  },
});

Quando console: true está definido, Bun irá streamar logs de console do navegador para o terminal. Isso reusa a conexão WebSocket existente do HMR para enviar os logs.

Desenvolvimento vs Produção

Feature	Desenvolvimento	Produção
Source maps	✅ Habilitado	❌ Desabilitado
Minificação	❌ Desabilitado	✅ Habilitado
Hot reloading	✅ Habilitado	❌ Desabilitado
Empacotamento de assets	🔄 Em cada requisição	💾 Em cache
Logs de console	🖥️ Navegador → Terminal	❌ Desabilitado
Detalhes de erro	📝 Detalhado	🔒 Mínimo

Modo de Produção

Hot reloading e development: true ajudam você a iterar rapidamente, mas em produção, seu servidor deve ser o mais rápido possível e ter o menor número de dependências externas possível.

Bundling Ahead of Time (Recomendado)

A partir do Bun v1.2.17, você pode usar Bun.build ou bun build para empacotar sua aplicação full-stack antecipadamente.

bash

bun build --target=bun --production --outdir=dist ./src/index.ts

Quando o bundler do Bun vê um import de HTML a partir de código do lado do servidor, ele empacota os arquivos JavaScript/TypeScript/TSX/JSX e CSS referenciados em um objeto manifest que Bun.serve() pode usar para servir os assets.

src/backend.ts

import { serve } from "bun";
import index from "./index.html";

serve({
  routes: { "/": index },
});

Bundling em Runtime

Quando adicionar um step de build é muito complicado, você pode definir development: false em Bun.serve().

Isso irá:

Habilitar cache em memória de assets empacotados. Bun irá empacotar assets lazy na primeira requisição para um arquivo .html e armazenar em cache o resultado em memória até o servidor reiniciar.
Habilitar cabeçalhos Cache-Control e cabeçalhos ETag
Minificar arquivos JavaScript/TypeScript/TSX/JSX

src/backend.ts

import { serve } from "bun";
import homepage from "./index.html";

serve({
  routes: {
    "/": homepage,
  },

  // Modo de produção
  development: false,
});

Rotas de API

Handlers de Método HTTP

Defina endpoints de API com handlers de método HTTP:

src/backend.ts

import { serve } from "bun";

serve({
  routes: {
    "/api/users": {
      async GET(req) {
        // Lidar com requisições GET
        const users = await getUsers();
        return Response.json(users);
      },

      async POST(req) {
        // Lidar com requisições POST
        const userData = await req.json();
        const user = await createUser(userData);
        return Response.json(user, { status: 201 });
      },

      async PUT(req) {
        // Lidar com requisições PUT
        const userData = await req.json();
        const user = await updateUser(userData);
        return Response.json(user);
      },

      async DELETE(req) {
        // Lidar com requisições DELETE
        await deleteUser(req.params.id);
        return new Response(null, { status: 204 });
      },
    },
  },
});

Rotas Dinâmicas

Use parâmetros de URL em suas rotas:

serve({
  routes: {
    // Parâmetro único
    "/api/users/:id": async req => {
      const { id } = req.params;
      const user = await getUserById(id);
      return Response.json(user);
    },

    // Múltiplos parâmetros
    "/api/users/:userId/posts/:postId": async req => {
      const { userId, postId } = req.params;
      const post = await getPostByUser(userId, postId);
      return Response.json(post);
    },

    // Rotas wildcard
    "/api/files/*": async req => {
      const filePath = req.params["*"];
      const file = await getFile(filePath);
      return new Response(file);
    },
  },
});

Tratamento de Requisições

src/backend.ts

serve({
  routes: {
    "/api/data": {
      async POST(req) {
        // Parse do corpo JSON
        const body = await req.json();

        // Acessar cabeçalhos
        const auth = req.headers.get("Authorization");

        // Acessar parâmetros de URL
        const { id } = req.params;

        // Acessar parâmetros de query
        const url = new URL(req.url);
        const page = url.searchParams.get("page") || "1";

        // Retornar resposta
        return Response.json({
          message: "Data processed",
          page: parseInt(page),
          authenticated: !!auth,
        });
      },
    },
  },
});

Plugins

Plugins do bundler do Bun também são suportados ao empacotar rotas estáticas.

Para configurar plugins para Bun.serve, adicione um array plugins na seção [serve.static] do seu bunfig.toml.

Plugin TailwindCSS

Você pode usar TailwindCSS instalando e adicionando o pacote tailwindcss e o plugin bun-plugin-tailwind.

bash

bun add tailwindcss bun-plugin-tailwind

[serve.static]
plugins = ["bun-plugin-tailwind"]

Isso permitirá que você use classes utilitárias do TailwindCSS em seus arquivos HTML e CSS. Tudo que você precisa fazer é importar tailwindcss em algum lugar:

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="tailwindcss" />
  </head>
  <!-- o resto do seu HTML... -->
</html>

Alternativamente, você pode importar TailwindCSS em seu arquivo CSS:

css

@import "tailwindcss";

.custom-class {
  @apply bg-red-500 text-white;
}

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <!-- o resto do seu HTML... -->
</html>

Plugins Customizados

Qualquer arquivo JS ou módulo que exporta um objeto de plugin de bundler válido (essencialmente um objeto com campos name e setup) pode ser colocado dentro do array de plugins:

[serve.static]
plugins = ["./my-plugin-implementation.ts"]

my-plugin-implementation.ts

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "my-custom-plugin",
  setup(build) {
    // Implementação do plugin
    build.onLoad({ filter: /\.custom$/ }, async args => {
      const text = await Bun.file(args.path).text();
      return {
        contents: `export default ${JSON.stringify(text)};`,
        loader: "js",
      };
    });
  },
};

export default myPlugin;

Bun irá lazy resolver e carregar cada plugin e usá-los para empacotar suas rotas.

NOTE

Isso está atualmente em `bunfig.toml` para tornar possível saber estaticamente quais plugins estão em uso quando eventualmente integrarmos isso com a CLI `bun build`. Estes plugins funcionam na API JS do `Bun.build()`, mas ainda não são suportados na CLI.

Variáveis de Ambiente Inline

Bun pode substituir referências process.env.* no seu frontend JavaScript e TypeScript com seus valores reais em tempo de build. Configure a opção env no seu bunfig.toml:

[serve.static]
env = "PUBLIC_*"  # apenas inline env vars começando com PUBLIC_ (recomendado)
# env = "inline"  # inline todas as variáveis de ambiente
# env = "disable" # desabilita substituição de env var (padrão)

Nota

Isso funciona apenas com referências literais process.env.FOO, não import.meta.env ou acesso indireto como const env = process.env; env.FOO.

Se uma variável de ambiente não estiver definida, você pode ver erros de runtime como ReferenceError: process is not defined no navegador.

Veja a documentação de HTML e sites estáticos para mais detalhes sobre configuração em tempo de build e exemplos.

Como Funciona

Bun usa HTMLRewriter para escanear por tags <script> e <link> em arquivos HTML, usa-os como entrypoints para o bundler do Bun, gera um bundle otimizado para os arquivos JavaScript/TypeScript/TSX/JSX e CSS, e serve o resultado.

Pipeline de Processamento

1. Processamento de script

Transpila TypeScript, JSX e TSX em tags <script>
Empacota dependências importadas
Gera sourcemaps para debugging
Minifica quando development não é true em Bun.serve()

html

<script type="module" src="./counter.tsx"></script>

2. Processamento de

Processa imports CSS e tags <link>
Concatena arquivos CSS
Reescreve url e caminhos de assets para incluir hashes content-addressable nas URLs

html

<link rel="stylesheet" href="./styles.css" />

3. Processamento de e Assets

Links para assets são reescritos para incluir hashes content-addressable nas URLs
Assets pequenos em arquivos CSS são inlineados em URLs data:, reduzindo o número total de requisições HTTP enviadas pela rede

4. Reescrita de HTML

Combina todas as tags <script> em uma única tag <script> com um hash content-addressable na URL
Combina todas as tags <link> em uma única tag <link> com um hash content-addressable na URL
Output de um novo arquivo HTML

5. Serving

Todos os arquivos de output do bundler são expostos como rotas estáticas, usando o mesmo mecanismo internamente como quando você passa um objeto Response para static em Bun.serve().
Isso funciona de forma similar a como Bun.build processa arquivos HTML.

Exemplo Completo

Aqui está um exemplo completo de aplicação fullstack:

server.ts

import { serve } from "bun";
import { Database } from "bun:sqlite";
import homepage from "./public/index.html";
import dashboard from "./public/dashboard.html";

// Inicializa banco de dados
const db = new Database("app.db");
db.exec(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
  )
`);

const server = serve({
  routes: {
    // Rotas de frontend
    "/": homepage,
    "/dashboard": dashboard,

    // Rotas de API
    "/api/users": {
      async GET() {
        const users = db.query("SELECT * FROM users").all();
        return Response.json(users);
      },

      async POST(req) {
        const { name, email } = await req.json();

        try {
          const result = db.query("INSERT INTO users (name, email) VALUES (?, ?) RETURNING *").get(name, email);

          return Response.json(result, { status: 201 });
        } catch (error) {
          return Response.json({ error: "Email already exists" }, { status: 400 });
        }
      },
    },

    "/api/users/:id": {
      async GET(req) {
        const { id } = req.params;
        const user = db.query("SELECT * FROM users WHERE id = ?").get(id);

        if (!user) {
          return Response.json({ error: "User not found" }, { status: 404 });
        }

        return Response.json(user);
      },

      async DELETE(req) {
        const { id } = req.params;
        const result = db.query("DELETE FROM users WHERE id = ?").run(id);

        if (result.changes === 0) {
          return Response.json({ error: "User not found" }, { status: 404 });
        }

        return new Response(null, { status: 204 });
      },
    },

    // Endpoint de health check
    "/api/health": {
      GET() {
        return Response.json({
          status: "ok",
          timestamp: new Date().toISOString(),
        });
      },
    },
  },

  // Habilita modo de desenvolvimento
  development: {
    hmr: true,
    console: true,
  },

  // Fallback para rotas não correspondidas
  fetch(req) {
    return new Response("Not Found", { status: 404 });
  },
});

console.log(`🚀 Server running on ${server.url}`);

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fullstack Bun App</title>
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../src/main.tsx"></script>
  </body>
</html>

tsx

import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.getElementById("root")!;
const root = createRoot(container);
root.render(<App />);

tsx

import { useState, useEffect } from "react";

interface User {
  id: number;
  name: string;
  email: string;
  created_at: string;
}

export function App() {
  const [users, setUsers] = useState<User[]>([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  const fetchUsers = async () => {
    const response = await fetch("/api/users");
    const data = await response.json();
    setUsers(data);
  };

  const createUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email }),
      });

      if (response.ok) {
        setName("");
        setEmail("");
        await fetchUsers();
      } else {
        const error = await response.json();
        alert(error.error);
      }
    } catch (error) {
      alert("Failed to create user");
    } finally {
      setLoading(false);
    }
  };

  const deleteUser = async (id: number) => {
    if (!confirm("Are you sure?")) return;

    try {
      const response = await fetch(`/api/users/${id}`, {
        method: "DELETE",
      });

      if (response.ok) {
        await fetchUsers();
      }
    } catch (error) {
      alert("Failed to delete user");
    }
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div className="container">
      <h1>User Management</h1>

      <form onSubmit={createUser} className="form">
        <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} required />
        <input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} required />
        <button type="submit" disabled={loading}>
          {loading ? "Creating..." : "Create User"}
        </button>
      </form>

      <div className="users">
        <h2>Users ({users.length})</h2>
        {users.map(user => (
          <div key={user.id} className="user-card">
            <div>
              <strong>{user.name}</strong>
              <br />
              <span>{user.email}</span>
            </div>
            <button onClick={() => deleteUser(user.id)} className="delete-btn">
              Delete
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f5f5f5;
  color: #333;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  color: #2563eb;
  margin-bottom: 2rem;
}

.form {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form button {
  padding: 0.75rem 1.5rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form button:hover {
  background: #1d4ed8;
}

.form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.users {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.user-card:last-child {
  border-bottom: none;
}

.delete-btn {
  padding: 0.5rem 1rem;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #b91c1c;
}

Melhores Práticas

Estrutura de Projeto

my-app/
├── src/
│   ├── components/
│   │   ├── Header.tsx
│   │   └── UserList.tsx
│   ├── styles/
│   │   ├── globals.css
│   │   └── components.css
│   ├── utils/
│   │   └── api.ts
│   ├── App.tsx
│   └── main.tsx
├── public/
│   ├── index.html
│   ├── dashboard.html
│   └── favicon.ico
├── server/
│   ├── routes/
│   │   ├── users.ts
│   │   └── auth.ts
│   ├── db/
│   │   └── schema.sql
│   └── index.ts
├── bunfig.toml
└── package.json

Configuração Baseada em Ambiente

export const config = {
  development: process.env.NODE_ENV !== "production",
  port: process.env.PORT || 3000,
  database: {
    url: process.env.DATABASE_URL || "./dev.db",
  },
  cors: {
    origin: process.env.CORS_ORIGIN || "*",
  },
};

Tratamento de Erros

export function errorHandler(error: Error, req: Request) {
  console.error("Server error:", error);

  if (process.env.NODE_ENV === "production") {
    return Response.json({ error: "Internal server error" }, { status: 500 });
  }

  return Response.json(
    {
      error: error.message,
      stack: error.stack,
    },
    { status: 500 },
  );
}

Helpers de Resposta de API

export function json(data: any, status = 200) {
  return Response.json(data, { status });
}

export function error(message: string, status = 400) {
  return Response.json({ error: message }, { status });
}

export function notFound(message = "Not found") {
  return error(message, 404);
}

export function unauthorized(message = "Unauthorized") {
  return error(message, 401);
}

Type Safety

export interface User {
  id: number;
  name: string;
  email: string;
  created_at: string;
}

export interface CreateUserRequest {
  name: string;
  email: string;
}

export interface ApiResponse<T> {
  data?: T;
  error?: string;
}

Deploy

Build de Produção

bash

# Build para produção
bun build --target=bun --production --outdir=dist ./server/index.ts

# Rodar servidor de produção
NODE_ENV=production bun dist/index.js

Deploy com Docker

Dockerfile

dockerfile

FROM oven/bun:1 as base
WORKDIR /usr/src/app

# Instalar dependências
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

# Copiar código fonte
COPY . .

# Build da aplicação
RUN bun build --target=bun --production --outdir=dist ./server/index.ts

# Stage de produção
FROM oven/bun:1-slim
WORKDIR /usr/src/app
COPY --from=base /usr/src/app/dist ./
COPY --from=base /usr/src/app/public ./public

EXPOSE 3000
CMD ["bun", "index.js"]

Variáveis de Ambiente

.env.production

ini

NODE_ENV=production
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp
CORS_ORIGIN=https://myapp.com

Migração de Outros Frameworks

De Express + Webpack

server.ts

// Antes (Express + Webpack)
app.use(express.static("dist"));
app.get("/api/users", (req, res) => {
  res.json(users);
});

// Depois (Bun fullstack)
serve({
  routes: {
    "/": homepage, // Substitui express.static
    "/api/users": {
      GET() {
        return Response.json(users);
      },
    },
  },
});

De Rotas de API do Next.js

server.ts

// Antes (Next.js)
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.json(users);
  }
}

// Depois (Bun)
"/api/users": {
  GET() { return Response.json(users); }
}

Limitações e Planos Futuros

Limitações Atuais

Integração com CLI bun build ainda não está disponível para apps fullstack
Auto-descoberta de rotas de API não está implementada
Server-side rendering (SSR) não é built-in

Recursos Planejados

Integração com CLI bun build
Roteamento baseado em arquivo para endpoints de API
Suporte SSR built-in
Ecossistema de plugins aprimorado

NOTE

Este é um trabalho em andamento. Recursos e APIs podem mudar conforme o Bun continua a evoluir.

Rotas HTML ​

Imports de HTML como Rotas ​

Exemplo de Processamento de HTML ​

Integração com React ​

Modo de Desenvolvimento ​

Recursos do Modo de Desenvolvimento ​

Configuração Avançada de Desenvolvimento ​

Desenvolvimento vs Produção ​

Modo de Produção ​

Bundling Ahead of Time (Recomendado) ​

Bundling em Runtime ​

Rotas de API ​

Handlers de Método HTTP ​

Rotas Dinâmicas ​

Tratamento de Requisições ​

Plugins ​

Plugin TailwindCSS ​

Plugins Customizados ​

Variáveis de Ambiente Inline ​

Como Funciona ​

Pipeline de Processamento ​

1. Processamento de script ​

2. Processamento de ​

3. Processamento de e Assets ​

4. Reescrita de HTML ​

5. Serving ​

Exemplo Completo ​

Melhores Práticas ​

Estrutura de Projeto ​

Configuração Baseada em Ambiente ​

Tratamento de Erros ​

Helpers de Resposta de API ​

Type Safety ​

Deploy ​

Build de Produção ​

Deploy com Docker ​

Variáveis de Ambiente ​

Migração de Outros Frameworks ​

De Express + Webpack ​

De Rotas de API do Next.js ​

Limitações e Planos Futuros ​

Limitações Atuais ​

Recursos Planejados ​

Rotas HTML

Imports de HTML como Rotas

Exemplo de Processamento de HTML

Integração com React

Modo de Desenvolvimento

Recursos do Modo de Desenvolvimento

Configuração Avançada de Desenvolvimento

Desenvolvimento vs Produção

Modo de Produção

Bundling Ahead of Time (Recomendado)

Bundling em Runtime

Rotas de API

Handlers de Método HTTP

Rotas Dinâmicas

Tratamento de Requisições

Plugins

Plugin TailwindCSS

Plugins Customizados

Variáveis de Ambiente Inline

Como Funciona

Pipeline de Processamento

1. Processamento de script

2. Processamento de

3. Processamento de e Assets

4. Reescrita de HTML

5. Serving

Exemplo Completo

Melhores Práticas

Estrutura de Projeto

Configuração Baseada em Ambiente

Tratamento de Erros

Helpers de Resposta de API

Type Safety

Deploy

Build de Produção

Deploy com Docker

Variáveis de Ambiente

Migração de Outros Frameworks

De Express + Webpack

De Rotas de API do Next.js

Limitações e Planos Futuros

Limitações Atuais

Recursos Planejados