Express

О роли фреймворков в IT-индустрии

Результаты исследований и другие данные

Данные с GitHut

Исследование Stack Overflow

GitHub-репозитории

Node.js/Express

Сильные стороны Node.js

• Появление Node.js сделало возможным фуллстек-разработку веб-проектов на JavaScript. В результате в распоряжении разработчиков серверных частей приложений оказались и сильные возможности JavaScript, и наработки экосистемы JS, библиотеки, которыми стало реально воспользоваться в серверном окружении.
• JavaScript-код, аналогичный по функционалу, например, коду, написанному на C, оказывается компактнее. Производительность JavaScript-кода при этом достаточно высока для применения его в проектах, в которых важна скорость работы кода.
• Код клиентских и серверных частей проектов легче поддерживать в согласованном состоянии, так как и там и там используется один и тот же язык.
• Один и тот же код можно совместно использовать и на клиенте, и на сервере.
• Благодаря существованию модулей Node.js, которые, в сущности, представляют собой особым образом оформленные фрагменты кода, разработчики могут с удобством использовать в своих проектах чужой код, а так же собственные наработки.
• Платформа Node.js, и, соответственно, основанные на ней фреймворки, отличаются нетребовательностью к ресурсам и масштабируемостью. Именно поэтому Node.js это платформа, к которой часто прибегают те, кто пользуется микросервисными архитектурами.
• Эта платформа хорошо подходит для разработки микросервисов ещё и из-за существования системы модулей Node.js, которые можно представить себе в виде строительных блоков серверных приложений.
• В Node.js JavaScript код компилируется в машинный код, что позволяет получить гораздо более высокую производительность, чем при интерпретации кода. Сообщество JavaScript-разработчиков видит постоянное улучшение производительности Node.js за счёт того, что Google постоянно работает над совершенствованием V8.
• Благодаря тому, что в Node.js имеется система ввода-вывода, не блокирующая главный поток, эта платформа демонстрирует высокую производительность. Достойная скорость обработки запросов достигается благодаря использованию JavaScript-механизмов конкурентного однопоточного выполнения кода.
• Node.js это опенсорсный проект, вокруг которого собралось огромное сообщество разработчиков. Это значит, что тот, кто столкнётся с какой-то проблемой, сможет достаточно быстро найти её решение.
• Node.js, в ближайшем будущем, может стать платформой, которую будут использовать для проведения тяжёлых вычислений, наподобие тех, которые применяются для решения задач машинного обучения.

Компании, которые используют Node.js

• Paypal
• Netflix
• LinkedIn
• Uber
• eBay
• Yahoo

Spring Boot

Сильные стороны Spring Boot

• Spring Boot позволяет с минимальными усилиями создавать самостоятельные Spring-приложения, облегчает процесс их конфигурирования, упрощает работу над ними. Подобные приложения легко запускаются с помощью команды java -jar.
• Если в процессе создания Spring Boot-приложения произошла ошибка, встроенный анализатор ошибок поможет справиться с проблемой.
• Spring Boot поддерживает встроенные серверы, вроде Tomcat и Jetty. Это значит, что тем, кто пользуется Spring Boot, не нужно развёртывать .war-файлы на внешних серверах.
• Использование Spring Boot позволяет облегчить конфигурирование Maven за счёт наличия в системе начальных вариантов файла pom.xml.
• В возможности фреймворка входит автоматическое конфигурирование Spring.
• Spring Boot хорошо интегрируется с другими фреймворками.
• Фреймворк предоставляет разработчику конфигурации, готовые для продакшн-использования. Сюда входят, например, метрики состояния проекта и внешние конфигурации.
• При использовании Spring Boot нет нужды в применении XML-конфигураций или средств для генерирования кода.
• Применение Spring Boot облегчает труд разработчиков за счёт применения принципа проектирования ПО, известного как Convention over Configuration.

Компании, которые используют Spring

• Platform
• Intuit
• MIT
• Zillow
• TransferWise

Django

Сильные стороны Django

• Django позволяет без особых сложностей создавать динамические веб-приложения с использованием Python. Данный фреймворк написан на Python. В этом заключается одно из главных достоинств Django.
• Фреймворк поддерживает паттерн проектирования MVC. Это помогает разработчикам в разделении пользовательского интерфейса и бизнес-логики Django-приложений.
• Это быстрый фреймворк, не перегруженный ненужными возможностями. Я имеют в виду то, что использование Django позволяет быстро выйти на работоспособный проект.
• Django не относится к минималистичным фреймворкам, широко используемым для разработки микросервисов. Он отличается мощностью, универсальностью и определённым своеобразием.
• Создатели этого фреймворка серьёзно относятся к безопасности. Поэтому они дают разработчикам, использующим Django, соответствующие инструменты. Я уверен, что все вы знаете о том, как много проблем существует в наши дни в сфере кибербезопасности. Поэтому чрезвычайно важными являются вопросы защиты веб-проектов. Django поддерживает систему аутентификации пользователей, содержит инструменты для защиты от различных атак. Среди них средства защиты от SQL-инъекций, от межсайтового скриптинга, от межсайтовой подделки запросов, от кликджекинга.
• Django-проекты отличаются компактностью кода.
• Разработчики, использующие Django, могут моделировать базовые классы. Это значит, что в их распоряжении всегда имеется ORM.
• Django это кросс-платформенный проект. Он отлично работает на различных операционных системах. Кроме того, он поддерживает взаимодействие с различными базами данных.
• Это фреймворк, приложения, созданные с использованием которого, хорошо поддаются масштабированию. Поэтому тот, кто выбирает Django, может быть уверенным в том, что сможет эффективно развивать свой проект по мере его роста.
• Вокруг Django сформировалось активное сообщество. Поэтому тот, кто столкнулся с какой-то проблемой, сможет без особых сложностей её решить.

Компании, которые используют Django

• Mozilla
• NASA
• Pinterest
• Bitbucket
• Instagram

Итоги

const express = require('express');const bodyParser = require('body-parser');const app = express();app.use(bodyParser.json());app.post('/', (req, res) => {  res.json(req.body);});app.listen(3000, () => console.log('server started'));

