Как создать и развернуть приложение на Preact

Публичное облако на базе VMware с управлением через vCloud Director

Вход / Регистрация

06 марта 2025 г.

13 минут чтения

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

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

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

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

Параметр	Preact	React
Размер библиотеки	~3 кБ	~30–40 кБ
Совместимость с JSX	Полная	Полная
Поддержка хуков	Да	Да
Экосистема	Сравнительно уже, но нарастает	Широкая, много готовых решений
Производительность	Высокая, оптимизация при минимальном весе	Высокая, но требует дополнительной оптимизации

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

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

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

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

Для Windows:

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

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

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 22

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

node -v
npm -v

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

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

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

npm create vite@latest my-project -- --template preact

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

cd my-project

npm install

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

npm run dev

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

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

npm run dev -- --port 3000

apps

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

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

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

mkdir my-preact-app
cd my-preact-app

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

npm init -y

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

npm install preact

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

npm install --save-dev babel-core babel-loader @babel/preset-env @babel/preset-react webpack webpack-cli html-webpack-plugin webpack-dev-server

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

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

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
    	path: path.resolve(__dirname, 'dist'),
    	filename: 'bundle.js',
	},
	module: {
    	rules: [{
        	test: /\.js$/,
        	exclude: /node_modules/,
        	use: {
            	loader: 'babel-loader',
            	options: {
                	presets: [
                    	['@babel/preset-env'],
                    	['@babel/preset-react', {
                        	pragma: 'h',
                        	pragmaFrag: 'Fragment'
                    	}]
                	]
            	}
        	}
    	}]
	},
	plugins: [
    	new HtmlWebpackPlugin({
        	template: 'src/index.html',
        	filename: 'index.html',
    	}),
	],
	devServer: {
    	static: './dist',
    	compress: true,
    	port: 8080
	}
};

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

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

import { useState } from 'preact/compat';

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8" />
	<title>My Preact App</title>
</head>
<body>
	<div id="root"></div>
	<script src="dist/bundle.js"></script>
</body>
</html>

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

import { h, render } from 'preact';

function App() {
  return <h1>Привет, Preact!</h1>;
}

render(<App />, document.getElementById('root'));

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

npx webpack serve --mode development

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

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

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

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

git init
git add .
git commit -m "Initial commit"

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

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

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

git remote add origin <ссылка на репозиторий>

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

git push -u origin main

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

import { h, render } from 'preact';
import Router from 'preact-router';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <Router>
        <Home path="/" />
        <About path="/about" />
      </Router>
    </div>
  );
}

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

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

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

import { signal } from '@preact/signals-core';
import { h, render } from 'preact';

const count = signal(0);

function App() {
  return (
	<div>
  	<p>Значение: {count.value}</p>
  	<button onClick={() => count.value++}>Увеличить</button>
	</div>
  );
}

Переменная count становится «живой»: при каждом изменении count.value компонент автоматически рендерится заново.
Signals упрощают логику работы со значениями, исключая необходимость вручную вызывать setState или использовать другие хуки.

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

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

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

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

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

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

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

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

import { h } from 'preact';
import { Suspense, lazy } from 'preact/compat';

// Ленивая загрузка компонента (код, относящийся к этому компоненту, будет в отдельном бандле).
const About = lazy(() => import('./About'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <About />
      </Suspense>
    </div>
  );
}

export default App;

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

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

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

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

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

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

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

Группируйте похожие страницы. Если у вас несколько похожих по назначению разделов (например, документация или панель аналитики), имеет смысл загружать их одним куском, чтобы не создавать слишком много маленьких запросов к серверу.
Следите за критичными путями. Оставляйте в основном бандле только то, что нужно для рендеринга первой страницы (Hero, меню, хедер), а всё остальное выносите в динамические импорты.
Используйте профилирование. Preact DevTools или браузерные инструменты веб-разработки помогут выяснить, какие куски кода загружаются чаще всего, и оптимизировать их для быстрейшей отдачи.

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

Симптом	Какая проблема	Способ решения
Компонент не рендерится или рендерится частично	Функциональный компонент использует React-специфичные импорты (например, `import React from 'react'` или некорректно подключен ReactDOM), а в Preact следует использовать `import { h } from 'preact'`.	Проверить и заменить все импорты, связанные с React, на соответствующие Preact. Убедиться, что в конфигурации сборщика (например, `webpack`) настроены алиасы, подменяющие `react` на `preact/compat`.
Ошибка «createContext is not a function»	Используется контекст из React, но Preact-версия (особенно старая) может не поддерживать все функции контекста (или называется иначе).	Убедиться, что установлена последняя версия Preact. При необходимости подключить Preact Compat (`preact/compat`). Использовать `import { createContext } from 'preact'` или заменить места, где используется `React.createContext`, на Preact-аналог.
Проблемы с хуками (`useState`, `useEffect` и т.д.)	Код написан с упором на React-хуки, которые в ранних версиях Preact могли работать иначе (или отсутствовать). При неполном переходе могут остаться «хардкодные» импорты из React.	Проверить, что используется последняя версия Preact с поддержкой хуков. Все хуки импортировать напрямую из Preact: `import { useState, useEffect, ... } from 'preact/hooks'`.
Не работает роутинг (ошибка при переключении страниц)	Используется React Router без учета специфики Preact (например, `react-router-dom`). В Preact обычно применяют `preact-router` или альтернативы, несовместимые напрямую с React Router.	Заменить `react-router-dom` на `preact-router` или аналог. Проверить, что все компоненты маршрутов корректно подключены. Настроить правильные пути и убедиться, что в конфигурации сборки нет конфликтов с роутером.
Неправильная работа контента в некоторых компонентах	В React могли использоваться определенные пропы (например, `children` или `ref`), которые в Preact требуют иных подходов или доступны под другими именами.	Проверить различия в API (особенно с `ref` и `children`). Использовать совместимый синтаксис (через Preact Compat) или адаптировать код компонентов, учитывая особенности Preact.
Плагин React DevTools не видит компоненты	React DevTools не совместим напрямую с Preact-приложением (особенно если не подключен `preact/debug` или нет `preact/compat`).	Установить и настроить Preact DevTools или воспользоваться React DevTools с помощью `preact/compat` + `preact/debug`. Убедиться, что DevTools в браузере видят Preact как отдельную вкладку.
Проблемы с тестами (Jest, Testing Library)	Тестовые окружения настроены под React: `react-test-renderer`, `@testing-library/react`, которые могут некорректно работать с Preact.	Использовать `@testing-library/preact` или аналогичные инструменты, специально поддерживающие Preact. Проверить, что конфигурация Jest учитывает подмену React на Preact (через алиасы в `moduleNameMapper`).

Заключение

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

Хотите внести свой вклад?

Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию