Bun JS Fullstack dev server

Для начала импортируйте HTML-файлы и передайте их в опцию routes в Bun.serve().

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

const server = serve({
  routes: {
    // ** Импорт HTML **
    // Связать и подключить index.html к "/". Это использует HTMLRewriter для сканирования
    // HTML для тегов `<script>` и `<link>`, запускает бандлер JavaScript
    // и CSS от Bun, транспилирует любой TypeScript JSX и TSX,
    // понижает CSS с парсером CSS от Bun и обслуживает результат.
    "/": homepage,
    // Связать и подключить dashboard.html к "/dashboard"
    "/dashboard": dashboard,

    // ** API endpoints ** (требуется 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);
    },
  },

  // Включить режим разработки для:
  // - Детальных сообщений об ошибках
  // - Горячей перезагрузки (требуется Bun v1.2.3+)
  development: true,
});

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

bash

bun run app.ts

HTML-маршруты

Импорт HTML как маршруты

Веб начинается с HTML и полнофункциональный dev-сервер Bun тоже.

Для указания точек входа для вашего фронтенда импортируйте HTML-файлы в ваши JavaScript/TypeScript/TSX/JSX файлы.

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

Эти HTML-файлы используются как маршруты в dev-сервере Bun который вы можете передать в Bun.serve().

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

  fetch(req) {
    // ... api запросы
  },
});

Когда вы делаете запрос к /dashboard или / Bun автоматически связывает теги <script> и <link> в HTML-файлах предоставляет их как статические маршруты и обслуживает результат.

Пример обработки HTML

Файл index.html подобный этому:

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>

Становится чем-то подобным этому:

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>

Интеграция с React

Для использования React в вашем клиентском коде импортируйте react-dom/client и отрендерите ваше приложение.

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

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

Режим разработки

При локальной сборке включите режим разработки установив development: true в Bun.serve().

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

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

  development: true,

  fetch(req) {
    // ... api запросы
  },
});

Возможности режима разработки

Когда development имеет значение true Bun будет:

Включать заголовок SourceMap в ответе чтобы инструменты разработчика могли показать оригинальный исходный код
Отключать минификацию
Повторно связывать активы при каждом запросе к .html файлу
Включать горячую перезагрузку модулей (если не установлено hmr: false)
Эхо консольных логов из браузера в терминал

Расширенная конфигурация разработки

Bun.serve() поддерживает эхо консольных логов из браузера в терминал.

Для включения этого передайте console: true в объекте development в Bun.serve().

import homepage from "./index.html";

Bun.serve({
  // development также может быть объектом.
  development: {
    // Включить Hot Module Reloading
    hmr: true,

    // Эхо консольных логов из браузера в терминал
    console: true,
  },

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

Когда установлено console: true Bun будет потоково передавать консольные логи из браузера в терминал. Это использует существующее WebSocket-соединение от HMR для отправки логов.

Разработка против Продакшена

Функция	Разработка	Продакшен
Карты исходного кода	✅ Включено	❌ Отключено
Минификация	❌ Отключено	✅ Включено
Горячая перезагрузка	✅ Включено	❌ Отключено
Связывание активов	🔄 При каждом запросе	💾 Кэшировано
Консольные логи	🖥️ Браузер → Терминал	❌ Отключено
Детали ошибок	📝 Подробные	🔒 Минимальные

Режим продакшена

Горячая перезагрузка и development: true помогают вам быстро итерировать но в продакшене ваш сервер должен быть максимально быстрым и иметь как можно меньше внешних зависимостей.

Заблаговременное связывание (рекомендуется)

Начиная с Bun v1.2.17 вы можете использовать Bun.build или bun build для заблаговременного связывания вашего полнофункционального приложения.

bash

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

Когда бандлер Bun видит импорт HTML из серверного кода он связывает указанные JavaScript/TypeScript/TSX/JSX и CSS файлы в объект манифеста который Bun.serve() может использовать для обслуживания активов.

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

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

Связывание во время выполнения

Когда добавление шага сборки слишком сложно вы можете установить development: false в Bun.serve().

Это будет:

Включать кэширование связанных активов в памяти. Bun будет лениво связывать активы при первом запросе к .html файлу и кэшировать результат в памяти до перезапуска сервера.
Включать заголовки Cache-Control и ETag
Минифицировать JavaScript/TypeScript/TSX/JSX файлы

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

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

  // Режим продакшена
  development: false,
});

API-маршруты

Обработчики HTTP-методов

Определите API-эндпоинты с обработчиками HTTP-методов:

import { serve } from "bun";

