Сборка и публикация

Сборка — это превращение исходного кода в набор готовых файлов для браузера: JSX компилируется в JavaScript, код сжимается, файлам даются уникальные имена для кеширования. Собранное приложение Solid — это обычные статические файлы, их может раздавать любой веб-сервер или статический хостинг.

Сборка

В папке проекта выполните:

npm run build

Vite соберёт проект в папку dist:

dist/
├── index.html
└── assets/
    ├── index-B3kq9xLm.js
    └── index-Cz81pQwa.css

Буквы в именах файлов меняются при каждом изменении кода. Благодаря этому браузер посетителя не будет держать в кеше старую версию.

Проверка сборки

npm run serve

Команда serve из шаблона запускает vite preview — простой сервер, который раздаёт папку dist. В терминале появится адрес, обычно http://localhost:4173. Проверьте там, что всё работает так же, как при разработке.

Публикация на хостинге

Хостинг	Команда сборки	Папка
Netlify	`npm run build`	`dist`
Vercel	`npm run build`	`dist`
Cloudflare Pages	`npm run build`	`dist`
GitHub Pages	`npm run build`	`dist`

Обычно достаточно подключить репозиторий на сайте хостинга и указать эти два значения. Хостинг сам выполнит сборку после каждого изменения в ветке main.

Маршруты на сервере

Если открыть https://example.com/posts/7 напрямую или обновить такую страницу, сервер станет искать файл posts/7, которого нет. Нужно настроить его так, чтобы на любой адрес он отдавал index.html, а дальше разберётся Solid Router. На Netlify для этого создайте файл public/_redirects:

/*    /index.html   200

Vite копирует содержимое public в dist без изменений, поэтому правило попадёт на хостинг вместе со сборкой. У других хостингов похожая настройка называется SPA fallback или rewrite.

Адрес API

Адреса, которые отличаются при разработке и на сервере, хранят в файле .env. Vite передаёт в код только переменные с приставкой VITE_:

VITE_API_URL=https://jsonplaceholder.typicode.com

В коде значение читается как import.meta.env.VITE_API_URL.

SolidStart

Если нужен серверный рендеринг, серверные функции или маршруты по файлам, проект переводят на SolidStart. Для обычного клиентского приложения, как блог из курса, достаточно Vite.

Частая ошибка

Открыть dist/index.html двойным щелчком. Страница загрузится по адресу file://, пути к файлам и маршруты не сработают, и вы увидите пустой экран. Собранное приложение всегда проверяйте через сервер — npm run serve.

Спасибо, что читаете!