Как создать и развернуть приложение на Preact: быстрый и простой деплой с App Platform

В статье рассмотрим быстрый способ развернуть приложение на Preact и запустить его в облачной среде. Мы шаг за шагом пройдем все этапы: от первоначальной настройки проекта до публикации в облаке. 

Зачем выбирать Preact вместо React

Preact — это легковесная альтернатива React. Preact полностью поддерживает JSX, знакомые хуки, а также большинство экосистемных решений (роутеры, библиотеки для работы со стейтом). Он оптимизирован по размеру: минифицированная сборка Preact «весит» всего около 3 кБ, тогда React значительно тяжелее. Это критично, когда важна скорость загрузки и быстрая реакция интерфейса.

Чтобы понять, что выиграют разработчики, мы сравним Preact и React в небольшой таблице:

Preact отлично подходит для проектов, где важны скорость и малый размер фронтенда. Если вы хотите быстро вывести MVP или легкий прототип, Preact решит задачу проще и эффективнее. При этом разработчики, знакомые с React, легко перейдут на Preact благодаря схожему API.

Подготовка рабочего окружения

Установка Node.js и npm

Чтобы запустить локальную разработку, нужно установить актуальную версию Node.js (рекомендуем v22.14.0 LTS). Вместе с Node.js установится npm — стандартный менеджер пакетов JavaScript.

Для Windows:

1. Перейдите на официальный сайт nodejs.org и скачайте установщик.
2. Запустите его и следуйте инструкциям.

Для ОС на ядре Linux / MacOS:

После установки введите в командной строке:

Убедитесь, что версии Node и npm корректно отображаются.

Быстрый старт с Vite (необязательно, но удобно)

Чтобы быстро сгенерировать каркас проекта, воспользуйтесь инструментом Vite — это современный инструмент для сборки фронтенд-приложений. При создании приложения воспользуйтесь шаблоном для Preact:

Перейдите в директорию только что созданного проекта и установите зависимости: 

Для запуска сборки в режиме разработки используйте:

Проект будет запущен на стандартном порту 5173:

Если нужно использовать альтернативный порт, используйте:

Ручная настройка (альтернативный вариант)

Если вы предпочитаете настраивать сборку самостоятельно:

1. Создайте новую папку проекта:

2. Инициализируйте package.json:

3. Установите Preact:

4. Для удобной работы с JSX установите:

Обратите внимание: для Preact стоит заменить @babel/preset-react на специализированный пресет или настроить alias в webpack, чтобы JSX корректно компилировался под Preact.

5. В файле webpack.config.js пропишите:

В Vite не требуется вручную указывать alias для Preact.

Однако, если вы мигрируете старый React-код, можно использовать preact/compat:

6. Создайте простейший src/index.html:

7. Создайте src/index.js, где будет обрабатываться Preact-код:

Запустите сборку и проверьте, что всё работает:

После этого в браузере откройте страницу http://localhost:8080, если работаете на локальной машине, или http://<SERVER_IP>:8080 при использовании сервера. Вы увидите заголовок «Привет, Preact!».

Быстрый и простой деплой с App Platform от Timeweb Cloud

Теперь переходим к тому, как создать и развернуть приложение на Preact в Timeweb Cloud. Сервис позволяет упростить процесс деплоя, благодаря готовым «приложениям» (Apps), которые можно запустить за пару минут. Не нужно тратить время на ручную настройку среды или обновления серверов — все работает «из коробки». 

1. Создайте Git-репозиторий и выложите его на GitHub. Используйте:

Перейдите в веб-версию GitHub, авторизуйтесь в своем аккаунте и создайте новый репозиторий (зеленая кнопка New).

Задайте имя репозитория и тип — публичный или приватный. При привязке своего аккаунта GitHub в App Platform можно использовать любой тип. Если добавляете репозиторий по ссылке, то нужен только публичный тип.

После создания репозитория используйте команду:

Отправьте изменения в удаленный репозиторий:

2. Перейдите в панель управления Timeweb Cloud, выберите раздел «App Platform», нажмите кнопку «Добавить». Во вкладке «Тип» оставайтесь на табе «Frontend» и выберите Preact приложение. Выберите Node.js версии вашего проекта (обычно Node.js 22). 

3. Привяжите свой аккаунт GitHub или подключите Git-репозиторий по URL.

4. Выберите репозиторий из списка.

5. Выберите конфигурацию. 

В App Platform для Frontend-проектов доступна конфигурация на 50 тысяч запросов и 50 МБ NVMe стоимостью 1 рубль в месяц. Этого точно хватит для тестирования легковесных приложений. 

Для небольших проектов отлично подойдет конфигурация за 99 рублей в месяц — 200 тысяч запросов пользователей и 1 ГБ NVMe.

6. Укажите команду и директорию сборки. По умолчанию командой сборки используется npm run build — вне зависимости от способа создания проекта. 

7. Запустите деплой приложения и дождитесь его окончания.

Технический домен для проекта в App Platform привязывается автоматически, вместе с этим выпускается SSL-сертификат Let's Encrypt. Приложение сразу будет запущено по этому домену. 

Для привязки собственного домена воспользуйтесь нашей инструкцией.

Для Preact, как и для других сервисов в App Platform, доступно подключение автодеплоя. В этом случае сервис будет отслеживать изменения в репозитории и при появлении новых коммитов обновлять приложение автоматически.

При возникновении ошибки деплоя проверьте совместимость версии окружения Node.js — на странице приложения перейдите во вкладку «Настройки», в строке «Настройки деплоя» нажмите кнопку «Редактировать», окно «Версия окружения»). 

Расширяем функционал Preact

Работа с роутингом и состоянием

В небольшом приложении можно легко обойтись одной страницей. Но если вам нужно переключение между экранами, а также глобальное состояние (например, учетная запись пользователя), добавьте библиотеки:

• preact-router — для навигации по маршрутам.
• preact/hooks — для хуков (useState, useEffect). Уже встроены в Preact, достаточно импортировать из preact/hooks.

Используйте этот код в components/app.js, чтобы подключить роутинг:

Preact Signals: альтернативный подход к состоянию

Помимо стандартных хуков, в экосистеме Preact существует интересный инструмент — Preact Signals. Он предоставляет сигналы, которые при изменении автоматически уведомляют компоненты, где они используются, без сложного управления сеттером стейта.

Пример использования Signals в components/app.js:

• Переменная count становится «живой»: при каждом изменении count.value компонент автоматически рендерится заново.

• Signals упрощают логику работы со значениями, исключая необходимость вручную вызывать setState или использовать другие хуки.

Если проект предполагает частые обновления интерфейса или требует простого способа синхронизации данных, Signals могут стать удобной альтернативой Redux, Context API и даже классическим React-хукам.

Оптимизация и ускорение загрузки Preact-приложения

Code Splitting и ленивая загрузка в Preact

Когда ваше приложение начинает разрастаться, одним из ключевых моментов производительности становится скорость первоначальной загрузки. Вместо того чтобы отдавать пользователю весь код сразу, можно разбивать бандл на меньшие части, а затем подгружать их при необходимости. Это особенно важно в современных SPA-приложениях, где некоторые страницы или функциональные модули могут быть не нужны сразу.

Зачем это нужно

1. Уменьшение объема первоначальной загрузки. Пользователь скачивает только те файлы, которые требуются на стартовом экране. Остальные части кода подгружаются, когда пользователь переходит на соответствующие страницы или активирует нужный функционал.

2. Ускорение рендеринга. Благодаря меньшему объему бандла приложение начинает рендериться быстрее, что положительно влияет на UX, а также может улучшать метрики Lighthouse.

3. Оптимизация трафика. Если пользователь не переходит в определенные разделы, их код может вовсе не загружаться, что экономит трафик и снижает нагрузку на сервер.

Как реализовать в Preact

С помощью встроенной возможности JavaScript — динамического импорта — можно разбивать код на отдельные чанки (chunks). При использовании Vite динамический импорт автоматически создает отдельные бандлы благодаря встроенной поддержке ES-модулей.

В этом примере:

• lazy(() => import('./About')) говорит сборщику, что код компонента About нужно вынести в отдельный бандл.
• Suspense используется для отображения компонента-заглушки, пока идет загрузка.
• Если пользователь не дойдет до места, где используется About, нужный код так и не будет загружен, что уменьшит объем стартового бандла.

Особенности настроек

• В Vite Code Splitting работает автоматически, и динамические импорты создают отдельные файлы без дополнительной настройки.
• Fallback-компонент в Suspense не обязателен, но он улучшает UX, показывая индикатор загрузки.

Результат для пользователя

Благодаря Code Splitting пользователи будут быстрее видеть интерфейс вашего приложения. Вместо одного большого файла приложение разбивается на несколько частей, и каждая грузится по мере необходимости. При этом сохраняется вся логика Preact (JSX, хуки, состояние), а переходы между страницами и модулями становятся более плавными, так как в памяти поддерживается только нужный код.

Дополнительные советы

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

2. Следите за критичными путями. Оставляйте в основном бандле только то, что нужно для рендеринга первой страницы (Hero, меню, хедер), а всё остальное выносите в динамические импорты.

3. Используйте профилирование. Preact DevTools или браузерные инструменты веб-разработки помогут выяснить, какие куски кода загружаются чаще всего, и оптимизировать их для быстрейшей отдачи.

Возможные ошибки при переходе с Preact на React

Заключение

Preact — прекрасный выбор для легких и быстрых клиентских приложений. Его минималистичное ядро упрощает разработку, а высокая совместимость с экосистемой React помогает быстро мигрировать. В паре с Timeweb Cloud вы получаете удобство развертывания: можно за пару минут поднять приложение, обновлять код через Git и не бояться внезапного падения сервера.