Настройка проекта

В этой статье мы рассмотрим создание клона Twitter с помощью Rakkas, передового фреймворка React на базе Vite. Наш клон Twitter, который мы назовем ublog, будет:

• работать на Cloudflare Workers,
• хранить свои данные на Cloudflare Workers KV,
• и использовать GitHub для аутентификации.

Настройка проекта

⚠️ Сам Rakkas работает на Node 14.20 или более поздней версии, но для этого руководства нам понадобится как минимум Node 16.7.

Мы будем использовать пакет create-rakkas-app для создания нашего шаблона. Следующие параметры включат все функции, кроме демонстрационного приложения:

npx create-rakkas-app@latest ublog -y --no-demo

Вторым шагом будет переход в каталог проекта и установка зависимостей:

cd ublog && npm install

На этом этапе мы должны сделать быструю проверку, чтобы убедиться, что все настроено правильно, запустив dev-сервер:

npm run dev

Это запустит dev-сервер на localhost:5173. Вы можете посетить этот адрес, чтобы увидеть сообщение «Hello World».

Теперь вы можете отредактировать файл src/routes/index.page.tsx, чтобы увидеть горячую перезагрузку модуля Rakkas с поддержкой быстрого обновления в действии. Ваши правки будут мгновенно отражены в браузере.

Персонализация

Имя пакета в файле package.json — -TODO-, чтобы напомнить нам, что его следует изменить. Поэтому мы изменим его на ublog.

Сгенерированный шаблон поставляется с файлом .prettierrc для настройки Prettier, популярного форматировщика кода. Сгенерированная конфигурация пуста, но мне нравится немного настраивать ее, чтобы использовать табуляцию для отступов, добавив "useTabs": true. Конечно, у вас могут быть свои предпочтения. После редактирования мы выполним следующую команду, чтобы переформатировать наши исходники:

npm run format

Теперь нам следует создать файл .gitignore и добавить в него node_modules и dist:

node_modules
dist

…и инициализируем наше Git-репо:

git init && git checkout -b main

Настройка для Cloudflare Workers

В документации Rakkas по Cloudflare Workers говорится, что мы должны создать файл wrangler.toml. Этот файл скопирован оттуда дословно, за исключением названия проекта:

name = "ublog"
compatibility_date = "2021-11-01"
compatibility_flags = [
  "streams_enable_constructors",
]
main = "dist/server/cloudflare-workers-bundle.js"
usage_model = 'bundled'
workers_dev = true

[site]
bucket = "./dist/client"

Затем мы должны установить адаптер HatTip для Cloudflare Workers. HatTip — это набор библиотек JavaScript для создания серверных приложений HTTP, которые работают на многих платформах, таких как Node.js, Cloudflare Workers, Vercel, Netlify, Deno и других. Rakkas полагается на него для поддержки бессерверных приложений.

npm install -S @hattip/adapter-cloudflare-workers

Теперь мы настроим Rakkas на сборку для Cloudflare Workers, обновив опции, передаваемые плагину Rakkas Vite в файле vite.config.ts. В итоге это будет выглядеть следующим образом:

import { defineConfig } from "vite";
import rakkas from "rakkasjs/vite-plugin";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        tsconfigPaths(),
        rakkas({
            adapter: "cloudflare-workers",
        }),
    ],
});

Теперь посмотрим, все ли работает, когда мы соберем наше приложение, запустив npm run build. Если все работает хорошо, Rakkas сообщит вам, что он собрал ваш пакет Cloudflare Workers в dist/server/cloudflare-workers-bundle.js.

У Cloudflare Workers есть локальный эмулятор под названием miniflare. Мы можем использовать его для локального тестирования нашего пакета:

npm install -D miniflare
npx miniflare --modules dist/server/cloudflare-workers-bundle.js

Это запустит локальный рабочий эмулятор на localhost:8787. При посещении вы должны увидеть сообщение «Hello World».

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

Если до сих пор все работало хорошо, мы можем развернуть наше (пока еще бесполезное) приложение на Cloudflare Workers с помощью wrangler CLI. Если у вас нет учетной записи Cloudflare Workers или вы не вошли в систему, следующая команда откроет ваш браузер, чтобы вы могли войти или создать бесплатную учетную запись перед публикацией приложения:

npm install -D wrangler
npx wrangler publish

Если все работает хорошо, ваше приложение будет запущено на Cloudflare Workers, а wrangler выведет URL, по которому оно доступно. Если вы зайдете на сайт, вы должны увидеть сообщение «Hello World».

Наконец, давайте создадим несколько ярлыков, прежде чем зафиксировать наши изменения. Добавим следующее в раздел scripts файла package.json:

"scripts": {
    // ... existing scripts ...
    "local": "miniflare --modules dist/server/cloudflare-workers-bundle.js",
    "deploy": "wrangler publish"
}

Теперь мы можем просто выполнить npm run local для локального тестирования и npm run deploy для развертывания.

Теперь мы можем зафиксировать наши изменения:

git add . && git commit -m "chore: initialize boilerplate for Cloudflare Workers"

Что дальше?

В следующей статье мы узнаем, как использовать Cloudflare Workers KV для хранения данных, включая создание макета хранилища KV в процессе разработки.

Вы можете ознакомиться с прогрессом до этого момента на GitHub.