Server di sviluppo fullstack Bun JS

Per iniziare, importa file HTML e passali all'opzione routes in Bun.serve().

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

const server = serve({
  routes: {
    // ** Import HTML **
    // Bundle & route index.html su "/". Questo usa HTMLRewriter per scansionare
    // l'HTML per tag `<script>` e `<link>`, esegue il bundler JavaScript
    // & CSS di Bun su di essi, transpila qualsiasi TypeScript, JSX e TSX,
    // downlevela CSS con il parser CSS di Bun e serve il risultato.
    "/": homepage,
    // Bundle & route dashboard.html su "/dashboard"
    "/dashboard": dashboard,

    // ** Endpoint API ** (richiesto 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);
    },
  },

  // Abilita modalità sviluppo per:
  // - Messaggi di errore dettagliati
  // - Hot reloading (richiesto Bun v1.2.3+)
  development: true,
});

console.log(`In ascolto su ${server.url}`);

bash

bun run app.ts

Route HTML

Import HTML come Route

Il web inizia con HTML, e anche il dev server fullstack di Bun.

Per specificare entrypoint al tuo frontend, importa file HTML nei tuoi file JavaScript/TypeScript/TSX/JSX.

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

Questi file HTML sono usati come route nel dev server di Bun che puoi passare a Bun.serve().

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

  fetch(req) {
    // ... richieste api
  },
});

Quando fai una richiesta a /dashboard o /, Bun bundla automaticamente i tag <script> e <link> nei file HTML, li espone come route statiche e serve il risultato.

Esempio di elaborazione HTML

Un file index.html così:

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>

Diventa qualcosa del genere:

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>

Integrazione React

Per usare React nel tuo codice client-side, importa react-dom/client e renderizza la tua app.

src/backend.ts

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

serve({
  routes: {
    "/": dashboard,
  },
  async fetch(req) {
    // ...richieste 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>
  );
}

Modalità Sviluppo

Quando buildi localmente, abilita la modalità sviluppo impostando development: true in Bun.serve().

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

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

  development: true,

  fetch(req) {
    // ... richieste api
  },
});

Funzionalità Modalità Sviluppo

Quando development è true, Bun:

Include l'header SourceMap nella risposta così che devtools possa mostrare il codice sorgente originale
Disabilita la minificazione
Ri-bundla le risorse su ogni richiesta a un file .html
Abilita hot module reloading (a meno che hmr: false non sia impostato)
Echo dei console log dal browser al terminale

Configurazione Sviluppo Avanzata

Bun.serve() supporta l'echo dei console log dal browser al terminale.

Per abilitare questo, passa console: true nell'oggetto development in Bun.serve().

import homepage from "./index.html";

Bun.serve({
  // development può anche essere un oggetto.
  development: {
    // Abilita Hot Module Reloading
    hmr: true,

    // Echo dei console log dal browser al terminale
    console: true,
  },

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

Quando console: true è impostato, Bun streammerà i console log dal browser al terminale. Questo riutilizza la connessione WebSocket esistente da HMR per inviare i log.

Sviluppo vs Produzione

Funzionalità	Sviluppo	Produzione
Source maps	✅ Abilitate	❌ Disabilitate
Minificazione	❌ Disabilitata	✅ Abilitata
Hot reloading	✅ Abilitato	❌ Disabilitato
Bundling asset	🔄 Su ogni richiesta	💾 In cache
Console logging	🖥️ Browser → Terminale	❌ Disabilitato
Dettagli errore	📝 Dettagliati	🔒 Minimali

Modalità Produzione

Hot reloading e development: true ti aiutano a iterare velocemente, ma in produzione, il tuo server dovrebbe essere il più veloce possibile e avere il minor numero di dipendenze esterne possibile.

Bundling Ahead of Time (Raccomandato)

A partire da Bun v1.2.17, puoi usare Bun.build o bun build per bundlare la tua applicazione full-stack in anticipo.

bash

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

Quando il bundler di Bun vede un import HTML da codice server-side, bundlerà i file JavaScript/TypeScript/TSX/JSX e CSS referenziati in un oggetto manifest che Bun.serve() può usare per servire le risorse.

src/backend.ts

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

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

Bundling Runtime

Quando aggiungere uno step di build è troppo complicato, puoi impostare development: false in Bun.serve().

Questo:

Abilita caching in-memory delle risorse bundled. Bun bundlerà le risorse lazy alla prima richiesta a un file .html, e cache-erà il risultato in memoria fino al riavvio del server.
Abilita header Cache-Control e header ETag
Minifica file JavaScript/TypeScript/TSX/JSX

src/backend.ts

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

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

  // Modalità produzione
  development: false,
});

Route API

Handler Metodo HTTP

Definisci endpoint API con handler metodo HTTP:

src/backend.ts

import { serve } from "bun";

