29.08.2023 в 15:18

Первый проект с ExpressoTS

ExpressoTS — это новая, удобная для разработчиков платформа TypeScript для серверных приложений. В настоящее время он построен на основе Express, легко привлечь нового разработчика, легкая и простая структура проекта, поддерживаются две разные структуры проекта (самоуверенная и несамоуверенная версия), поддерживает архитектуру MVC и не MVC. Самоуверенный шаблон был построен на основе чистой архитектуры. Вы увидите концепции, встроенные в самоуверенный шаблон, такие как сущности, варианты использования, репозитории и поставщики.

Настройка вашего первого проекта ExpressoTS

Первый шаг к любому великому путешествию в мир программирования — правильная настройка. Поверьте мне, никто не хочет заблудиться, даже не начав приключение. Итак, давайте прекратим болтовню и приступим к делу.

Установка интерфейса командной строки ExpressoTS

Здесь у вас есть два маршрута, и пункт назначения тот же: функциональная среда ExpressoTS. Первый вариант — глобальная установка интерфейса командной строки ExpressoTS:

pnpm i -g @expressots/cli

Есть проблемы с ограниченными обязательствами? Не беспокойтесь, вы также можете использовать dlx для запуска CLI, не устанавливая его глобально. Ах, чудеса знакомства на одну ночь с CLI!

pnpx @expressots/cli new expressots-first-project

Мастер настройки

После запуска команды вас приветствует дружелюбный (хотя и текстовый) мастер 🧙‍♂️.

[🐎 Expressots]

? Project name expressots-first-project
? Package manager pnpm
? Select a template Non-Opinionated :: A simple ExpressoTS project.
? Do you want to create this project? Yes

Заполняйте форму с умом, но не зацикливайтесь на этом. Для этого урока я выберу шаблон «Non-Opinionated», потому что в начале он даст нам более поверхностную кривую обучения.

Почувствуйте комфорт в своем новом доме ExpressoTS 🏡

Переход к вашему проекту

Итак, вы настроили свой новый проект ExpressoTS. Потрясающий! Пришло время проникнуть в машинное отделение и заглянуть под капот.

cd expressots-first-project

Теперь вы находитесь в корневой папке, и если вам интересно, что упаковано по умолчанию, запустите быструю команду tree.

@expressots/tests/expressots-first-project via  v16.19.0
❯ tree -I node_modules -a
.
├── .eslintrc.js
├── expressots.config.ts
├── .gitignore
├── jest.config.ts
├── package.json
├── pnpm-lock.yaml
├── .prettierrc
├── README.md
├── src
│   ├── app.container.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.usecase.ts
│   └── main.ts
├── test
│   └── app.usecase.spec.ts
├── tsconfig.build.json
└── tsconfig.json

3 directories, 16 files

Вот и все! Это файлы, с которыми вам придется жить.

Настройка ваших прекрасных предпочтений

У вас есть свой собственный стиль программирования — не так ли? Вы можете настроить файл .prettierrc по своему усмотрению.

{
  "singleQuote": false,
  "trailingComma": "all",
  "endOfLine": "auto",
  "tabWidth": 2
}

Давайте совершим краткий обзор package.json

Взглянув на раздел scripts в package.json, вы поймете все, что вам нужно знать, чтобы все заработало.

❯ cat package.json | jq ".scripts"
{
  "prebuild": "rm -rf ./dist",
  "build": "tsc -p tsconfig.build.json",
  "dev": "tsnd ./src/main.ts",
  "prod": "node ./dist/main.js",
  "test": "jest",
  "test:watch": "jest --watchAll",
  "test:cov": "jest --coverage",
  "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
  "lint": "eslint \"src/**/*.ts\" --fix"
}

Здесь у вас есть обычные подозреваемые: сборка, разработка, тестирование и многое другое.

Отформатируйте все!

Прежде чем погрузиться в разработку, давайте наведем порядок. Сценарий format справится с этим.

Запуск в режиме разработки

И, наконец, тот момент, которого вы так долго ждали: запустите сервер разработки и увидите, как ваше приложение оживает!

@expressots/tests/expressots-first-project via  v16.19.0
❯ pnpm dev

[INFO] ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 4.9.5)
Application version not provided is running on port 3000 - Environment: development

Делаем свой первый запрос в ExpressoTS 🌐

Время для небольшого здравствуйте!

