Deno CLI

Fresh — современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, построенный поверх Deno. Он ориентирован на минимальную конфигурацию, скорость и интеграцию с современными возможностями Deno.

Для начала необходимо убедиться, что установлен Deno. Проверка версии производится командой:

deno --version

Установка Fresh осуществляется через встроенный скрипт Deno:

deno run -A --unstable https://deno.land/x/fresh/install.ts

После установки доступна команда fresh, позволяющая создавать новые проекты и управлять сервером разработки.

Создание нового проекта:

fresh init my-app

Команда создаёт структуру каталогов с базовыми файлами, включая routes, islands и static.

Запуск локального сервера осуществляется командой:

deno task start

По умолчанию сервер работает на http://localhost:8000.

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

Основные каталоги:

  • routes/ — директория для маршрутов. Каждый файл .tsx в routes соответствует URL-адресу.
  • islands/ — интерактивные компоненты, которые рендерятся на клиенте, сохраняя серверный рендеринг для основной страницы.
  • static/ — статические файлы, доступные напрямую по URL.
  • main.ts — точка входа приложения.

Особенности маршрутов:

  • routes/index.tsx соответствует /.
  • Файлы с динамическими сегментами используют синтаксис [param].tsx.
  • Маршруты могут экспортировать функцию handler, определяющую поведение на серверной стороне.

Серверные маршруты и обработка запросов

Fresh позволяет создавать полноценные серверные маршруты. Пример базового обработчика:

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(req, ctx) {
    return new Response("Hello Fresh!", { status: 200 });
  },
};

Ключевые моменты:

  • Использование интерфейса Handlers упрощает обработку разных HTTP-методов.
  • Контекст ctx содержит параметры маршрута и информацию о запросе.
  • Возвращаемый объект Response полностью совместим с Fetch API.

Рендеринг страниц и компонентов

Fresh поддерживает серверный рендеринг (SSR) с возможностью использования интерактивных компонент. Основной компонент страницы выглядит так:

export default function Home() {
  return (
    <div>
      <h1>Привет, Fresh!</h1>
    </div>
  );
}

Для добавления интерактивности используются islands:

// islands/Counter.tsx
import { useState } from "preact/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onCl ick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Встраивание острова в страницу:

import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <div>
      <h1>Счётчик</h1>
      <Counter />
    </div>
  );
}

Каждый компонент в islands рендерится на сервере с последующей гидратацией на клиенте.

Работа с данными

Fresh поддерживает серверный рендеринг данных через функции handler или getStaticProps. Пример передачи данных на страницу:

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(req, ctx) {
    const data = { message: "Привет из сервера!" };
    return ctx.render(data);
  },
};

На компоненте страницы данные доступны через пропсы:

export default function Home({ data }: { data: { message: string } }) {
  return <div>{data.message}</div>;
}

Статические ресурсы и оптимизация

Файлы в каталоге static/ доступны напрямую через URL. Fresh автоматически оптимизирует их использование и кэширование. Для изображений и других медиа рекомендуется использовать подкаталоги для логической структуры.

Подключение CSS и других ресурсов осуществляется через стандартные теги:

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

CLI команды Fresh

  • fresh dev — запуск сервера разработки с горячей перезагрузкой.
  • fresh build — сборка проекта для продакшена.
  • fresh check — проверка проекта на ошибки.
  • fresh routes — вывод всех зарегистрированных маршрутов.

Команды можно выполнять напрямую через Deno:

deno run -A --unstable main.ts

или через созданный скрипт deno task.

Интеграция с TypeScript и Deno

Fresh полностью поддерживает TypeScript. Файлы .ts и .tsx автоматически компилируются Deno при запуске. Встроенная поддержка типов позволяет избежать ошибок на этапе разработки и использовать современные возможности языка без дополнительных сборщиков.

Использование Middleware

Fresh позволяет подключать middleware для маршрутов. Пример middleware для логирования запросов:

import { MiddlewareHandlerContext } from "$fresh/server.ts";

export async function logger(req: Request, ctx: MiddlewareHandlerContext) {
  console.log(`${req.method} ${req.url}`);
  return ctx.next();
}

Middleware подключается на уровне отдельных маршрутов или глобально через main.ts.

Поддержка окружений и конфигураций

Переменные окружения можно использовать через Deno.env.get("VAR_NAME"). Для разных окружений создаются отдельные файлы .env и подключаются через сторонние библиотеки или встроенные механизмы Deno.

Тестирование и отладка

Fresh совместим с Deno Test для модульного тестирования:

import { assertEquals } from "std/testing/asserts.ts";

Deno.test("пример теста", () => {
  assertEquals(1 + 1, 2);
});

Отладка осуществляется через встроенные инструменты Deno:

deno run -A --inspect-brk main.ts

Это позволяет подключаться к DevTools и пошагово анализировать выполнение приложения.

Оглавление