Мы с друзьями любим играть в настольные игры, но не всегда под рукой оказываются громоздкие коробки с играми. Тут на помощь приходит смартфон. Раньше я написал игру Ну, этот, аналог коробочной игры Бум. Затем родилась идея игры с похожей механикой, но вместо слов - случайные фильмы с кинопоиска. В качестве основы проекта я взял SvelteKit. В статье расскажу об интересном функционале SvelteKit и быстром деплое на площадке Vercel. Встречайте, О, кинчик! О, кинчик - это игра, по механике похожая на Алиас или Активити. Только вместо скучных слов - фильмы из базы кинопоиска. Как показала практика, отгадывать Человек на проволоке или Реквием по мечте куда интересней, чем банальные слова типа "рыбак" и "охотник".  Игроки разбиваются на две команды, затем игрок за отведенное время пытается объяснить своей команде как можно больше фильмов. Когда фильмы закончатся, команда с большим количеством отгаданных фильмов побеждает. Исходный код проекта доступен в Gitlab, сыграть можно здесь. Я не буду углубляться в особенности Svelte (об этом можно прочитать в моих  предыдущих статьях: раз, два, три, четыре), а больше уделю внимания функциям, которые мне понравились в SvelteKit. SvelteKit это метафреймворк, построенный на базе svelte с файл роутером (похожим на Next), поддержкой SSR, статической генерацией, serveless и невероятным dev experience, который дает Svelte. Чтобы запустить проект достаточно выполнить команду: Мастер создания проекта спросит, хотите ли вы использовать демо данные, нужна ли вам поддержка TypeScript, EsLint и Prettier. И подскажет, как установить зависимости и запустить дев сервер. Для получения данных о фильмах из кинопоиска, мы будем использовать api "Случайный фильм!". Напрямую запросить данные из фронтенда у нас не получится, мы столкнемся с CORS ограничениями. Поэтому воспользуемся функционалом Endpoints, который позволяет создавать серверные функции. Для этого достаточно создать файл .js или .ts, который будет экспортировать функцию get, post, put, patch или del, для соответвующего HTTP  метода. Теперь при заходе на страницу http://localhost:3000/api  будет отдаваться набор из случайных фильмов. Поскольку  фронтенд и /api теперь находятся на одном домене, можно спокойно получать данные.  Игровой процесс разделен по экранам. Я использовал встроенный файл роутер для навигации между ними. Для создания страницы достаточно создать файл в папке routes, соответствующий пути страницы. Например, файл src/routes/turn.svelte будет соответстовать странице http://localhost:3000/turn. Подбронее про роутинг и систему шаблонов можно прочитать в документации. Поскольку начать игру можно только с главного экрана, нужно сделать редирект с остальных страниц в корень. Вообще, в SvelteKit есть функционал Loading, который позволяет выполнять код на стороне сервера, что-то вроде getServerSideProps из Next.js. Но я воспользовался функционалом Hooks, который позволяет перехватывать выполнение на стороне сервера и по-разному обрабатывать ответы. В файле src/hooks/index.js  содержится следующая логика обработки: Теперь при заходе на любой адрес, отличный от /, /rules и /api , получим редирект в корень проекта. При этом переходы на уже загруженной странице будут обрабатываться как обычно. Во время разработки я захотел сделать переходы между страницами с эффектом прокрутки кинопленки. Svelte имеет богатый функционал анимаций, который легко можно встроить для анимаций переходов между страницами. Для этого я завернул страницы в компонент Frames.svelte Когда осуществляется переход, к текущей странице применяется анимация out:fly, а к новой применяется анимация in:fly. Задав нужные параметры, легко получить эффект прокрутки кинопленки. Кстати, обратите внимание на  выражение: Такая конструкция позволяет хранить в переменной текущую высоту окна браузера. При изменении размеров, в переменной будет обновленное значение. Эта функция не раз спасала меня при верстке макетов для мобильных браузеров safari, где строка навигации включена в css выражение 100vh. Под капотом у SvelteKit скрывается сборщик Vite, что позволяет использовать  возможности этого инструмента. В проекте я использовал абсолютные импорты, чтобы получить быстрый доступ к компонентам и стору. Для этого достаточно добавить в файл svelte.config.js директиву, определяющую импорты Для деплоя я использовал площадку Vercel. Чтобы задеплоить проект, достаточно выбрать репозиторий и указать фреймворк  SvelteKit. После клика Deploy, проект будет собран и развернут на площадке. В дальнейшем, на каждый коммит в выбранную ветку будет автоматически запускаться сборка и деплой проекта. На мой взгляд, разработка и деплой современных веб проектов не были никогда такими простыми. Больше не нужно вручную настраивать сборщик, SSR и кучу всего, что появилось в веб разработке за последние годы. SvelteKit из коробки предоставляет обширные возможности, которые дает разработчикам Svelte, при этом добавляя серверный рендеринг, возможности писать api ендпоинты, использовать файловый роутинг и многое другое. А Vercel позволяет развернуть проект за считаные секунды. SvelteKit находится в фазе активной разработки и что-то к релизу версии 1.0.0 может измениться, но уже сейчас я рекомендую обратить внимание на этот фреймворк и попробовать его в пет проектах. Телеграм-группа русского сообщества Svelte: @sveltejs CTO