Вы прошли экскурсию по дому, выполнили фэн-шуй в своем .prettierrc и все продумали свои сценарии. Что теперь? А как насчет того, чтобы увидеть ваше приложение в действии?

Использование HTTPie для вашего первого запроса GET

Для этой демонстрации мы собираемся использовать HTTPie — cURL 21 века. Но, типа, более читабельно. Вот как отправить свой первый запрос GET на http://localhost:3000.

@expressots/tests/expressots-first-project via  v16.19.0
❯ http :3000

Вы должны увидеть ответ типа:

HTTP/1.1 200 OK
...
Hello Expresso TS!

Поздравляю! Вы только что заставили свой сервер поздороваться.

Анатомия «Hello Expresso TS!»

Хорошо, давайте разберем это «Hello Expresso TS!» сообщение. Как эта простая строка проходит через слои файлов TypeScript и попадает в ваш браузер? Спойлер: это не волшебство; это просто хорошо структурированный код.

Отправная точка: src/main.ts

Вот здесь и была подхвачена эстафета. Здесь мы импортируем основные части из ExpressoTS и настраиваем исходный экземпляр приложения. Достаточно просто.

import "reflect-metadata";
import { AppInstance, ServerEnvironment } from "@expressots/core";
import { container } from "./app.container";

async function bootstrap() {
  AppInstance.create(container);
  AppInstance.listen(3000, ServerEnvironment.Development);
}

bootstrap();

Контейнер: src/app.container.ts

Думайте об этом как о закулисье, где все готовятся к выступлению. Здесь контейнер приложения настраивается с помощью ваших пользовательских модулей.

import { AppContainer } from "@expressots/core";
import { AppModule } from "./app.module";

const appContainer = new AppContainer();
const container = appContainer.create([AppModule]);

export { container };

Модуль: src/app.module.ts

Модули в группе ExpressoTS имеют функциональные возможности, связанные с ними. Здесь это так же просто, как импортировать AppController.

import { CreateModule } from "@expressots/core";
import { AppController } from "./app.controller";

const AppModule = CreateModule([AppController]);

export { AppModule };

Контроллер: src/app.controller.ts

Это дирижер нашего оркестра. Он отвечает за обработку HTTP-запросов и направление трафика. В данном случае он просто говорит: «Hello, Expresso TS!».

import { BaseController, controller, httpGet, response } from "inversify-express-utils";
import { Response } from "express";
import { AppUseCase } from "./app.usecase";

@controller("/")
class AppController extends BaseController {
  constructor(private appUseCase: AppUseCase) {
    super("app-controller");
  }

  @httpGet("/")
  execute(@response() res: Response) {
    return res.send(this.appUseCase.execute());
  }
}

Вариант использования: src/app.usecase.ts

Вот где собственно «Hello Expresso TS!» жизни.

import { provide } from "inversify-binding-decorators";

@provide(AppUseCase)
class AppUseCase {
  execute() {
    return "Hello Expresso TS!";
  }
}

«Привет, кто?» Изменение ответа по умолчанию

Надоело обычное «Hello Expresso TS!»? Давайте придадим этому индивидуальный подход. Для этого нам нужно всего лишь зайти в файл src/app.usecase.ts. Видите, в этом красота хорошо структурированной кодовой базы; вам не нужно преодолевать трудности, чтобы внести простые изменения.

Улучшение: src/app.usecase.ts

Изменение одной строки. Вот и все. Здесь мы просто заменяем текст на "Hello from <Daniel::Boll>".

@provide(AppUseCase)
class AppUseCase {
  execute() {
    return "Hello from <Daniel::Boll>";
  }
}

Перезагрузка: автоматическое обновление FTW

Как только вы сохраните это изменение, сервер разработки обнаружит это обновление и перезагрузится. Никаких ручных усилий не требуется. Ах, радости современного развития.

[INFO] Restarting: /../@expressots/tests/expressots-first-project/src/app.usecase.ts has been modified
Application version not provided is running on port 3000 - Environment: development

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

Запустите команду и вуаля! Обновленное приветствие теперь подается в горячем виде прямо с вашего сервера.

Hello from <Daniel::Boll>

Погрузитесь глубже

Если вас интересуют дополнительные возможности этого простого проекта ExpressoTS, обязательно ознакомьтесь с полной версией блога на сайте daniel-boll.me.

Источник:

#JavaScript #TypeScript

Войти на сайт