const express = require('express');const bodyParser = require('body-parser');const app = express();app.use(bodyParser.json());app.get('/articles', (req, res) => {  const articles = [];  // код для извлечения статьи...  res.json(articles);});app.post('/articles', (req, res) => {  // код для добавления новой статьи...  res.json(req.body);});app.put('/articles/:id', (req, res) => {  const { id } = req.params;  // код для обновления статьи...  res.json(req.body);});app.delete('/articles/:id', (req, res) => {  const { id } = req.params;  // код для удаления статьи...  res.json({ deleted: id });});app.listen(3000, () => console.log('server started'));

const express = require('express');const bodyParser = require('body-parser');const app = express();app.use(bodyParser.json());app.get('/articles/:articleId/comments', (req, res) => {  const { articleId } = req.params;  const comments = [];  // код для получения комментариев по articleId  res.json(comments);});app.listen(3000, () => console.log('server started'));

• 400 Bad Request (Плохой Запрос) означает, что ввод, полученный с клиента, не прошел валидацию.
• 401 Unauthorized (Не авторизован) означает, что пользователь не представился и поэтому не имеет права доступа к ресурсу. Обычно такой код выдается, когда пользователь не прошел аутентификацию.
• 403 Forbidden (Запрещено) означает, что пользователь прошел аутентификацию, но не имеет права на доступ к ресурсу.
• 404 Not Found (Не найдено) означает, что ресурс не найден
• 500 Internal server error (Внутренняя ошибка сервера) это ошибка сервера, которую, вероятно, не следует выбрасывать явно.
• 502 Bad Gateway (Ошибочный шлюз) означает недействительное ответное сообщение от вышестоящего сервера.
• 503 Service Unavailable (Сервис недоступен) означает, что на стороне сервера произошло нечто непредвиденное например, перегрузка сервера, отказ некоторых элементов системы, т.д.

const express = require('express');const bodyParser = require('body-parser');const app = express();// существующие пользователиconst users = [  { email: 'abc@foo.com' }]app.use(bodyParser.json());app.post('/users', (req, res) => {  const { email } = req.body;  const userExists = users.find(u => u.email === email);  if (userExists) {    return res.status(400).json({ error: 'User already exists' })  }  res.json(req.body);});app.listen(3000, () => console.log('server started'));

const express = require('express');const bodyParser = require('body-parser');const app = express();// информация о сотрудниках в базе данныхconst employees = [  { firstName: 'Jane', lastName: 'Smith', age: 20 },  //...  { firstName: 'John', lastName: 'Smith', age: 30 },  { firstName: 'Mary', lastName: 'Green', age: 50 },]app.use(bodyParser.json());app.get('/employees', (req, res) => {  const { firstName, lastName, age } = req.query;  let results = [...employees];  if (firstName) {    results = results.filter(r => r.firstName === firstName);  }  if (lastName) {    results = results.filter(r => r.lastName === lastName);  }  if (age) {    results = results.filter(r => +r.age === +age);  }  res.json(results);});app.listen(3000, () => console.log('server started'));

[    {        "firstName": "John",        "lastName": "Smith",        "age": 30    }]

const express = require('express');const bodyParser = require('body-parser');const apicache = require('apicache');const app = express();let cache = apicache.middleware;app.use(cache('5 minutes'));// информация о сотрудниках в базе данныхconst employees = [  { firstName: 'Jane', lastName: 'Smith', age: 20 },  //...  { firstName: 'John', lastName: 'Smith', age: 30 },  { firstName: 'Mary', lastName: 'Green', age: 50 },]app.use(bodyParser.json());app.get('/employees', (req, res) => {  res.json(employees);});app.listen(3000, () => console.log('server started'));

const express = require('express');const bodyParser = require('body-parser');const app = express();app.use(bodyParser.json());app.get('/v1/employees', (req, res) => {  const employees = [];  // код для получения информации о сотрудниках  res.json(employees);});app.get('/v2/employees', (req, res) => {  const employees = [];  // другой код для получения информации о сотрудниках  res.json(employees);});app.listen(3000, () => console.log('server started'));

Привет, Хабр!

В этой статье мы создадим готовый шаблон-монолит, который можно брать за основу нового fullstack приложения как скелет для навешивания функционала.

Эта статья будет полезна, если вы:

• Начинающий fullstack-разработчик;
• Стартапер, который пишет MVP чтобы проверить гипотезу.

Почему выбрал такой стек:

• Angular: имею много опыта в нем, люблю строгую архитектуру и Typescript из коробки, выходец из .NET
• NestJS: тот-же язык, та-же архитектура, быстрое написание REST API, возможность в дальнейшем пересесть на Serverless (дешевле виртуалки)
• PostgreSQL: Собираюсь хоститься в Яндекс.Облаке, на минималках дешевле на 30% чем MongoDB

Прежде чем написать статью, поискал на хабре статьи про подобный кейс, нашел следующее:

• Angular и SEO: как их подружить?
• Firebase + Angular Universal = невозможное возможно
• Дружим Angular с Google (Angular Universal)
• Удивительный Angular

Из этого ничего не описывает "скопировал и вставил" или дает ссылки на то что еще нужно дорабатывать.

Оглавление:

1. Создаем Angular приложение и добавляем библиотеку компонентов ng-zorro
2. Устанавливаем NestJS и решаем проблемы с SSR
3. Делаем API на NestJS и подключаем к фронту
4. Подключаем базу данных PostgreSQL

1. Создаем Angular приложение

Установим Angular-CLI чтобы создавать SPA-сайты на Ангуляре:

npm install -g @angular/cli

Создадим Angular приложение с помощью следующей команды:

ng new angular-habr-nestjs

Далее переходим в папку приложения и запускаем, чтобы проверить работоспособность:

cd angular-habr-nestjsng serve --open

Приложение создалось. Подключаем библиотеку NG-Zorro:

ng add ng-zorro-antd

Далее выбираем следующие конфигурации библиотеки:

? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] No? Choose your locale code: ru_RU? Choose template to create project: sidemenu

Эта конфигурация заменит содержимое app.component на дизайн с менюшкой слева, футером и хедером и подключит локализацию на русском языке:

В данной статье мы отобразим список данных для наглядности, поэтому добавим простенькую табличку в компоненте src/app/pages/welcome, который сгенерил NG-Zorro:
Пример взят отсюда:
https://ng.ant.design/components/table/en

// welcome.component.html<nz-table #basicTable [nzData]="items$ | async"> <thead> <tr>  <th>Name</th>  <th>Age</th>  <th>Address</th> </tr> </thead> <tbody> <tr *ngFor="let data of basicTable.data">  <td>{{ data.name }}</td>  <td>{{ data.age }}</td>  <td>{{ data.address }}</td> </tr> </tbody></nz-table>

// welcome.module.tsimport { NgModule } from '@angular/core';import { WelcomeRoutingModule } from './welcome-routing.module';import { WelcomeComponent } from './welcome.component';import { NzTableModule } from 'ng-zorro-antd';import { CommonModule } from '@angular/common';@NgModule({ imports: [  WelcomeRoutingModule,  NzTableModule, // Добавили для таблицы  CommonModule // Добавили для пайпа async ], declarations: [WelcomeComponent], exports: [WelcomeComponent]})export class WelcomeModule {}

// welcome.component.tsimport { Component, OnInit } from '@angular/core';import { Observable, of } from 'rxjs';import { HttpClient } from '@angular/common/http';import { share } from 'rxjs/operators';@Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss']})export class WelcomeComponent implements OnInit { items$: Observable<Item[]> = of([  {name: 'Вася', age: 24, address: 'Москва'},  {name: 'Петя', age: 23, address: 'Лондон'},  {name: 'Миша', age: 21, address: 'Париж'},  {name: 'Вова', age: 23, address: 'Сидней'} ]); constructor(private http: HttpClient) { } ngOnInit() { } // Сразу напишем метод к бэку, понадобится позже getItems(): Observable<Item[]> {  return this.http.get<Item[]>('/api/items').pipe(share()); }}interface Item { name: string; age: number; address: string;}

Получилось следующее:

2. Устанавливаем NestJS

Далее установим NestJS таким образом, чтобы он предоставил Angular Universal (Server Side Rendering) из коробки и напишем пару ендпоинтов.

ng add @nestjs/ng-universal

После установки, запускаем наш SSR с помощью команды:

npm run serve

И вот уже первый косяк :) У нас появляется следующая ошибка:

TypeError: Cannot read property 'indexOf' of undefined  at D:\Projects\angular-habr-nestjs\node_modules\@nestjs\ng-universal\dist\utils\setup-universal.utils.js:35:43  at D:\Projects\angular-habr-nestjs\dist\server\main.js:107572:13  at View.engine (D:\Projects\angular-habr-nestjs\node_modules\@nestjs\ng-universal\dist\utils\setup-universal.utils.js:30:11)  at View.render (D:\Projects\angular-habr-nestjs\node_modules\express\lib\view.js:135:8)  at tryRender (D:\Projects\angular-habr-nestjs\node_modules\express\lib\application.js:640:10)  at Function.render (D:\Projects\angular-habr-nestjs\node_modules\express\lib\application.js:592:3)  at ServerResponse.render (D:\Projects\angular-habr-nestjs\node_modules\express\lib\response.js:1012:7)  at D:\Projects\angular-habr-nestjs\node_modules\@nestjs\ng-universal\dist\angular-universal.module.js:60:66  at Layer.handle [as handle_request] (D:\Projects\angular-habr-nestjs\node_modules\express\lib\router\layer.js:95:5)  at next (D:\Projects\angular-habr-nestjs\node_modules\express\lib\router\route.js:137:13)

Чтобы решить косяк, зайдем в файл server/app.module.ts и поменяем значение liveReload на false:

import { Module } from '@nestjs/common';import { AngularUniversalModule } from '@nestjs/ng-universal';import { join } from 'path';@Module({ imports: [  AngularUniversalModule.forRoot({   viewsPath: join(process.cwd(), 'dist/browser'),   bundle: require('../server/main'),   liveReload: false  }) ]})export class ApplicationModule {}

Также подтюним конфиг тайпскрипта, так-как эта конфигурация не взлетает с использованием Ivy рендера:

// tsconfig.server.json{ "extends": "./tsconfig.app.json", "compilerOptions": {  "outDir": "./out-tsc/server",  "target": "es2016",  "types": [   "node"  ] }, "files": [  "src/main.server.ts" ], "angularCompilerOptions": {  "enableIvy": false, // Добавили флажок  "entryModule": "./src/app/app.server.module#AppServerModule" }}

После пересоберем приложение командой ng run serve чтобы SSR заработал.

Ура! SSR подрубился, но как видимо в devtools он приходит с кривыми стилями.

Добавим extractCss: true, который позволит выносить стили не в styles.js, а в styles.css:

// angular.json..."architect": {    "build": {     "builder": "@angular-devkit/build-angular:browser",     "options": {      "outputPath": "dist/browser",      "index": "src/index.html",      "main": "src/main.ts",      "polyfills": "src/polyfills.ts",      "tsConfig": "tsconfig.app.json",      "aot": true,      "assets": [       "src/favicon.ico",       "src/assets",       {        "glob": "**/*",        "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",        "output": "/assets/"       }      ],      "extractCss": true, // Добавили флажок      "styles": [       "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",       "src/styles.scss"      ],      "scripts": []     },...

Также подключим стили библиотеки в app.component.scss:

// app.component.scss@import "~ng-zorro-antd/ng-zorro-antd.min.css"; // Подключили стили:host { display: flex; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.app-layout { height: 100vh;}...

Теперь стили подключены, SSR отдает страничку со стилями, но мы видим что сначала у нас грузится SSR, потом страница моргает и отрисовывается CSR (Client Side Rendering). Это решается следующим способом:

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/welcome' }, { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule) }];@NgModule({ imports: [RouterModule.forRoot(routes, {initialNavigation: 'enabled', scrollPositionRestoration: 'enabled'})], // Добавили initialNavigation, scrollPositionRestoration exports: [RouterModule]})export class AppRoutingModule { }

• initialNavigation: 'enabled' дает инструкцию роутингу не отрисовывать страницу, если уже загружена через SSR
• scrollPositionRestoration: 'enabled' скролит страницу наверх при каждом роутинге.

3. Сделаем пару ендпоинтов на NestJS

Перейдем в папку server и создадим первый контроллер items:

cd servernest g module itemsnest g controller items --no-spec

// items.module.tsimport { Module } from '@nestjs/common';import { ItemsController } from './items.controller';@Module({ controllers: [ItemsController]})export class ItemsModule {}

// items.controller.tsimport { Controller } from '@nestjs/common';@Controller('items')export class ItemsController {}

Контроллер и модуль создались. Создадим метод на получение списка items и на добавление объекта в список:

// server/src/items/items.controller.tsimport { Body, Controller, Get, Post } from '@nestjs/common';class Item { name: string; age: number; address: string;}@Controller('items')export class ItemsController { // для простоты данные взял из Angular private items: Item[] = [  {name: 'Вася', age: 24, address: 'Москва'},  {name: 'Петя', age: 23, address: 'Лондон'},  {name: 'Миша', age: 21, address: 'Париж'},  {name: 'Вова', age: 23, address: 'Сидней'} ]; @Get() getAll(): Item[] {  return this.items; } @Post() create(@Body() newItem: Item): void {  this.items.push(newItem); }}

Попробуем вызвать GET в Postman:

Отлично, работает! Обратите внимание, вызываем метод GET items с префиксом api, который ставится автоматически в файле server/main.ts при установке NestJS:

// server/main.tsimport { NestFactory } from '@nestjs/core';import { ApplicationModule } from './app.module';async function bootstrap() { const app = await NestFactory.create(ApplicationModule); app.setGlobalPrefix('api'); // Это префикс await app.listen(4200);}bootstrap();

Теперь прикрутим бэк к фронту. Возвращаемся к файлу welcome.component.ts и делаем запрос списка к бэку:

// welcome.component.tsimport { Component, OnInit } from '@angular/core';import { Observable, of } from 'rxjs';import { HttpClient } from '@angular/common/http';import { share } from 'rxjs/operators';@Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss']})export class WelcomeComponent implements OnInit { items$: Observable<Item[]> = this.getItems(); // прикрутили вызов бэка constructor(private http: HttpClient) { } ngOnInit() { } getItems(): Observable<Item[]> {  return this.http.get<Item[]>('/api/items').pipe(share()); }}interface Item { name: string; age: number; address: string;}

Можно увидеть что апиха на фронте дергается, но также дергается и в SSR, причем с ошибкой:

Ошибка при запросе в SSR решается следующим способом:

// welcome.component.tsimport { Component, OnInit } from '@angular/core';import { Observable, of } from 'rxjs';import { HttpClient } from '@angular/common/http';import { share } from 'rxjs/operators';@Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss']})export class WelcomeComponent implements OnInit { items$: Observable<Item[]> = this.getItems(); // прикрутили вызов бэка constructor(private http: HttpClient) { } ngOnInit() { } getItems(): Observable<Item[]> {  return this.http.get<Item[]>('http://localhost:4200/api/items').pipe(share()); // Прописали полный путь к апихе чтобы SSR не ругался }}interface Item { name: string; age: number; address: string;}

Чтобы исключить двойной запрос к апихе (один на SSR, другой на фронте), нужно проделать следующее:

• Установим библиотеку @nguniversal/common:

npm i @nguniversal/common

• В файле app/app.module.ts добавим модуль для запросов из SSR:

// app.module.tsimport { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { IconsProviderModule } from './icons-provider.module';import { NzLayoutModule } from 'ng-zorro-antd/layout';import { NzMenuModule } from 'ng-zorro-antd/menu';import { FormsModule } from '@angular/forms';import { HttpClientModule } from '@angular/common/http';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { NZ_I18N } from 'ng-zorro-antd/i18n';import { ru_RU } from 'ng-zorro-antd/i18n';import { registerLocaleData } from '@angular/common';import ru from '@angular/common/locales/ru';import {TransferHttpCacheModule} from '@nguniversal/common';registerLocaleData(ru);@NgModule({ declarations: [  AppComponent ], imports: [  BrowserModule.withServerTransition({ appId: 'serverApp' }),  TransferHttpCacheModule, // Добавили  AppRoutingModule,  IconsProviderModule,  NzLayoutModule,  NzMenuModule,  FormsModule,  HttpClientModule,  BrowserAnimationsModule ], providers: [{ provide: NZ_I18N, useValue: ru_RU }], bootstrap: [AppComponent]})export class AppModule { }

Схожую операцию проделаем с app.server.module.ts:

// app.server.module.tsimport { NgModule } from '@angular/core';import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';import { AppModule } from './app.module';import { AppComponent } from './app.component';@NgModule({ imports: [  AppModule,  ServerModule,  ServerTransferStateModule, // Добавили ], bootstrap: [AppComponent],})export class AppServerModule {}

Хорошо. Теперь получаем данные из апи в SSR, отрисовываем на форме, отдаем на фронт и тот не делает повторных запросов.

4. Подключим базу PostgreSQL

Подключим библиотеки для работы с PostgreSQL, также будем использовать TypeORM для работы с базой:

npm i pg typeorm @nestjs/typeorm

Внимание: у вас уже должна быть установлена PostgreSQL с базой внутри.

Описываем конфиг подключения к базе в server/app.module.ts:

// server/app.module.tsimport { Module } from '@nestjs/common';import { AngularUniversalModule } from '@nestjs/ng-universal';import { join } from 'path';import { ItemsController } from './src/items/items.controller';import { TypeOrmModule } from '@nestjs/typeorm';@Module({ imports: [  AngularUniversalModule.forRoot({   viewsPath: join(process.cwd(), 'dist/browser'),   bundle: require('../server/main'),   liveReload: false  }),  TypeOrmModule.forRoot({ // Конфиг подключения к базе   type: 'postgres',   host: 'localhost',   port: 5432,   username: 'postgres',   password: 'admin',   database: 'postgres',   entities: ['dist/**/*.entity{.ts,.js}'],   synchronize: true  }) ], controllers: [ItemsController]})export class ApplicationModule {}

Немного про поля конфига:

• type: указываем название типа базы данных, к которой подключаемся
• host и port: место где база хостится
• username и password: аккаунт для этой базы
• database: название базы
• entities: путь, откуда будем брать сущности для схемы нашей базы

По последнему пункту, нужно создать сущность Item для мапинга полей в базу:

// server/src/items/item.entity.tsimport { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn } from 'typeorm/index';@Entity()export class ItemEntity { @PrimaryGeneratedColumn() id: number; @CreateDateColumn() createDate: string; @Column() name: string; @Column() age: number; @Column() address: string;}

Далее свяжем эту сущность с нашей базой.

// items.module.tsimport { Module } from '@nestjs/common';import { TypeOrmModule } from '@nestjs/typeorm';import { ItemEntity } from './item.entity';import { ItemsController } from './items.controller';@Module({ imports: [  TypeOrmModule.forFeature([ItemEntity]) // Подключаем фича-модуль и указываем сущности базы ], controllers: [ItemsController]})export class ItemsModule {}

Теперь укажем в контроллере, что хотим работать с базой, а не кешем:

// items.controller.tsimport { Body, Controller, Get, Post } from '@nestjs/common';import { ItemEntity } from './item.entity';import { InjectRepository } from '@nestjs/typeorm';import { Repository } from 'typeorm/index';interface Item { name: string; age: number; address: string;}@Controller('items')export class ItemsController { constructor(@InjectRepository(ItemEntity)       private readonly itemsRepository: Repository<ItemEntity>) { // Подключили репозиторий } @Get() getAll(): Promise<Item[]> {  return this.itemsRepository.find(); } @Post() create(@Body() newItem: Item): Promise<Item> {  const item = this.itemsRepository.create(newItem);  return this.itemsRepository.save(item); }}

Проверим работу апихи в Postman:

Работает. Потыкали несколько раз постман, посмотрим что записалось в базе с помощью DBeaver:

Отлично! В базе есть, посмотрим как выглядит на фронте:

Готово! Мы сделали fullstack приложение, с которым можно работать дальше.

P.S. Сразу поясню следующее:

• Вместо Ng-Zorro вы можете использовать любую другую библиотеку, например Angular Material. Мне она лично не зашла из-за сложности разработки;
• Я знаю, что нужно на бэке использовать сервисы, а не напрямую дергать базу в контроллерах. Эта статья о том, как решив проблемы "влоб" получить MVP с которым можно работать, а не про архитектуру и паттерны;
• Вместо вписывания на фронте http://localhost:4200/api возможно лучше написать интерсептор и проверять откуда мы стучимся

Полезные ссылки:

• Библиотека компонентов NG-Zorro
• Документация Angular
• Документация NestJS
• Исходники проекта

1. Введение

2. Установка

npm i express

yarn add express

3. Hello World

const express = require('express')const app = express()app.get('/', (req, res) => res.send('Hello World!'))app.listen(3000, () => console.log('Сервер запущен'))

node index.js

4. Основы Express

app.get('/', (req, res) => {})app.post('/', (req, res) => {})app.put('/', (req, res) => {})app.delete('/', (req, res) => {})app.patch('/', (req, res) => {})

(req, res) => res.send('Hello World!')

6. Параметры запроса

7. Получение параметров из строки запроса

?name=john

?name=john&age=30

const express = require('express')const app = express()app.get('/', (req, res) => {    console.log(req.query)})app.listen(8080)

for (const key in req.query) {    console.log(key, req.query[key])}

req.query.name // johnreq.query.age // 30

8. Получение параметров строки POST-запроса

const express = require('express')const app = express()app.use(express.json())

const express = require('express')const app = express()app.use(express.urlencoded())

app.post('/form', (req, res) => {    const name = req.body.name})

9. Отправка ответа

Как отправить ответ клиенту?

(req, res) => res.send('Hello World!')

Использование end() для отправки пустого ответа

res.end()

Установка статуса ответа

res.status(404).end()

res.status(404).send('Файл не найден')

res.sendStatus(200) // === res.status(200).send('Ok')res.sendStatus(403) // === res.status(403).send('Forbidden')res.sendStatus(404) // === res.status(404).send('Not Found')res.sendStatus(500) // === res.status(500).send('Internal Server Error')

10. Отправка ответа в формате JSON

app.get('/', (req, res) => res.send('Hello World!'))

res.json({ name: 'John' }) // { "name": "John" }

15. Шаблонизация

Использование Pug

npm i pug 

const express = require('express')const app = express()app.set('view engine', 'pug')

app.get('/about', (req, res) => {    res.render('about')})

p Привет от Pug 

app.get('/about', (req, res) => {    res.render('about', { name: 'Иван' })})

p #{name} говорит привет

Использование Handlebars

{{name}} говорит привет 

const express = require('express')const app = express()const hbs = require('hbs')app.set('view engine', 'hbs')app.set('views', path.join(__dirname, 'views'))app.get('/about', (req, res) => {    res.render('about', { name: 'Иван' })})app.listen(3000, () => console.log('Сервер готов'))

npm i express-react-views

const express = require('express')const app = express()app.set('view engine', 'jsx')app.engine('jsx', require('express-react-views').createEngine())app.get('/about', (req, res) => {    res.render('about', { name: 'Иван' })})app.listen(3000, () => console.log('Сервер запущен'))

const React = require('react')class HelloMessage extends React.Component {    render() {        return <div>{this.props.name} говорит привет</div>    }}module.exports = HelloMessage

16. Справочник по Pug

npm i pug

const path = require('path')cpnst express = require('express')const app = express()app.set('view engine', 'pug')app.set('views', path.join(__dirname, 'views'))app.get('/about', (req, res) => {    res.render('about', { name: 'Иван' })})

p #{name} говорит привет 

app.get('about', (req, res) => {    res.render('about', { getName: () => 'Иван' })})

p #{getName()} говорит привет 

p#title p.title 

doctype html 

html     head         meta(charset='utf-8')        meta(http-equiv='X-UA-Compatible', content='IE=edge')        meta(name='description', content='Описание')        meta(name='viewport', content='width=device-width, initial-scale=1')

html     head         link(rel="stylesheet", href="style.css")        script(src="script.js", defer)

    script alert('тест')        script        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X');ga('send','pageview');

ul     each color in ['Red', 'Green', 'Blue']        li= colorul     each color, index in ['Red', 'Green', 'Blue']        li= 'Номер цвета ' + index + ':' + color

if name     h2 #{name} говорит привет else    h2 Привет if name    h2 #{name} говорит привет else if anotherName    h2 #{anotherName} говорит привет else    h2 Привет 

- var name = 'Иван'- age = 30 - var petr = { name: 'Петр' }- var friends = ['Иван', 'Петр']

age++

p= name span= age 

for friend in friends     li= friendul     each friend in friends         li= friend 

p #{values.length}

- var n = 0ul     while n <= 5        li= n++

include otherfile.pug 

html    head        link(rel="stylesheet", href="style.css")        script(src="script.js", defer)        body            block header                        block main                h1 Домашняя страница                p Добро пожаловать                        block footer

extends home.pug 

extends home.pug block main     h1 Другая страница    p Привет     ul        li Раз элемент списка        li Два элемент списка 

// однострочный комментарий//    многострочный    комментарий

//- однострочный комментарий//-     многострочный    комментарий

17. Middleware (промежуточный слой, промежуточное программное обеспечение)

app.use((req, res, next) => {/* */})

const express = require('express')const app = express()const cookieParser = require('cookie-parser')app.get('/', (req, res) => res.send('Привет!'))app.use(cookieParser())app.listen(3000, () => console.log('Сервер готов'))

const myMiddleware = (req, res, next) => {    // ...     next()}app.get('/', myMiddleware, (req, res) => res.send('Привет!'))

req.locals.name = 'Иван'

18. Обработка статических файлов

const express = require('express')const app = express()app.use(express.static('public'))// ... app.listen(3000, () => console.log('Сервер готов'))

19. Отправка файлов

app.get('/', (req, res) => res.download('./file.pdf'))

const express = require('express')const app = express()app.get('/', (req, res) => res.download('./file.pdf'))app.listen(3000, () => console.log('Сервер готов'))

res.download('./file.pdf', 'some-custom-name.pdf')

res.download('./file.pdf', 'some-custom-name.pdf', error => {    if (error) {        // обрабатываем ошибку    } else {        console.log('Файл успешно отправлен')    }})

20. Сессии

npm i express-session

const session = require('express-session')

const express = require('express')const session = require('express-session')const app = express()app.use(session(    'secret': '343ji43j4n3jn4jk3n'))

app.get('/', (req, res, next) => {    // req.session })

req.sessions.name = 'Иван'console.log(req.sessions.name) // Иван 

• памяти только при разработке
• базе данных, например, MySQL или Mongo
• кэше, например, Redis или Memcached

• добавление новой задачи в список
• обновление индикатора выполнения задачи
• обновление текста задачи
• удаление задачи из списка
• фильтрация задач: все, активные, завершенные
• сохранение задач на стороне клиента и в базе данных

Клиент

mkdir javascript-express-mongoosecd !$code .

client  components    Buttons.js    Form.js    Item.js    List.js  src    helpers.js    idb.js    router.js    storage.js  script.js  style.css

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>JS Todos App</title>    <!-- Подключаем стили -->    <link rel="stylesheet" href="client/style.css" />  </head>  <body>    <div id="root"></div>    <!-- Подключаем скрипт -->    <script src="client/script.js" type="module"></script>  </body></html>

@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: stylish;  font-size: 1rem;  color: #222;}#root {  max-width: 512px;  margin: auto;  text-align: center;}#title {  font-size: 2.25rem;  margin: 0.75rem;}#counter {  font-size: 1.5rem;  margin-bottom: 0.5rem;}#form {  display: flex;  margin-bottom: 0.25rem;}#input {  flex-grow: 1;  border: none;  border-radius: 4px;  box-shadow: 0 0 1px inset #222;  text-align: center;  font-size: 1.15rem;  margin: 0.5rem 0.25rem;}#input:focus {  outline-color: #5bc0de;}.btn {  border: none;  outline: none;  background: #337ab7;  padding: 0.5rem 1rem;  border-radius: 4px;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);  color: #eee;  margin: 0.5rem 0.25rem;  cursor: pointer;  user-select: none;  width: 102px;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);}.btn:active {  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset;}.btn.info {  background: #5bc0de;}.btn.success {  background: #5cb85c;}.btn.warning {  background: #f0ad4e;}.btn.danger {  background: #d9534f;}.btn.filter {  background: none;  color: #222;  text-shadow: none;  border: 1px dashed #222;  box-shadow: none;}.btn.filter.checked {  border: 1px solid #222;}#list {  list-style: none;}.item {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  align-items: center;}.item + .item {  border-top: 1px dashed rgba(0, 0, 0, 0.5);}.text {  flex: 1;  font-size: 1.15rem;  margin: 0.5rem;  padding: 0.5rem;  background: #eee;  border-radius: 4px;}.completed .text {  text-decoration: line-through;  color: #888;}.disabled {  opacity: 0.8;  position: relative;  z-index: -1;}#modal {  position: absolute;  top: 10px;  left: 10px;  padding: 0.5em 1em;  background: rgba(0, 0, 0, 0.5);  border-radius: 4px;  font-size: 1.2em;  color: #eee;}

export default /*html*/ `<div id="form">  <input      type="text"      autocomplete="off"      autofocus      id="input"  >  <button    class="btn"    data-btn="add"  >    Add  </button></div>`

export default /*html*/ `<div id="buttons">  <button    class="btn filter checked"    data-btn="all"  >    All  </button>  <button    class="btn filter"    data-btn="active"  >    Active  </button>  <button    class="btn filter"    data-btn="completed"  >    Completed  </button></div>`

/** * функция принимает на вход задачу, * которая представляет собой объект, * включающий идентификатор, текст и индикатор выполнения * * индикатор выполнения управляет дополнительными классами * и текстом кнопки завершения задачи * * текст завершенной задачи должен быть перечеркнут, * а кнопка для изменения (обновления) текста такой задачи - отключена * * завершенную задачу можно сделать активной*/export const Item = ({ id, text, done }) => /*html*/ `<li  class="item ${done ? 'completed' : ''}"  data-id="${id}">  <button    class="btn ${done ? 'warning' : 'success'}"    data-btn="complete"  >    ${done ? 'Cancel' : 'Complete'}  </button>  <span class="text">    ${text}  </span>  <button    class="btn info ${done ? 'disabled' : ''}"    data-btn="update"  >    Update  </button>  <button    class="btn danger"    data-btn="delete"  >    Delete  </button></li>`

/** * для формирования списка используется компонент Item * * функция принимает на вход список задач * * если вам не очень понятен принцип работы reduce * https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce*/import { Item } from "./Item.js"export const List = (todos) => /*html*/ `  <ul id="list">    ${todos.reduce(      (html, todo) =>        (html += `            ${Item(todo)}        `),      ''    )}  </ul>`

/** * данная функция будет использоваться * для визуализации нажатия одной из кнопок * для фильтрации задач * * она принимает элемент - нажатую кнопку и класс - в нашем случае checked * * основной контейнер имеет идентификатор root, * поэтому мы можем обращаться к нему напрямую * из любой части кода, в том числе, из модулей*/export const toggleClass = (element, className) => {  root.querySelector(`.${className}`).classList.remove(className)  element.classList.add(className)}// примерные задачиexport const todosExample = [  {    id: '1',    text: 'Learn HTML',    done: true  },  {    id: '2',    text: 'Learn CSS',    done: true  },  {    id: '3',    text: 'Learn JavaScript',    done: false  },  {    id: '4',    text: 'Stay Alive',    done: false  }]

/** * база данных имеет два метода * get - для получения тудушек * set - для записи (сохранения) тудушек*/export default (() => ({  get: () => JSON.parse(localStorage.getItem('todos')),  set: (todos) => { localStorage.setItem('todos', JSON.stringify(todos)) }}))()

// импортируем компоненты, вспомогательную функцию, примерные задачи и хранилищеimport Form from './components/Form.js'import Buttons from './components/Buttons.js'import { List } from './components/List.js'import { Item } from './components/Item.js'import { toggleClass, todosExample } from './src/helpers.js'import storage from './src/storage.js'// функция принимает контейнер и список задачconst App = (root, todos) => {  // формируем разметку с помощью компонентов и дополнительных элементов  root.innerHTML = `    <h1 id="title">      JS Todos App    </h1>    ${Form}    <h3 id="counter"></h3>    ${Buttons}    ${List(todos)}  `  // обновляем счетчик  updateCounter()  // получаем кнопку добавления задачи в список  const $addBtn = root.querySelector('[data-btn="add"]')  // основной функционал приложения  // функция добавления задачи в список  function addTodo() {    if (!input.value.trim()) return    const todo = {      // такой способ генерации идентификатора гарантирует его уникальность и соответствие спецификации      id: Date.now().toString(16).slice(-4).padStart(5, 'x'),      text: input.value,      done: false    }    list.insertAdjacentHTML('beforeend', Item(todo))    todos.push(todo)    // очищаем поле и устанавливаем фокус    clearInput()    updateCounter()  }  // функция завершения задачи  // принимает DOM-элемент списка  function completeTodo(item) {    const todo = findTodo(item)    todo.done = !todo.done    // рендерим только изменившийся элемент    renderItem(item, todo)    updateCounter()  }  // функция обновления задачи  function updateTodo(item) {    item.classList.add('disabled')    const todo = findTodo(item)    const oldValue = todo.text    input.value = oldValue    // тонкий момент: мы используем одну и ту же кнопку    // для добавления задачи в список и обновления текста задачи    $addBtn.textContent = 'Update'    // добавляем разовый обработчик    $addBtn.addEventListener(      'click',      (e) => {        // останавливаем распространение события для того,        // чтобы нажатие кнопки не вызвало функцию добавления задачи в список        e.stopPropagation()        const newValue = input.value.trim()        if (newValue && newValue !== oldValue) {          todo.text = newValue        }        renderItem(item, todo)        clearInput()        $addBtn.textContent = 'Add'      },      { once: true }    )  }  // функция удаления задачи  function deleteTodo(item) {    const todo = findTodo(item)    item.remove()    todos.splice(todos.indexOf(todo), 1)    updateCounter()  }  // функция поиска задачи  function findTodo(item) {    const { id } = item.dataset    const todo = todos.find((todo) => todo.id === id)    return todo  }  // дополнительный функционал  // функция фильтрации задач  // принимает значение кнопки  function filterTodos(value) {    const $items = [...root.querySelectorAll('.item')]    switch (value) {      // отобразить все задачи      case 'all':        $items.forEach((todo) => (todo.style.display = ''))        break      // активные задачи      case 'active':        // отобразить все и отключить завершенные        filterTodos('all')        $items          .filter((todo) => todo.classList.contains('completed'))          .forEach((todo) => (todo.style.display = 'none'))        break      // завершенные задачи      case 'completed':        // отобразить все и отключить активные        filterTodos('all')        $items          .filter((todo) => !todo.classList.contains('completed'))          .forEach((todo) => (todo.style.display = 'none'))        break    }  }  // функция обновления счетчика  function updateCounter() {    // считаем количество невыполненных задач    const count = todos.filter((todo) => !todo.done).length    counter.textContent = `      ${count > 0 ? `${count} todo(s) left` : 'All todos completed'}    `    if (!todos.length) {      counter.textContent = 'There are no todos'      buttons.style.display = 'none'    } else {      buttons.style.display = ''    }  }  // функция повторного рендеринга изменившегося элемента  function renderItem(item, todo) {    item.outerHTML = Item(todo)  }  // функция очистки инпута  function clearInput() {    input.value = ''    input.focus()  }  // делегируем обработку событий корневому узлу  root.onclick = ({ target }) => {    if (target.tagName !== 'BUTTON') return    const { btn } = target.dataset    if (target.classList.contains('filter')) {      filterTodos(btn)      toggleClass(target, 'checked')    }    const item = target.parentElement    switch (btn) {      case 'add':        addTodo()        break      case 'complete':        completeTodo(item)        break      case 'update':        updateTodo(item)        break      case 'delete':        deleteTodo(item)        break    }  }  // обрабатываем нажатие Enter  document.onkeypress = ({ key }) => {    if (key === 'Enter') addTodo()  }  // оптимизация работы с хранилищем  window.onbeforeunload = () => {    storage.set(todos)  }}// инициализируем приложения;(() => {  // получаем задачи из хранилища  let todos = storage.get('todos')  // если в хранилище пусто  if (!todos || !todos.length) todos = todosExample  App(root, todos)})()

// import storage from './src/storage.js'import { get, set } from './src/idb.js'window.onbeforeunload = () => {  // storage.set(todos)  set('todos', todos)}// обратите внимание, что функция инициализации приложения стала асинхронной;(async () => {  // let todos = storage.get('todos')  let todos = await get('todos')  if (!todos || !todos.length) todos = todosExample  App(root, todos)})()

React, Vue

База данных

1. Создаем аккаунт в MongoDB Atlas
2. Во вкладке Projects нажимаем на кнопку New Project
3. Вводим название проекта, например, todos-db, и нажимаем Next
4. Нажимаем Create Project
5. Нажимаем Build a Cluster
6. Нажимаем Create a cluster (FREE)
7. Выбираем провайдера и регион, например, Azure и Hong Kong, и нажимаем Create Cluster
8. Ждем завершения создания кластера и нажимаем connect
9. В разделе Add a connection IP address выбираем либо Add Your Current IP Address, если у вас статический IP, либо Allow Access from Anywhere, если у вас, как в моем случае, динамический IP (если сомневаетесь, выбирайте второй вариант)
10. Вводим имя пользователя и пароль, нажимаем Create Database User, затем нажимаем Choose a connection method
11. Выбираем Connect your application
12. Копируем строку из раздела Add your connection string into your application code
13. Нажимаем Close

MONGO_URI=mongodb+srv://<username>:<password>@cluster0.hfvcf.mongodb.net/<dbname>?retryWrites=true&w=majority

Сервер

npm init -y// илиyarn init -yp

yarn add cors dotenv express express-validator mongoose

• cors отключает политику общего происхождения (одного источника)
• dotenv предоставляет доступ к переменным среды в файле .env
• express облегчает создание сервера на Node.js
• express-validator служит для проверки (валидации) данных
• mongoose облегчает работу с MongoDB

yarn add -D nodemon open-cli morgan

• nodemon запускает сервер и автоматически перезагружает его при внесении изменений в файл
• open-cli открывает вкладку браузера по адресу, на котором запущен сервер
• morgan логгер HTTP-запросов

"scripts": {  "start": "node index.js",  "dev": "open-cli http://localhost:1234 && nodemon index.js"},

// подключаем библиотекиconst express = require('express')const mongoose = require('mongoose')const cors = require('cors')const morgan = require('morgan')require('dotenv/config')// инициализируем приложение и получаем роутерconst app = express()const router = require('./server/router')// подключаем промежуточное ПОapp.use(express.json())app.use(express.urlencoded({ extended: false }))app.use(cors())app.use(morgan('dev'))// указываем, где хранятся статические файлыapp.use(express.static(__dirname))// подлючаемся к БДmongoose.connect(  process.env.MONGO_URI,  {    useNewUrlParser: true,    useUnifiedTopology: true,    useFindAndModify: false,    useCreateIndex: true  },  () => console.log('Connected to database'))// возвращаем index.html в ответ на запрос к корневому узлуapp.get('/', (_, res) => {  res.sendFile(__dirname + '/index.html')})// при запросе к api передаем управление роутеруapp.use('/api', router)// определяем порт и запускаем серверconst PORT = process.env.PORT || 1234app.listen(PORT, () => console.log(`Server is running`))

yarn dev// илиnpm run dev

client  components    Buttons.js    Form.js    Item.js    List.js  src    helpers.js    idb.js    storage.js  script.js  style.cssserver  Todo.js  router.js.envindex.htmlindex.jspackage.jsonyarn.lock (либо package-lock.json)

const { Schema, model } = require('mongoose')const todoSchema = new Schema({  id: {    type: String,    required: true,    unique: true  },  text: {    type: String,    required: true  },  done: {    type: Boolean,    required: true  }})// экспорт модели данныхmodule.exports = model('Todo', todoSchema)

// инициализируем роутерconst router = require('express').Router()// модель данныхconst Todo = require('./Todo')// средства валидацииconst { body, validationResult } = require('express-validator')/** * наш интерфейс (http://personeltest.ru/away/localhost:1234/api) * будет принимать и обрабатывать 4 запроса * GET-запрос /get - получение всех задач из БД * POST /add - добавление в БД новой задачи * DELETE /delete/:id - удаление задачи с указанным идентификатором * PUT /update - обновление текста или индикатора выполнения задачи * * для работы с БД используется модель Todo и методы * find() - для получения всех задач * save() - для добавления задачи * deleteOne() - для удаления задачи * updateOne() - для обновления задачи * * ответ на запрос - объект, в свойстве message которого * содержится сообщение либо об успехе операции, либо об ошибке*/// получение всех задачrouter.get('/get', async (_, res) => {  const todos = (await Todo.find()) || []  return res.json(todos)})// добавление задачиrouter.post(  '/add',  // пример валидации  [    body('id').exists(),    body('text').notEmpty().trim().escape(),    body('done').toBoolean()  ],  async (req, res) => {    // ошибки - это результат валидации    const errors = validationResult(req)    if (!errors.isEmpty()) {      return res.status(400).json({ message: errors.array()[0].msg })    }    const { id, text, done } = req.body    const todo = new Todo({      id,      text,      done    })    try {      await todo.save()      return res.status(201).json({ message: 'Todo created' })    } catch (error) {      return res.status(500).json({ message: `Error: ${error}` })    }  })// удаление задачиrouter.delete('/delete/:id', async (req, res) => {  try {    await Todo.deleteOne({      id: req.params.id    })    res.status(201).json({ message: 'Todo deleted' })  } catch (error) {    return res.status(500).json({ message: `Error: ${error}` })  }})// обновление задачиrouter.put(  '/update',  [    body('text').notEmpty().trim().escape(),    body('done').toBoolean()  ],  async (req, res) => {    const errors = validationResult(req)    if (!errors.isEmpty()) {      return res.status(400).json({ message: errors.array()[0].msg })    }    const { id, text, done } = req.body    try {      await Todo.updateOne(        {          id        },        {          text,          done        }      )      return res.status(201).json({ message: 'Todo updated' })    } catch (error) {      return res.status(500).json({ message: `Error: ${error}` })    }})// экспорт роутераmodule.exports = router

Интеграция

/** * наш роутер - это обычная функция, * принимающая адрес конечной точки в качестве параметра (url) * * функция возвращает объект с методами: * get() - для получения всех задач из БД * set() - для добавления в БД новой задачи * update() - для обновления текста или индикатора выполнения задачи * delete() - для удаления задачи с указанным идентификатором * * все методы, кроме get(), принимают на вход задачу * * методы возвращают ответ от сервера в формате json * (объект со свойством message)*/export const Router = (url) => ({  // получение всех задач  get: async () => {    const response = await fetch(`${url}/get`)    return response.json()  },  // добавление задачи  set: async (todo) => {    const response = await fetch(`${url}/add`, {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(todo)    })    return response.json()  },  // обновление задачи  update: async (todo) => {    const response = await fetch(`${url}/update`, {      method: 'PUT',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(todo)    })    return response.json()  },  // удаление задачи  delete: async ({ id }) => {    const response = await fetch(`${url}/delete/${id}`, {      method: 'DELETE'    })    return response.json()  }})

// функция создает модальное окно с сообщением о результате операции// и удаляет его через две секундыexport const createModal = ({ message }) => {  root.innerHTML += `<div data-id="modal">${message}</div>`  const timer = setTimeout(() => {    root.querySelector('[data-id="modal"]').remove()    clearTimeout(timer)  }, 2000)}

import Form from './components/Form.js'import Buttons from './components/Buttons.js'import { List } from './components/List.js'import { Item } from './components/Item.js'import { toggleClass, createModal, todosExample } from './src/helpers.js'// импортируем роутер и передаем ему адрес конечной точкиimport { Router } from './src/router.js'const router = Router('http://localhost:1234/api')const App = (root, todos) => {  root.innerHTML = `    <h1 id="title">      JS Todos App    </h1>    ${Form}    <h3 id="counter"></h3>    ${Buttons}    ${List(todos)}  `  updateCounter()  const $addBtn = root.querySelector('[data-btn="add"]')  // основной функционал  async function addTodo() {    if (!input.value.trim()) return    const todo = {      id: Date.now().toString(16).slice(-4).padStart(5, 'x'),      text: input.value,      done: false    }    list.insertAdjacentHTML('beforeend', Item(todo))    todos.push(todo)    // добавляем в БД новую задачу и сообщаем о результате операции пользователю    createModal(await router.set(todo))    clearInput()    updateCounter()  }  async function completeTodo(item) {    const todo = findTodo(item)    todo.done = !todo.done    renderItem(item, todo)    // обновляем индикатор выполнения задачи    createModal(await router.update(todo))    updateCounter()  }  function updateTodo(item) {    item.classList.add('disabled')    const todo = findTodo(item)    const oldValue = todo.text    input.value = oldValue    $addBtn.textContent = 'Update'    $addBtn.addEventListener(      'click',      async (e) => {        e.stopPropagation()        const newValue = input.value.trim()        if (newValue && newValue !== oldValue) {          todo.text = newValue        }        renderItem(item, todo)        // обновляем текст задачи        createModal(await router.update(todo))        clearInput()        $addBtn.textContent = 'Add'      },      { once: true }    )  }  async function deleteTodo(item) {    const todo = findTodo(item)    item.remove()    todos.splice(todos.indexOf(todo), 1)    // удаляем задачу    createModal(await router.delete(todo))    updateCounter()  }  function findTodo(item) {    const { id } = item.dataset    const todo = todos.find((todo) => todo.id === id)    return todo  }  // дальше все тоже самое  // за исключением window.onbeforeunload  function filterTodos(value) {    const $items = [...root.querySelectorAll('.item')]    switch (value) {      case 'all':        $items.forEach((todo) => (todo.style.display = ''))        break      case 'active':        filterTodos('all')        $items          .filter((todo) => todo.classList.contains('completed'))          .forEach((todo) => (todo.style.display = 'none'))        break      case 'completed':        filterTodos('all')        $items          .filter((todo) => !todo.classList.contains('completed'))          .forEach((todo) => (todo.style.display = 'none'))        break    }  }  function updateCounter() {    const count = todos.filter((todo) => !todo.done).length    counter.textContent = `      ${count > 0 ? `${count} todo(s) left` : 'All todos completed'}    `    if (!todos.length) {      counter.textContent = 'There are no todos'      buttons.style.display = 'none'    } else {      buttons.style.display = ''    }  }  function renderItem(item, todo) {    item.outerHTML = Item(todo)  }  function clearInput() {    input.value = ''    input.focus()  }  root.onclick = ({ target }) => {    if (target.tagName !== 'BUTTON') return    const { btn } = target.dataset    if (target.classList.contains('filter')) {      filterTodos(btn)      toggleClass(target, 'checked')    }    const item = target.parentElement    switch (btn) {      case 'add':        addTodo()        break      case 'complete':        completeTodo(item)        break      case 'update':        updateTodo(item)        break      case 'delete':        deleteTodo(item)        break    }  }  document.onkeypress = ({ key }) => {    if (key === 'Enter') addTodo()  }};(async () => {  // получаем задачи из БД  let todos = await router.get()  if (!todos || !todos.length) todos = todosExample  App(root, todos)})()

TypeScript

Заключение

Клиент

yarn create react-app form-validation# илиnpm init react-app form-validation# илиnpx create-react-app form-validation

public  index.htmlsrc  App.js  index.js  styles.jsserver.js...

# для клиентаyarn add styled-components react-hook-form# для сервера (производственные зависимости)yarn add express express-validator cors# для сервера (зависимость для разработки)yarn add -D nodemon# для одновременного запуска серверовyarn add concurrently

<head>  ...  <link rel="preconnect" href="http://personeltest.ru/aways/fonts.gstatic.com" />  <link    href="http://personeltest.ru/aways/fonts.googleapis.com/css2?family=Comfortaa&display=swap"    rel="stylesheet"  /></head>

• Имя
  
  • от 2 до 10 символов
  • кириллица
  
  
• Email
  
  • особых требований не предъявляется
  
  
• Пароль
  
  • 8-12 символов
  • латиница: буквы в любом регистре, цифры, нижнее подчеркивание и дефис
  
  

// импорт инструментовimport styled, { createGlobalStyle } from 'styled-components'// глобальные стилиconst GlobalStyle = createGlobalStyle`  body {    margin: 0;    min-height: 100vh;    display: grid;    place-items: center;    background-color: #1c1c1c;    font-family: 'Comfortaa', cursive;    font-size: 14px;    letter-spacing: 1px;    color: #f0f0f0;  }`// заголовокconst StyledTitle = styled.h1`  margin: 1em;  color: orange;`// формаconst StyledForm = styled.form`  margin: 0 auto;  width: 320px;  font-size: 1.2em;  text-align: center;`// подписьconst Label = styled.label`  margin: 0.5em;  display: grid;  grid-template-columns: 1fr 2fr;  align-items: center;  text-align: left;`// проект поля для ввода данныхconst BaseInput = styled.input`  padding: 0.5em 0.75em;  font-family: inherit;  font-size: 0.9em;  letter-spacing: 1px;  outline: none;  border: none;  border-radius: 4px;`// обычное полеconst RegularInput = styled(BaseInput)`  background-color: #f0f0f0;  box-shadow: inset 0 0 2px orange;  &:focus {    background-color: #1c1c1c;    color: #f0f0f0;    box-shadow: inset 0 0 4px yellow;  }`// поле для отправки данных на серверconst SubmitInput = styled(BaseInput)`  margin: 1em 0.5em;  background-image: linear-gradient(yellow, orange);  cursor: pointer;  &:active {    box-shadow: inset 0 1px 3px #1c1c1c;  }`// проект сообщения с текстомconst BaseText = styled.p`  font-size: 1.1em;  text-align: center;  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);`// сообщение об ошибкеconst ErrorText = styled(BaseText)`  font-size: ${(props) => (props.small ? '0.8em' : '1.1em')};  color: red;`// сообщение об успехеconst SuccessText = styled(BaseText)`  color: green;`// экспорт стилизованных компонентовexport {  GlobalStyle,  StyledTitle,  StyledForm,  Label,  RegularInput,  SubmitInput,  ErrorText,  SuccessText}

import React from 'react'import ReactDOM from 'react-dom'// импортируем глобальные стилиimport { GlobalStyle } from './styles'import App from './App'ReactDOM.render(  <React.StrictMode>    {/* подключаем глобальные стили */}    <GlobalStyle />    <App />  </React.StrictMode>,  document.getElementById('root'))

import { useState } from 'react'// импорт хука для валидации формыimport { useForm } from 'react-hook-form'// импорт стилизованных компонентовimport {  StyledTitle,  StyledForm,  Label,  RegularInput,  SubmitInput,  ErrorText,  SuccessText} from './styles'// компонент заголовкаfunction Title() {  return <StyledTitle>Валидация формы</StyledTitle>}// компонент формыfunction Form() {  // инициализируем начальное состояние  const [result, setResult] = useState({    message: '',    success: false  })  // извлекаем средства валидации:  // регистрация проверяемого поля  // ошибки и обработка отправки формы  const { register, errors, handleSubmit } = useForm()  // общие валидаторы  const validators = {    required: 'Не может быть пустым'  }  // функция отправки формы  async function onSubmit(values) {    console.log(values)    const response = await fetch('http://localhost:5000/server', {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(values)    })    const result = await response.json()    // обновляем состояние    setResult({      message: result,      success: response.ok    })  }  // нажатие кнопки сброса полей в исходное состояние приводит к перезагрузке страницы  function onClick() {    window.location.reload()  }  return (    <>      <StyledForm onSubmit={handleSubmit(onSubmit)}>        <Label>          Имя:          <RegularInput            type='text'            name='name'            // поля являются неуправляемыми            // это повышает производительность            ref={register({              ...validators,              minLength: {                value: 2,                message: 'Не менее двух букв'              },              maxLength: {                value: 10,                message: 'Не более десяти букв'              },              pattern: {                value: /[А-ЯЁ]{2,10}/i,                message: 'Только киррилица'              }            })}            defaultValue='Иван'          />        </Label>        {/* ошибки */}        <ErrorText small>{errors.name && errors.name.message}</ErrorText>        <Label>          Email:          <RegularInput            type='email'            name='email'            ref={register({              ...validators,              pattern: {                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,                message: 'Неправильный адрес электронной почты'              }            })}            defaultValue='email@example.com'          />        </Label>        <ErrorText small>{errors.email && errors.email.message}</ErrorText>        <Label>          Пароль:          <RegularInput            type='password'            name='password'            ref={register({              ...validators,              pattern: {                value: /^[A-Z0-9_-]{8,12}$/i,                message:                  'От 8 до 12 символов: латиница, цифры, нижнее подчеркивание и дефис'              }            })}            defaultValue='password'          />        </Label>        <ErrorText small>          {errors.password && errors.password.message}        </ErrorText>        <SubmitInput type='submit' defaultValue='Отправить' />        {/* обратите внимание на атрибут "as", он позволяет превратить "инпут" в кнопку с аналогичными стилями */}        <SubmitInput as='button' onClick={onClick}>          Сбросить        </SubmitInput>      </StyledForm>      {/* результат отправки формы */}      {result.success ? (        <SuccessText>{result.message}</SuccessText>      ) : (        <ErrorText>{result.message}</ErrorText>      )}    </>  )}export default function App() {  return (    <>      <Title />      <Form />    </>  )}

Сервер

const express = require('express')// body читает тело запроса// validationResult - результат валидацииconst { body, validationResult } = require('express-validator')const cors = require('cors')const app = express()const PORT = process.env.PORT || 5000app.use(cors())app.use(express.json())app.use(express.urlencoded({ extended: false }))// валидаторыconst validators = [  body('name').trim().notEmpty().isAlpha('ru-RU').escape(),  body('email').normalizeEmail().isEmail(),  // кастомный валидатор  body('password').custom((value) => {    const regex = /^[A-Z0-9_-]{8,12}$/i    if (!regex.test(value)) throw new Error('Пароль не соответствует шаблону')    return true  })]// валидаторы передаются в качестве middlewareapp.post('/server', validators, (req, res) => {  // извлекаем массив с ошибками из результата валидации  const { errors } = validationResult(req)  console.log(errors)  // если массив с ошибками не является пустым  if (errors.length) {    res.status(400).json('Регистрация провалилась')  } else {    res.status(201).json('Регистрация прошла успешно')  }})app.listen(PORT, () => {  console.log(`Сервер готов. Порт: ${PORT}`)})

"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "server": "nodemon server",  "dev": "concurrently \"yarn server\" \"yarn start\""}

1. Простое Web приложение youtu.be/7MIIcFDeSg4
   Ставим в определенном порядке пакеты и Node.JS, а так же прописываем настройки.
   

   1) node.js download, 2) Create directory for your project, 3) npm init, 4) in package.json "main": "dist/index.js",  "scripts": {    "build": "tsc",    "start": "node ."  }5) npm install --save-dev typescript, 6) in tsconfig.json   {  "compilerOptions": {    "esModuleInterop": true,    "outDir": "dist",    "baseUrl": "."  }}8) npm install express, 9) npm install @types/express, 10) create src folder, 11) create src/index.ts with code below:import express from 'express'const app = express();const port = 5000;app.get('/', (request, response) => {  response.send('Hello world!');});app.listen(port, () => console.log(`Running on port ${port}`));13) npm run build, 14) npm run start, 15) localhost:5000
   

   
   