serve({
  routes: {
    "/api/users": {
      async GET(req) {
        // Gestisci richieste GET
        const users = await getUsers();
        return Response.json(users);
      },

      async POST(req) {
        // Gestisci richieste POST
        const userData = await req.json();
        const user = await createUser(userData);
        return Response.json(user, { status: 201 });
      },

      async PUT(req) {
        // Gestisci richieste PUT
        const userData = await req.json();
        const user = await updateUser(userData);
        return Response.json(user);
      },

      async DELETE(req) {
        // Gestisci richieste DELETE
        await deleteUser(req.params.id);
        return new Response(null, { status: 204 });
      },
    },
  },
});

Route Dinamiche

Usa parametri URL nelle tue route:

serve({
  routes: {
    // Singolo parametro
    "/api/users/:id": async req => {
      const { id } = req.params;
      const user = await getUserById(id);
      return Response.json(user);
    },

    // Multipli parametri
    "/api/users/:userId/posts/:postId": async req => {
      const { userId, postId } = req.params;
      const post = await getPostByUser(userId, postId);
      return Response.json(post);
    },

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

Gestione Richieste

src/backend.ts

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

        // Accedi headers
        const auth = req.headers.get("Authorization");

        // Accedi parametri URL
        const { id } = req.params;

        // Accedi parametri query
        const url = new URL(req.url);
        const page = url.searchParams.get("page") || "1";

        // Ritorna risposta
        return Response.json({
          message: "Data elaborati",
          page: parseInt(page),
          authenticated: !!auth,
        });
      },
    },
  },
});

Plugin

I plugin del bundler di Bun sono anche supportati quando si bundlano route statiche.

Per configurare plugin per Bun.serve, aggiungi un array plugins nella sezione [serve.static] del tuo bunfig.toml.

Plugin TailwindCSS

Puoi usare TailwindCSS installando e aggiungendo il pacchetto tailwindcss e il plugin bun-plugin-tailwind.

bash

bun add tailwindcss bun-plugin-tailwind

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

Questo ti permetterà di usare classi utility TailwindCSS nei tuoi file HTML e CSS. Tutto ciò che devi fare è importare tailwindcss da qualche parte:

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="tailwindcss" />
  </head>
  <!-- il resto del tuo HTML... -->
</html>

In alternativa, puoi importare TailwindCSS nel tuo file CSS:

css

@import "tailwindcss";

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

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <!-- il resto del tuo HTML... -->
</html>

Plugin Personalizzati

Qualsiasi file JS o modulo che esporta un oggetto plugin bundler valido (essenzialmente un oggetto con un campo name e setup) può essere inserito nell'array 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) {
    // Implementazione 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 risolverà e caricherà lazy ogni plugin e li userà per bundlare le tue route.

NOTE

Questo è attualmente in `bunfig.toml` per rendere possibile conoscere staticamente quali plugin sono in uso quando eventualmente integreremo questo con la CLI `bun build`. Questi plugin funzionano nella JS API di `Bunbuild()`, ma non sono ancora supportati nella CLI.

Variabili d'ambiente Inline

Bun può rimpiazzare riferimenti process.env.* nel tuo frontend JavaScript e TypeScript con i loro valori effettivi a build time. Configura l'opzione env nel tuo bunfig.toml:

[serve.static]
env = "PUBLIC_*"  # solo variabili env che iniziano con PUBLIC_ (raccomandato)
# env = "inline"  # inline tutte le variabili d'ambiente
# env = "disable" # disabilita rimpiazzo variabili env (default)

Nota

Questo funziona solo con riferimenti letterali process.env.FOO, non import.meta.env o accesso indiretto come const env = process.env; env.FOO.

Se una variabile d'ambiente non è impostata, potresti vedere errori runtime come ReferenceError: process is not defined nel browser.

Vedi la documentazione HTML & siti statici per maggiori dettagli sulla configurazione build-time ed esempi.

Come Funziona

Bun usa HTMLRewriter per scansionare tag <script> e <link> nei file HTML, li usa come entrypoint per il bundler di Bun, genera un bundle ottimizzato per i file JavaScript/TypeScript/TSX/JSX e CSS, e serve il risultato.

Pipeline di Elaborazione

1. Elaborazione script

Transpila TypeScript, JSX e TSX in tag <script>
Bundla dipendenze importate
Genera sourcemaps per debugging
Minifica quando development non è true in Bun.serve()

html

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

2. Elaborazione

Elabora import CSS e tag <link>
Concatena file CSS
Riscrive url e percorsi asset per includere hash content-addressable negli URL

html

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

3. Elaborazione & Asset

Link ad asset sono riscritti per includere hash content-addressable negli URL
Asset piccoli nei file CSS sono inlinati in URL data:, riducendo il numero totale di richieste HTTP inviate

4. Riscrittura HTML

Combina tutti i tag <script> in un singolo tag <script> con un hash content-addressable nell'URL
Combina tutti i tag <link> in un singolo tag <link> con un hash content-addressable nell'URL
Output di un nuovo file HTML

5. Serving

Tutti i file di output dal bundler sono esposti come route statiche, usando lo stesso meccanismo internamente come quando passi un oggetto Response a static in Bun.serve().
Questo funziona similmente a come Bun.build elabora file HTML.

Esempio Completo

Ecco un esempio completo di applicazione fullstack:

server.ts

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