serve({
  routes: {
    "/api/users": {
      async GET(req) {
        // Обработка GET запросов
        const users = await getUsers();
        return Response.json(users);
      },

      async POST(req) {
        // Обработка POST запросов
        const userData = await req.json();
        const user = await createUser(userData);
        return Response.json(user, { status: 201 });
      },

      async PUT(req) {
        // Обработка PUT запросов
        const userData = await req.json();
        const user = await updateUser(userData);
        return Response.json(user);
      },

      async DELETE(req) {
        // Обработка DELETE запросов
        await deleteUser(req.params.id);
        return new Response(null, { status: 204 });
      },
    },
  },
});

Динамические маршруты

Используйте параметры URL в ваших маршрутах:

serve({
  routes: {
    // Одиночный параметр
    "/api/users/:id": async req => {
      const { id } = req.params;
      const user = await getUserById(id);
      return Response.json(user);
    },

    // Несколько параметров
    "/api/users/:userId/posts/:postId": async req => {
      const { userId, postId } = req.params;
      const post = await getPostByUser(userId, postId);
      return Response.json(post);
    },

    // Подстановочные маршруты
    "/api/files/*": async req => {
      const filePath = req.params["*"];
      const file = await getFile(filePath);
      return new Response(file);
    },
  },
});

Обработка запросов

serve({
  routes: {
    "/api/data": {
      async POST(req) {
        // Разбор JSON тела
        const body = await req.json();

        // Доступ к заголовкам
        const auth = req.headers.get("Authorization");

        // Доступ к параметрам URL
        const { id } = req.params;

        // Доступ к параметрам запроса
        const url = new URL(req.url);
        const page = url.searchParams.get("page") || "1";

        // Возврат ответа
        return Response.json({
          message: "Data processed",
          page: parseInt(page),
          authenticated: !!auth,
        });
      },
    },
  },
});

Плагины

Плагины бандлера Bun также поддерживаются при связывании статических маршрутов.

Для настройки плагинов для Bun.serve добавьте массив plugins в секцию [serve.static] вашего bunfig.toml.

Плагин TailwindCSS

Вы можете использовать TailwindCSS установив и добавив пакеты tailwindcss и плагин bun-plugin-tailwind.

bash

bun add tailwindcss bun-plugin-tailwind

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

Это позволит вам использовать утилитарные классы TailwindCSS в ваших HTML и CSS файлах. Все что вам нужно сделать это импортировать tailwindcss где-то:

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="tailwindcss" />
  </head>
  <!-- остальной ваш HTML... -->
</html>

Альтернативно вы можете импортировать TailwindCSS в вашем CSS файле:

css

@import "tailwindcss";

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

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <!-- остальной ваш HTML... -->
</html>

Пользовательские плагины

Любой JS файл или модуль который экспортирует валидный объект плагина бандлера (по сути объект с полями name и setup) может быть помещен в массив plugins:

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

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "my-custom-plugin",
  setup(build) {
    // Реализация плагина
    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 будет лениво разрешать и загружать каждый плагин и использовать их для связывания ваших маршрутов.

NOTE

В настоящее время это находится в `bunfig.toml` чтобы сделать возможным статическое определение какие плагины используются когда мы в конечном итоге интегрируем это с CLI `bun build`. Эти плагины работают в JS API `Bun.build()` но еще не поддерживаются в CLI.

Встроенные переменные окружения

Bun может заменять ссылки process.env.* в вашем фронтенд JavaScript и TypeScript их фактическими значениями во время сборки. Настройте опцию env в вашем bunfig.toml:

[serve.static]
env = "PUBLIC_*"  # только переменные окружения начинающиеся с PUBLIC_ (рекомендуется)
# env = "inline"  # встраивать все переменные окружения
# env = "disable" # отключить замену переменных окружения (по умолчанию)

Примечание

Это работает только с литеральными ссылками process.env.FOO не import.meta.env или косвенным доступом как const env = process.env; env.FOO.

Если переменная окружения не установлена вы можете увидеть ошибки времени выполнения такие как ReferenceError: process is not defined в браузере.

Смотрите документацию HTML и статических сайтов для получения более подробной информации о конфигурации времени сборки и примерах.

Как это работает

Bun использует HTMLRewriter для сканирования тегов <script> и <link> в HTML-файлах использует их как точки входа для бандлера Bun генерирует оптимизированный бандл для JavaScript/TypeScript/TSX/JSX и CSS файлов и обслуживает результат.

Конвейер обработки

1. Обработка script

Транспилирует TypeScript JSX и TSX в тегах <script>
Связывает импортируемые зависимости
Генерирует sourcemaps для отладки
Минифицирует когда development не true в Bun.serve()

html

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

2. Обработка

Обрабатывает импорты CSS и теги <link>
Конкатенирует CSS файлы
Переписывает url и пути к активам для включения хешей адресации контента в URL

html

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

3. Обработка и активов

Ссылки на активы переписываются для включения хешей адресации контента в URL
Малые активы в CSS файлах встраиваются в data: URL уменьшая общее количество HTTP-запросов передаваемых по сети

4. Переписывание HTML

Объединяет все теги <script> в один тег <script> с хешем адресации контента в URL
Объединяет все теги <link> в один тег <link> с хешем адресации контента в URL
Выводит новый HTML файл

5. Обслуживание

Все выходные файлы от бандлера предоставляются как статические маршруты используя тот же механизм внутренне как когда вы передаете объект Response в static в Bun.serve().
Это работает аналогично тому как Bun.build обрабатывает HTML файлы.

Полный пример

Вот полный пример полнофункционального приложения:

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

// Инициализация базы данных
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: {
    // Фронтенд маршруты
    "/": homepage,
    "/dashboard": dashboard,

    // 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 });
      },
    },

    // Эндпоинт проверки работоспособности
    "/api/health": {
      GET() {
        return Response.json({
          status: "ok",
          timestamp: new Date().toISOString(),
        });
      },
    },
  },

  // Включить режим разработки
  development: {
    hmr: true,
    console: true,
  },

  // Резервный вариант для несопоставленных маршрутов
  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;
}

Лучшие практики

Структура проекта

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

Конфигурация на основе окружения

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

Обработка ошибок

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 },
  );
}

Хелперы ответов 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);
}

Типобезопасность

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;
}

Развертывание

Продакшен-сборка

bash

# Сборка для продакшена
bun build --target=bun --production --outdir=dist ./server/index.ts

# Запуск продакшен-сервера
NODE_ENV=production bun dist/index.js

Развертывание в Docker

dockerfile

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

# Установка зависимостей
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

# Копирование исходного кода
COPY . .

# Сборка приложения
RUN bun build --target=bun --production --outdir=dist ./server/index.ts

# Продакшен стадия
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"]

Переменные окружения

ini

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

Миграция с других фреймворков

С Express + Webpack

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

// После (Bun fullstack)
serve({
  routes: {
    "/": homepage, // Заменяет express.static
    "/api/users": {
      GET() {
        return Response.json(users);
      },
    },
  },
});

С API-маршрутов Next.js

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

// После (Bun)
"/api/users": {
  GET() { return Response.json(users); }
}

Ограничения и будущие планы

Текущие ограничения

Интеграция с CLI bun build еще не доступна для полнофункциональных приложений
Авто-обнаружение API-маршрутов не реализовано
Рендеринг на стороне сервера (SSR) не встроен

Запланированные функции

Интеграция с CLI bun build
Маршрутизация на основе файлов для API-эндпоинтов
Встроенная поддержка SSR
Расширенная экосистема плагинов

NOTE

Это незавершенная работа. Функции и API могут измениться по мере развития Bun.

HTML-маршруты ​

Импорт HTML как маршруты ​

Пример обработки HTML ​

Интеграция с React ​

Режим разработки ​

Возможности режима разработки ​

Расширенная конфигурация разработки ​

Разработка против Продакшена ​

Режим продакшена ​

Заблаговременное связывание (рекомендуется) ​

Связывание во время выполнения ​

API-маршруты ​

Обработчики HTTP-методов ​

Динамические маршруты ​

Обработка запросов ​

Плагины ​

Плагин TailwindCSS ​

Пользовательские плагины ​

Встроенные переменные окружения ​

Как это работает ​

Конвейер обработки ​

1. Обработка script ​

2. Обработка ​

3. Обработка и активов ​

4. Переписывание HTML ​

5. Обслуживание ​

Полный пример ​

Лучшие практики ​

Структура проекта ​

Конфигурация на основе окружения ​

Обработка ошибок ​

Хелперы ответов API ​

Типобезопасность ​

Развертывание ​

Продакшен-сборка ​

Развертывание в Docker ​

Переменные окружения ​

Миграция с других фреймворков ​

С Express + Webpack ​

С API-маршрутов Next.js ​

Ограничения и будущие планы ​

Текущие ограничения ​

Запланированные функции ​

HTML-маршруты

Импорт HTML как маршруты

Пример обработки HTML

Интеграция с React

Режим разработки

Возможности режима разработки

Расширенная конфигурация разработки

Разработка против Продакшена

Режим продакшена

Заблаговременное связывание (рекомендуется)

Связывание во время выполнения

API-маршруты

Обработчики HTTP-методов

Динамические маршруты

Обработка запросов

Плагины

Плагин TailwindCSS

Пользовательские плагины

Встроенные переменные окружения

Как это работает

Конвейер обработки

1. Обработка script

2. Обработка

3. Обработка и активов

4. Переписывание HTML

5. Обслуживание

Полный пример

Лучшие практики

Структура проекта

Конфигурация на основе окружения

Обработка ошибок

Хелперы ответов API

Типобезопасность

Развертывание

Продакшен-сборка

Развертывание в Docker

Переменные окружения

Миграция с других фреймворков

С Express + Webpack

С API-маршрутов Next.js

Ограничения и будущие планы

Текущие ограничения

Запланированные функции