2. Отладка и инициализация в Node.js youtu.be/hfST0e1ITGw
   Настраиваем режим отладки и создаем .env файл для установки входных значений.
   

   1) in tsconfig.json add: "sourceMap": true2) int package.json add: "prestart": "npm run build",3) In IntelliJ IDEA in Run/Debug Configurations choose: "npm" and add script4) npm i ts-node-dev --save-dev5) int package.json add: "server:watch": "ts-node-dev --respawn --transpile-only src/index.ts"6) add IntelliJ IDEA npm for "server:watch" script7) npm install dotenv8) in index.ts add: dotenv.config();9) create .env file in root dir of your project and add text below in .env file:PORT = 5000const port = process.env.PORT;
   

   
   
3. Добавление log4js и eslint к приложению на Node.JS youtu.be/qcSpd6N7ZJ8
   

   1) npm install log4js2) in index.ts file:    import log4js from 'log4js';    ...    const logger = log4js.getLogger();    logger.level = process.env.LOG_LEVEL;    ...4) in .env file: LOG_LEVEL=error5) in index.ts file:    ...    logger.info('log4js log info');    logger.debug('log4js log debug');    logger.error('log4js log error');    ...6) npm install eslint --save-dev7) eslint --init8) "prebuild": "npm run lint"9) "lint:fix": "eslint --cache --ext .ts . --fix",10) "lint": "eslint --cache --ext .ts .",    !!! --cache (only changed), .11) IntelliJ IDEA -- file -- setting -- eslint -- automatic12) "rules": {        "semi": ["error", "always"]    }
   

   
   