// Inizializza database
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: {
    // Route frontend
    "/": homepage,
    "/dashboard": dashboard,

    // Route 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 già esistente" }, { 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: "Utente non trovato" }, { 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: "Utente non trovato" }, { status: 404 });
        }

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

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

  // Abilita modalità sviluppo
  development: {
    hmr: true,
    console: true,
  },

  // Fallback per route non corrispondenti
  fetch(req) {
    return new Response("Non trovato", { status: 404 });
  },
});

console.log(`🚀 Server in esecuzione su ${server.url}`);

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>App Fullstack Bun</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("Creazione utente fallita");
    } finally {
      setLoading(false);
    }
  };

  const deleteUser = async (id: number) => {
    if (!confirm("Sei sicuro?")) return;

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

      if (response.ok) {
        await fetchUsers();
      }
    } catch (error) {
      alert("Eliminazione utente fallita");
    }
  };

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

  return (
    <div className="container">
      <h1>Gestione Utenti</h1>

      <form onSubmit={createUser} className="form">
        <input type="text" placeholder="Nome" 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 ? "Creazione in corso..." : "Crea Utente"}
        </button>
      </form>

      <div className="users">
        <h2>Utenti ({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">
              Elimina
            </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;
}

Best Practices

Struttura Progetto

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

Configurazione Basata su 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 || "*",
  },
};

Gestione Errori

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

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

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

Helper Risposta 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 = "Non trovato") {
  return error(message, 404);
}

export function unauthorized(message = "Non autorizzato") {
  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;
}

Deployment

Build Produzione

bash

# Build per produzione
bun build --target=bun --production --outdir=dist ./server/index.ts

# Esegui server produzione
NODE_ENV=production bun dist/index.js

Docker Deployment

Dockerfile

dockerfile

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

# Installa dipendenze
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

# Copia codice sorgente
COPY . .

# Build applicazione
RUN bun build --target=bun --production --outdir=dist ./server/index.ts

# Stage produzione
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"]

Variabili d'Ambiente

.env.production

ini

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

Migrazione da Altri Framework

Da Express + Webpack

server.ts

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

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

Da Route API Next.js

server.ts

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

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

Limitazioni e Piani Futuri

Limitazioni Attuali

Integrazione CLI bun build non è ancora disponibile per app fullstack
Auto-discovery di route API non è implementato
Server-side rendering (SSR) non è built-in

Funzionalità Pianificate

Integrazione con CLI bun build
Routing basato su file per endpoint API
Supporto SSR built-in
Ecosistema plugin migliorato

NOTE

Questo è un work in progress. Funzionalità e API potrebbero cambiare mentre Bun continua a evolversi.

Route HTML ​

Import HTML come Route ​

Esempio di elaborazione HTML ​

Integrazione React ​

Modalità Sviluppo ​

Funzionalità Modalità Sviluppo ​

Configurazione Sviluppo Avanzata ​

Sviluppo vs Produzione ​

Modalità Produzione ​

Bundling Ahead of Time (Raccomandato) ​

Bundling Runtime ​

Route API ​

Handler Metodo HTTP ​

Route Dinamiche ​

Gestione Richieste ​

Plugin ​

Plugin TailwindCSS ​

Plugin Personalizzati ​

Variabili d'ambiente Inline ​

Come Funziona ​

Pipeline di Elaborazione ​

1. Elaborazione script ​

2. Elaborazione ​

3. Elaborazione & Asset ​

4. Riscrittura HTML ​

5. Serving ​

Esempio Completo ​

Best Practices ​

Struttura Progetto ​

Configurazione Basata su Ambiente ​

Gestione Errori ​

Helper Risposta API ​

Type Safety ​

Deployment ​

Build Produzione ​

Docker Deployment ​

Variabili d'Ambiente ​

Migrazione da Altri Framework ​

Da Express + Webpack ​

Da Route API Next.js ​

Limitazioni e Piani Futuri ​

Limitazioni Attuali ​

Funzionalità Pianificate ​

Route HTML

Import HTML come Route

Esempio di elaborazione HTML

Integrazione React

Modalità Sviluppo

Funzionalità Modalità Sviluppo

Configurazione Sviluppo Avanzata

Sviluppo vs Produzione

Modalità Produzione

Bundling Ahead of Time (Raccomandato)

Bundling Runtime

Route API

Handler Metodo HTTP

Route Dinamiche

Gestione Richieste

Plugin

Plugin TailwindCSS

Plugin Personalizzati

Variabili d'ambiente Inline

Come Funziona

Pipeline di Elaborazione

1. Elaborazione script

2. Elaborazione

3. Elaborazione & Asset

4. Riscrittura HTML

5. Serving

Esempio Completo

Best Practices

Struttura Progetto

Configurazione Basata su Ambiente

Gestione Errori

Helper Risposta API

Type Safety

Deployment

Build Produzione

Docker Deployment

Variabili d'Ambiente

Migrazione da Altri Framework

Da Express + Webpack

Da Route API Next.js

Limitazioni e Piani Futuri

Limitazioni Attuali

Funzionalità Pianificate