Приложение может работать в двух режимах — SPA и SSR. Для обоих режимов свои команды запуска и сборки.
Одностраничное приложение (SPA) загружает все необходимые ресурсы сразу и обновляет содержимое по мере необходимости без рендера на сервере. У приложения всего один html файл. Поэтому приложение называется одностраничным. В единственном html файле указаны загружаемые скрипты приложения без разметки самого содержимого. Сервер вернет один и тот же пустой html файл на запросы с любым URL. Рендер будет выполняться только в браузере, а результат рендера может завесить от множества параметра, в том числе и от текущего URL в строке адреса. Поэтому интерфейс приложения будут обладать множеством состояний или "страниц". Изменение параметров приводит к быстрому рендеру приложения без перезагрузки приложения с сервера. Приложение обычно взаимодействует с сервером АПИ для загрузки только чистых данных, а не html разметки.
npm start
Приложение будет доступно по адресу http://localhost:8050. Адрес можно поменять через переменную окружения HOST и PORT (заданы по умолчанию в файле .env). В режиме разработки приложение в браузере будет автоматически обновляться при изменениях в исходниках без необходимости ручной перезагрузки. Если изменения затрагивают настройки сборки, то приложение потребуется перезапустить — снова выполнить команду npm start.
npm run build
Сборка выполняется для подготовки файлов приложения перед публикаций на сервер. Собранные файлы приложения окажутся в директории /dist/client. Среди собранных файлов окажется единственный html файл, файлы css, js, и другие файлы-ресурсы, например изображения.
npm run preview
В режиме предпросмотра приложение будет собрано для production и запущено на локальном http сервере с помощью Vite. На реальном сервере обычно используется nginx с настройками для отдачи по url адресу всех запрашиваемых файлов приложения.
По запросу клиента на сервере выполняется SPA приложение и клиенту возвращается динамически созданный HTML документ как результат исполнения (рендера) приложения. Клиент загрузит HTML документ наполненный содержимым, а также загрузит скрипты SPA приложения. Поэтому последующие обновления в приложении будут происходить за счёт рендера в браузере. Рендер на сервере выполняется только для прямых запросов, когда пользователь загружает сайт. SSR используется для поисковой оптимизации, так как поисковые роботы смогут сразу получить содержимое страниц для индексации и успеют просканировать большее число гиперссылок.
npm start:server
В терминале появится адрес приложения, например http://localhost:8050. В режиме разработки приложение будет автоматически обновляться при изменениях в исходниках без необходимости ручной перезагрузки. Но если изменения затрагивают node.js сервер или настройки сборки/прокси, то приложение потребуется перезапустить.
npm run build:server
Выполняется сборка SPA приложения для исполнения на клиенте и на сервере — создаются две версии. Сперва будет собрано клиентское приложение в директорию /dist/client. Следом будет собрано приложение для сервера в директорию /dist/server. Приложение для сервера не является само по себе сервером - это версия SPA приложения, которое синтаксически корректно для исполнения на Node.js. Для запуска рендера предназначено приложение-сервер в ./server. Его сборку выполнять не надо, но в зависимости от режима запуска сервер будет использовать либо исходник SPA приложения из /src, либо production сборку из /dist/server.
npm run preview:server
В режиме предпросмотра приложение будет собрано для production, и будет запущен сервер рендера на Node.js ./server/index.ts. Сервер будет исполнять собранное SPA приложение из ./dist/server для рендера в соответствии с параметрами запроса, отдавать результат рендера в формате html. Если запрос на ресурсы приложения (файлы js, css), то они отдаются напрямую из директории ./dist/client. На реальном сервере отдача файлов часто делегируется nginx, а остальные запросы проксируются в серверное приложение для рендера.
Если приложение уже собрано, то его можно запустить без пересборки:
npm run node:server
Выполнения всех юнит-тестов с помощью Jest. Будут найдены и исполнены все тесты в файлах с расширением *.spec.ts *.spec.js *.spec.tsx
npm run test
Проверка правил типизаций на TypeScript
npm run check:type
Проверка ошибок в коде с помощью ESLint и автоматическое исправление, если это возможно.
npm run check:lint
npm run check:lint:fix
Проверка форматирования кода с помощью Prettier и автоматическое исправление, если это возможно.
npm run check:prettier
npm run check:prettier:fix