← Cloudflare Pages / pages / framework-guides

SvelteKit

SvelteKit является официальным фреймворком для создания современных веб-приложений на Svelte ↗, всё более популярный инструмент с открытым исходным кодом для создания пользовательских интерфейсов. В отличие от большинства фреймворков, SvelteKit использует Svelte, компилятор, который преобразует код компонентов в эффективный JavaScript. Благодаря этому SvelteKit создаёт быстрые реактивные приложения, точечно обновляющие DOM при изменении состояния приложения.

В этом руководстве вы создадите новое приложение SvelteKit и развернете его с помощью Cloudflare Pages. Вы будете использовать SvelteKit ↗, официальный фреймворк Svelte для создания веб-приложений любого масштаба.

Используйте create-cloudflare ↗ CLI (C3) для настройки нового проекта. C3 создаст каталог нового проекта, запустит официальный инструмент настройки SvelteKit и предложит возможность мгновенного развертывания.

Чтобы использовать create-cloudflare чтобы создать новый проект SvelteKit, выполните следующую команду:

npm create cloudflare@latest -- my-svelte-app --framework=svelte --platform=pages

SvelteKit предложит вам выбрать параметры настройки. Для параметра шаблона выберите один из вариантов приложения или проекта. Остальные ответы не повлияют на остальную часть этого руководства. Выбирайте варианты, подходящие для вашего проекта.

create-cloudflare затем установит зависимости, включая Wrangler CLI и SvelteKit @sveltejs/adapter-cloudflare адаптера и задаст вам вопросы по настройке.

После того как вы установите зависимости проекта, запустите приложение:

npm run dev

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Чтобы использовать SvelteKit с Cloudflare Pages, добавьте Адаптер Cloudflare ↗ в приложение.

1. Установите Cloudflare Adapter с помощью команды npm i --save-dev @sveltejs/adapter-cloudflare в вашем терминале.
2. Добавьте адаптер в svelte.config.js:

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    // ... truncated ...
  }
};

export default config;

3. (Требуется, если вы используете TypeScript) Добавьте поддержку переменных окружения. env объект, содержащий пространства имён KV и другие объекты хранилища, передаётся в SvelteKit через свойство platform вместе с context и caches, поэтому обращаться к нему можно в хуках и конечных точках. Например:

declare namespace App {
    interface Locals {}

+   interface Platform {
+       env: {
+           COUNTER: DurableObjectNamespace;
+       };
+       context: {
+           waitUntil(promise: Promise<any>): void;
+       };
+       caches: CacheStorage & { default: Cache }
+   }

    interface Session {}

    interface Stuff {}
}

4. Доступ к добавленным KV или Durable objects (или, в общем, к любым привязка) в вашей конечной точке на env:

export async function post(context) {
	const counter = context.platform.env.COUNTER.idFromName("A");
}

Если вы используете create-cloudflare(C3) ↗ чтобы создать новый проект Svelte: C3 установит все зависимости, необходимые проекту, и предложит развернуть его через CLI. Если вы согласитесь, сайт станет доступен в сети, и вы получите URL-адрес развертывания.

Чтобы развернуть сайт в Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Выберите Pages на вкладке.

4. Выберите Импорт существующего репозитория Git.

5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

6. В Настройки сборки разделе выберите SvelteKit как ваш Framework preset. Ваш выбор предоставит следующую информацию:

При желании можно настроить Название проекта поле. По умолчанию оно совпадает с именем репозитория GitHub, но совпадение не обязательно. Поле Название проекта значение присваивается в качестве вашего *.pages.dev поддомен.

После завершения настройки нажмите на Save and Deploy кнопку.

Вы увидите, как выполняется ваш первый конвейер развёртывания. Pages устанавливает все зависимости и собирает проект согласно заданным настройкам.

Cloudflare Pages будет автоматически пересобирать ваш проект на SvelteKit и разворачивать его при каждом новом отправленном коммите.

Кроме того, у вас будет доступ к развёртывания предпросмотра, которые повторяют процесс сборки и развёртывания для pull request. Благодаря им можно просматривать изменения проекта по реальному URL-адресу до их развёртывания в продакшене.

В SvelteKit функции реализуются в виде конечных точек. Функции, содержащиеся в /functions директория в корне проекта не будет включена в развертывание, которое компилируется в единый _worker.js файл.

Чтобы получить функциональность, эквивалентную Pages Functions onRequests, вам нужно написать стандартные обработчики запросов в SvelteKit. Например, следующий файл TypeScript ведёт себя как onRequestGet:

import type { RequestHandler } from "./$types";

export const GET = (({ url }) => {
	return new Response(String(Math.random()));
}) satisfies RequestHandler;

После выполнения этого руководства вы успешно развернули свой сайт на Svelte на Cloudflare Pages. Чтобы начать работу с другими фреймворками, обратитесь к списку руководств по фреймворкам.