Ещё один пресет: создаём демо с помощью Vite и Express

Какое-то время назад я писала про различные способы способы обеспечить двустороннюю связь между клиентом и сервером: Long Polling, WebSockets и Server-Sent Events. Во всех этих постах были небольшие Live Demo, где можно потрогать реализацию. В этой статье я расскажу, что интересного есть этих реализациях и как собрать с нуля подобный небольшой, но функциональный проект.

Начнём с того, какие требования были для проектов:

• Легковесный и современный клиент
• Простой сервер, который будет раздавать статику и предоставлять некоторое API для работы с данными
• Решения для клиента и сервера должны иметь широкую поддержку
• Клиент и сервер должны существовать вместе и поддерживать локально hot reload на любые изменения как на клиенте, так и на сервере

На основе первых трёх требований были выбраны библиотеки Vite и Express. Vite был выбран как самый новый и прогрессивный вариант, а Express как самое лёгкое решение для бэкенда на Node.js, для которого существует множество вспомогательных библиотек.

Итак, для начала инициализируем наш проект, используя npm:

npm create vite@latest my-demo -- --template react-ts

У Vite есть много шаблонов, но в нашем проекте будем использовать React + TypeScript. После выполнения этой команды будет создана папка my-demo, в которой будет лежать исходный код клиентской части приложения.

Далее переходим к созданию сервера. Добавляем в зависимости необходимый пакет:

npm i express

Создаём в корне проекта папку server, в которой будет лежать исходный код нашего сервера. Добавляем в неё файл index.mjs со следующим содержимым:

На сервере не будет использоваться типизация, чтобы не усложнять проект, при желании её можно добавить.