← Cloudflare Pages / pages / framework-guides

SolidStart

Solid ↗ это веб-фреймворк с открытым исходным кодом, ориентированный на создание производительных приложений с современным опытом разработки на основе JSX.

В этом руководстве вы создадите новое приложение Solid, реализованное с помощью SolidStart ↗ (метафреймворк Solid) и развернуть его с помощью Cloudflare Pages.

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

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

npm create cloudflare@latest -- my-solid-app --framework=solid

Появится запрос на выбор стартового шаблона. Выберите любой из доступных вариантов. Затем будет предложено включить Server Side Rendering. Ответьте yes. Наконец, вам будет предложено выбрать, использовать ли TypeScript, выберите либо yes или no.

create-cloudflare затем установит зависимости, включая Wrangler CLI и адаптер SolidStart для Cloudflare Pages, а затем задаст вопросы по настройке.

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

npm run dev

Чтобы настроить SolidStart для развертывания в Cloudflare Pages, обновите файл конфигурации следующим образом:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
+  server: {
+    preset: "cloudflare-pages",

+    rollupConfig: {
+      external: ["node:async_hooks"]
+    }
+  }
});

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание 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

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

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

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

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

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

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

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

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

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

После настройки сайта вы можете запустить первый деплой. Вы увидите, как Cloudflare Pages устанавливает npm, зависимостей вашего проекта и сборку сайта перед его развертыванием.

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем репозитории Solid, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

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