4. Routing controllers для Node.js youtu.be/_7z5Zubsdps
   Используем routing-controllers для более удобной работы.
   

   1) npm install routing-controllers2) npm install reflect-metadata3) npm install express body-parser multer4) npm install class-transformer class-validator5) tsconfig.json   "compilerOptions": {      ...      "emitDecoratorMetadata": true,      "experimentalDecorators": true      ...   }6) in index.ts// const app = express();// logger.info('log4js log info');// logger.debug('log4js log debug');// logger.error('log4js log error');// app.get('/', (request, response) => {//   response.send('Hello world2!');// });7) in index.ts   import { createExpressServer } from 'routing-controllers';   import { UserController } from './UserController';   const app = createExpressServer({     controllers: [UserController], // we specify controllers we want to use});8) controller/user-controller.ts   import { Controller, Get, Param } from 'routing-controllers';   import 'reflect-metadata';   @Controller()   export class UserController {     @Get('/users/:id')     getOne (@Param('id') id: number) {       return 'This action returns user #' + id;     }   }9) http://localhost:3001/users/1
   

   
   
5. Node.JS middleware, interceptor, http context youtu.be/iWUMUa7gTTQ
   

   1) middleware -- middleware.ts2) middleware.tsexport function loggingBefore (request: any, response: any, next?: (err?: any) => any): any {  console.log('do something Before...');  next();}export function loggingAfter (request: any, response: any, next?: (err?: any) => any): any {  console.log('do something After...');  next();}3) user-controller.ts in class@UseBefore(loggingBefore)@UseAfter(loggingAfter)console.log('do something in GET function...');4) user-controller.ts in function @UseBefore(loggingBefore) @UseAfter(loggingAfter)5) user-controller.ts in function @UseInterceptor(function (action: Action, content: any) {    console.log('change response...');    return content;  })6) npm install express-http-context7) index.ts  const app: Express = express();        app.use(bodyParser.json()); app.use(httpContext.middleware); useExpressServer(app, {   controllers: [UserController] }); app.use((req, res, next) => {   httpContext.ns.bindEmitter(req);   httpContext.ns.bindEmitter(res); });8) middleware.ts loggingBefore    import httpContext from 'express-http-context';        console.log('set traceId = 123');    httpContext.set('traceId', 123);9) middleware.ts loggingAfter    console.log(`tracedId = ${httpContext.get('traceId')}`);
   

   
   
