📄️ Как я развернул фулстек-приложение на "NestJS" с "Angular" в "Supabase" и "Vercel"
Я разработал небольшое фулстек-приложение в качестве примера REST + WebSockets бойлерплейта на NestJS и Angular. В приложении используется PostgreSQL для хранения данных, Redis для кэширования и Minio для работы с файлами. Изначально целевой средой для развертывания был Kubernetes, но для ускорения разработки и тестирования MVP я решил использовать бесплатные облачные сервисы: Supabase для инфраструктуры и Vercel для деплоя бэкенда и фронтенда.
📄️ Создание пустого проекта с помощью NestJS-mod
После многих лет написания различных проектов на NestJS и Angular, я решил переписать группу проектов из репозитория https://github.com/rucken и использовать текущий стиль кодирования, он не сильно поменялся, просто стало меньше однотипного кода.
📄️ Создание пустого Angular проекта и связь его с существующим сервером на NestJS
Создание приложения происходит через nx схематик для Angular.
📄️ Добавление базы данных Postgres в проект и запуск миграций через Flyway для NestJS-mod приложения
База данных бу дет подниматься через Docker Compose.
📄️ Подключение PrismaORM в NestJS-mod приложение и проверка его работы через REST
Подключение Prisma к NestJS происходит через пакет https://www.npmjs.com/package/@nestjs-mod/prisma.
📄️ Пример простого обновления NestJS-mod библиотек
При написании последнего поста я обнаружил небольшие ошибки и экстренно их устранил.
📄️ Добавление Swagger документации в NestJS-mod приложение и генерация REST-клиента для Angular-приложения
Подключение генератора Swagger документации к бэкенду.
📄️ Сборка приложений на NestJS и Angular и запуск их в двух вариантах: через PM2 и через "Docker Compose"
Для запуска собранных приложений в режиме PM2 фронтенд будет встроен в бэкенд в виде статичных файлов.
📄️ Ручной деплой NestJS и Angular приложений на выделенном сервер через "Docker Compose" и "PM2"
Покупаем выделенный сервер и настраиваем SSH доступ к нему с локального компьютера.
📄️ Добавляем CI/CD конфиг для деплоя NestJS и Angular приложений на выделенный сервер с помощью GitHub Actions
Прописываем секретные переменные окружения в гитхаб.
📄️ Ускорение деплоя NestJS и Angular с помощью общественных Github-раннеров и создания промежуточных Docker-образов
В этом посте я настрою сборку Docker-образов:
📄️ Установка Kubernetes через MicroK8s и настройка деплоя NestJS и Angular приложений
Когда в команде нет DevOps - инженеров, но очень хочется задеплоить приложение в Kubernetes, можно легко это сделать с помощью https://microk8s.io, в данном посте я опишу как это сделать и открыть доступ к приложению на определенном порте.
📄️ Доступ к сайту на NestJS и Angular по доменному имени c SSL - сертификатом в Kubernetes через Ingress
В Kubernetes очень легко настраивается работа с SSL, это наверное одна из главных причин почему я и начал им пользоваться, в этой статье я опишу простой сценарий его подключения.
📄️ Семантическое версионирование NestJS и Angular приложений в NX-монорепозитории
Подключение и настройка nx-semantic-release плагина для NX-монорепозитория для автоматического создания релиза с последующим деплоем приложений.
📄️ Добавляем lint-staged в NestJS и Angular приложения, включаем семантическое версионирование фронтенда
Так как версионирование через плагин nx-semantic-release происходит путем анализа изменений по связанным Typescript-импортам, то нам нужно минимизировать эти изменения, для этого в проект подключаем lint-staged и добавляем строгости в Typescript-код.
📄️ Создание конфигурируемого Webhook-модуля для NestJS-приложении
В рамках этой статьи я опишу создание двух NestJS-модулей с различным способом конфигурирования: утилитарный модуль и бизнес-модуль со своей базой данных.
📄️ Создание пользовательского интерфейса для модуля Webhook с помощью Angular
В этой статье я опишу создание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https//formly.dev, для стилей используется https://tailwindcss.com, стейт машины нет.
📄️ Интеграция внешнего сервера авторизации https://authorizer.dev в фулстек приложение на NestJS и Angular
В этой статье я подключу в проект внешний с ервер авторизации https://authorizer.dev и напишу дополнительные бэкенд и фронтенд модули для интеграции с ним.
📄️ Интеграция внешнего файлового сервера https://min.io в фулстек приложение на NestJS и Angular
В этой статье я подключу в проект внешний файловый сервер https://min.io и напишу дополнительные бэкенд и фронтенд модули для интеграции с ним.
📄️ Кэширование информации в Redis на NestJS
На каждом фронтенд запросе к бэкенду запрашивается информация по профилю пользователя из базы данных, это создает дополнительную нагрузку на базу данных и увеличивает время ответа бэкенда, для ускорения подобных запросов можно кэшировать ответ базы данных.
📄️ Получение серверного времени через WebSockets и отображение его в Angular-приложении
В этом посте я опишу как создать веб-сокетный стрим в бэкенде на NestJS и подписаться на него из фронтенд приложения на Angular.
📄️ Валидация REST-запросов в NestJS-приложении и отображение ошибок в формах Angular-приложения
В этом посте я добавлю в NestJS-приложении валидацию REST-запросов и их отображение в формах Angular-приложения.
📄️ Добавление поддержки нескольких языков в NestJS и Angular приложениях
В этой статье я добавлю поддержку нескольких языков в NestJS и Angular приложениях, для сообщений в ошибках, уведомлениях и данных полученных из базы данных.
📄️ Поддержка временных зон в фул стек-приложении на основе NestJS и Angular: работа с REST и WebSockets
В этой статье я хотел бы поделиться своим опытом по внедрению поддержки временных зон в фулстек-приложение, построенное на NestJS и Angular. Мы узнаем, как сохранить настройки таймзоны пользователя в базе данных и правильно использовать их при взаимодействии с сервером через REST и веб-сокеты.
📄️ Интеграция и сохранение выбранного языка пользователя в базу данных в фулстек-приложении на "Angular" и "NestJS"
Этот пост не претендует на масштабность, но поскольку я последовательно документирую все этапы разработки бойлерплейта в формате статей, решил описать и эту задачу.
📄️ Конвертация даты по временной зоне пользователя в "NestJS", а также ввод и отображение даты в "Angular"
В этой статье я расскажу о добавлении нового поля workUntilDate с типом timestamp(6) в таблицу Webhook базы данных Webhook.