6. Node.JS добавляем post запрос, валидация входных данных, глобальный обработчик ошибок youtu.be/onBVkkLEuw4
   

   1) in user-controller.ts add:  ...  @Post('/users/:id')  @OnUndefined(204)  postOne (@Param('id') id: number, @Body() info: any) {    console.log(JSON.stringify(info));  }  ...2) in postman http://localhost:3001/users/1 { "country":"Russia", "city":"SPb" }3) model -- info.ts4) import { IsDefined } from 'class-validator';export class Info {  @IsDefined()  country: string;  @IsDefined()  city: string;}8) postOne (@Param('id') id: number, @Body() info: Info) {9) middleware -- global-error-handler.ts10) import { ExpressErrorMiddlewareInterface, Middleware } from 'routing-controllers';@Middleware({ type: 'after' })export class GlobalErrorHandler implements ExpressErrorMiddlewareInterface {  error (error: any, request: any, response: any, next: () => any) {    response.send({ ERROR: error });    next();  }}11) useExpressServer(app, {  controllers: [UserController], // we specify controllers we want to use  middlewares: [GlobalErrorHandler],  defaultErrorHandler: false});
   

   
   
7. Swagger документация в Node.JS приложении youtu.be/-uoIasCbsq8
   

   1) npm install swagger-ui-express2) tsconfig.json -- "resolveJsonModule": true3) src -- swagger -- openapi.json4) index.tsimport swaggerUi from 'swagger-ui-express';import * as swaggerDocument from '../src/swagger/openapi.json';...app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));5) change port to 3000in .env file set PORT=30006) npm install cors7) npm install @types/cors8) in index.ts import cors from 'cors';...app.use(cors() as RequestHandler);...9) Swagger Editor (example for test project)openapiopenapi: 3.0.1info:  title: test API  version: v1servers:  - url: 'http://localhost:3000'tags:  - name: API functions    description: >-      API functions of our application      paths:  /users/{id}:    get:     summary: returns simple answer from get     tags:       - API functions     parameters:       - name: id         in: path         required: true         description: simple parameter         schema:           type : string           example: '1'     description: parameter id just for test     responses:      '200': #status code       description: OK       content:            document:              schema:                type: string                example: some text    post:     summary: returns simple answer from post     tags:       - API functions     requestBody:        required: true        content:          application/json:            schema:               $ref: '#/components/schemas/Info'                      example:              country: Russia              city: Spb     parameters:       - name: id         in: path         required: true         description: simple parameter         schema:           type : string           example: '1'     description: parameter id just for test     responses:      '204': #status code       description: OKcomponents:  schemas:    Info:      type: object      properties:        country:          type: string        city:            type: string
   

   
   
8. Добавляем Unit тесты на Jest в приложение на Node.JS youtu.be/rCIRpTMVEMM
   

   0) in global-error-handler.tsresponse.status(error.statusCode || error.httpCode).json(error);    next();1) npm install --save-dev jest2) npm i -D ts-jest @types/jest3) npm i -D ts-jest4) package.json -- {...scripts {..."test:unit": "jest --config=jest.config.js",},...}5) create jest.config.js with code below:process.env.NODE_ENV = 'UNITTEST';module.exports = {    clearMocks: true,    collectCoverage: true,    collectCoverageFrom: [        './src/**/*.ts'    ],    coverageDirectory: '<'rootDir>/test/coverage',    testEnvironment: 'node',    testMatch: ['**/*.test.ts'],    preset: 'ts-jest'};6) .eslintignore*.jsnode_modulesdistcoverage}7) .eslintrc.json{..."env": {   "jest": true} ...} 8) test -- controller -- user-controller.test.tsdescribe('UserController', () => {  afterEach(() => {    jest.restoreAllMocks();  });  it('postOne', () => {    const userController = new UserController();    const testBody = {      city: 'SPb'    };    const res = userController.postOne(1, testBody as Info);    expect(res).toBeUndefined();  });}9) in IDEAadd script - test:unitset in environment - NODE_ENV=UNITTEST10) Simple variant of jest.config.js for IDEA:process.env.NODE_ENV = 'UNITTEST';module.exports = {  clearMocks: true,  collectCoverage: false,  testEnvironment: 'node',  testMatch: ['**/*.test.ts'],  preset: 'ts-jest'};11) npm i -D supertest @types/supertest12) in user-controller.test.ts...let server;...beforeAll(async () => {    server = express();    server.use(bodyParser.json());    useExpressServer(server, {      controllers: [UserController], // we specify controllers we want to use      middlewares: [GlobalErrorHandler],      defaultErrorHandler: false    });  });...it('postOne with validations', done => {    request(server)      .post('/users/1')      .send({        country: 'Russia',        city: 'SPb'      } as Info)      .expect(204)      .end((err, res) => {        if (err) throw new Error(JSON.stringify(res.body));        done();      });  });
   

   
   
9. Использование config для Node.JS, а так же другие полезные пакеты. youtu.be/8ZCHUN-JTck
   Пакет config позволяет устанавливать значения констант при инициализации в зависимости от значения NODE_ENV.
   

   1) npm install config2) npm install @types/config3) config4) default.yaml PORT: 3000    DEV.yaml PORT: 3001    LOCAL.yaml PORT: 3002 5) index.ts   // const port = process.env.PORT;      const port = config.get('PORT');6) IDEA server:watch -- Environment    NODE_ENV=DEV    NODE_ENV=LOCAL-- packages:husky - коммиты в гитsemantic-release - формат коммитов и контроль версийpretty-quick - запускает prettier на измененных файлахprettier - формат кодаeslint-config-prettier - разрешает конфликты между eslint и prettiereslint-plugin-prettier - запускает prettier как правила eslintmock-socket - мок для вебсокетаjest-websocket-mock - тестирование вебсокетаjest-sonar-reporter - конвертр из формата jest в формат sonarjest-mock-extended - мок объектов и интерфейсовws - вебсокетtypescript-string-operations - String.formatlodash - библиотека дополнительных функций для jshttp-status-codes - константы для HTTP статусовmoment - библиотека работы со временем в jsncp - копирование файловjs-yaml - загрузка yaml файловmongodb - функции для работы с Mongomigrate-mongo - миграция для Mongolog-timestamp - запись даты в логaxios - HTTP клиентapplicationinsights - интеграция с Azure Application Insights
   

   
   

Запуск локального хранилища S3

version: '3'services:  minio1:    image: minio/minio:RELEASE.2020-08-08T04-50-06Z    volumes:      - ./s3/data1-1:/data1      - ./s3/data1-2:/data2    ports:      - '9001:9000'    environment:      MINIO_ACCESS_KEY: minio      MINIO_SECRET_KEY: minio123    command: server http://minio{1...4}/data{1...2}    healthcheck:      test: ['CMD', 'curl', '-f', 'http://localhost:9000/minio/health/live']      interval: 30s      timeout: 20s      retries: 3  minio2:    image: minio/minio:RELEASE.2020-08-08T04-50-06Z    volumes:      - ./s3/data2-1:/data1      - ./s3/data2-2:/data2    ports:      - '9002:9000'    environment:      MINIO_ACCESS_KEY: minio      MINIO_SECRET_KEY: minio123    command: server http://minio{1...4}/data{1...2}    healthcheck:      test: ['CMD', 'curl', '-f', 'http://localhost:9000/minio/health/live']      interval: 30s      timeout: 20s      retries: 3  minio3:    image: minio/minio:RELEASE.2020-08-08T04-50-06Z    volumes:      - ./s3/data3-1:/data1      - ./s3/data3-2:/data2    ports:      - '9003:9000'    environment:      MINIO_ACCESS_KEY: minio      MINIO_SECRET_KEY: minio123    command: server http://minio{1...4}/data{1...2}    healthcheck:      test: ['CMD', 'curl', '-f', 'http://localhost:9000/minio/health/live']      interval: 30s      timeout: 20s      retries: 3  minio4:    image: minio/minio:RELEASE.2020-08-08T04-50-06Z    volumes:      - ./s3/data4-1:/data1      - ./s3/data4-2:/data2    ports:      - '9004:9000'    environment:      MINIO_ACCESS_KEY: minio      MINIO_SECRET_KEY: minio123    command: server http://minio{1...4}/data{1...2}    healthcheck:      test: ['CMD', 'curl', '-f', 'http://localhost:9000/minio/health/live']      interval: 30s      timeout: 20s      retries: 3

NestJS + Fastify + S3

npm install -g @nestjs/cli

nest new s3-nestjs-tut

npm install --save @nestjs/platform-fastify fastify-multipart aws-sdk sharpnpm install --save-dev @types/fastify-multipart  @types/aws-sdk @types/sharp

import { NestFactory } from '@nestjs/core';import {  FastifyAdapter,  NestFastifyApplication,} from '@nestjs/platform-fastify';import fastifyMultipart from 'fastify-multipart';import { AppModule } from './app.module';async function bootstrap() {  const fastifyAdapter = new FastifyAdapter();  fastifyAdapter.register(fastifyMultipart, {    limits: {      fieldNameSize: 1024, // Max field name size in bytes      fieldSize: 128 * 1024 * 1024 * 1024, // Max field value size in bytes      fields: 10, // Max number of non-file fields      fileSize: 128 * 1024 * 1024 * 1024, // For multipart forms, the max file size      files: 2, // Max number of file fields      headerPairs: 2000, // Max number of header key=>value pairs    },  });  const app = await NestFactory.create<NestFastifyApplication>(    AppModule,    fastifyAdapter,  );  await app.listen(3000, '127.0.0.1');}bootstrap();

import { Injectable, HttpException, BadRequestException } from '@nestjs/common';import { S3 } from 'aws-sdk';import fastify = require('fastify');import { AppResponseDto } from './dto/app.response.dto';import * as sharp from 'sharp';@Injectable()export class AppService {  async uploadFile(req: fastify.FastifyRequest): Promise<any> {    const promises = [];    return new Promise((resolve, reject) => {      const mp = req.multipart(handler, onEnd);      function onEnd(err) {        if (err) {          reject(new HttpException(err, 500));        } else {          Promise.all(promises).then(            data => {              resolve({ result: 'OK' });            },            err => {              reject(new HttpException(err, 500));            },          );        }      }      function handler(field, file, filename, encoding, mimetype: string) {        if (mimetype && mimetype.match(/^image\/(.*)/)) {          const imageType = mimetype.match(/^image\/(.*)/)[1];          const s3Stream = new S3({            accessKeyId: 'minio',            secretAccessKey: 'minio123',            endpoint: 'http://127.0.0.1:9001',            s3ForcePathStyle: true, // needed with minio?            signatureVersion: 'v4',          });          const promise = s3Stream            .upload(              {                Bucket: 'test',                Key: `200x200_${filename}`,                Body: file.pipe(                  sharp()                    .resize(200, 200)                    [imageType](),                ),              }            )            .promise();          promises.push(promise);        }        const s3Stream = new S3({          accessKeyId: 'minio',          secretAccessKey: 'minio123',          endpoint: 'http://127.0.0.1:9001',          s3ForcePathStyle: true, // needed with minio?          signatureVersion: 'v4',        });        const promise = s3Stream          .upload({ Bucket: 'test', Key: filename, Body: file })          .promise();        promises.push(promise);      }    });  }}

        const promise = s3Stream          .upload({ Bucket: 'test', Key: filename, Body: file })          .promise();        promises.push(promise);

import { Controller, Post, Req } from '@nestjs/common';import { AppService } from './app.service';import { FastifyRequest } from 'fastify';@Controller()export class AppController {  constructor(private readonly appService: AppService) {}  @Post('/upload')  async uploadFile(@Req() req: FastifyRequest): Promise<any> {    const result = await this.appService.uploadFile(req);    return result;  }}

npm run start:dev

Краткое описание технологии

1. connection
2. error
3. message
4. close

Почему Websocket?

1. Делаем запрос на изменения;
2. Если изменения на сервере появились, то сервер их отправляет;
3. Когда клиент получает изменения, клиент делает новый запрос.

1. Вебсокет не требует от клиента постоянно запрашивать изменения и именно поэтому он быстрее.
2. Вебсокет позволяет передавать бинарные данные, что не позволяет протокол HTTP(S).
3. Вебсокет не нужно использовать, если проект требует совместимость со старыми версиями браузеров. Читать о совместимости с браузерами

Пример работы простейшего api.

const http = require("http");const express = require( "express");const WebSocket = require( "ws");const app = express();const server = http.createServer(app);const webSocketServer = new WebSocket.Server({ server });webSocketServer.on('connection', ws => {   ws.on('message', m => {webSocketServer.clients.forEach(client => client.send(m));   });   ws.on("error", e => ws.send(e));   ws.send('Hi there, I am a WebSocket server');});server.listen(8999, () => console.log("Server started"))

export const wsConnection = new WebSocket("ws://localhost:8999");wsConnection.onopen = function() {    alert("Соединение установлено.");};wsConnection.onclose = function(event) {    if (event.wasClean) {        alert('Соединение закрыто чисто');    } else {        alert('Обрыв соединения'); // например, "убит" процесс сервера    }    alert('Код: ' + event.code + ' причина: ' + event.reason);};wsConnection.onerror = function(error) {    alert("Ошибка " + error.message);};export const wsSend = function(data) {// readyState - true, если есть подключение    if(!wsConnection.readyState){        setTimeout(function (){            wsSend(data);        },100);    } else {        wsConnection.send(data);    }};

API на основе Websocket

const sendMessage = (message) => conn.send(JSON.stringify({ event: "chat-message", payload: { userName, message }}));

const dispatchEvent = (message, ws) => {   const json = JSON.parse(message);   switch (json.event) {       case "chat-message": webSocketServer.clients.forEach(client => client.send(message));       default: ws.send((new Error("Wrong query")).message);   }}

Заключение