Начать создание стека MANNN

Подготовьте свой компьютер к созданию одностраничного приложения с полным стеком с использованием MongoDB, Angular, NestJS, Nx и Node.js (MANNN)

Мы собираемся подготовить наши компьютеры для создания полнофункционального приложения MANNN, и мы будем рассматривать его как проект с нуля, то есть начинаем с нуля. Ноль. Нада. Ничего такого. С чистого листа.

В конце концов, на нашем компьютере будет запущено простое стартовое приложение, которое мы сможем расширить позже.

В частности, мы сделаем следующее:

  1. Установите Node.js и npm
  2. Установите Git (необязательно)
  3. Установить MongoDB
  4. Установите Angular CLI
  5. Создайте рабочее пространство Nx, содержащее Angular и NestJS
  6. Обслуживайте наше стартовое приложение локально

Почему именно MANNN Stack?

Я не хочу присоединяться к войнам стеков, но мне нравится именно этот стек по нескольким основным причинам:

  • Angular и NestJS очень похожи, отчасти потому, что они оба используют TypeScript. Но они также имеют одинаковую структуру, и оба могут создавать компоненты / модули / и т. Д. для нас с помощью командной строки. Таким образом, их совместное использование максимизирует переносимость знаний и методов внешнего и внутреннего интерфейса. Кроме того, у них обоих есть отличная документация, доступная в Интернете бесплатно.
  • Рабочие области Nx предоставляют нам множество замечательных функций, но одна из самых важных - они позволяют нам легко обмениваться кодом между нашим интерфейсом и серверной частью и даже между отдельными приложениями. Узнайте больше о преимуществах Nx здесь.
  • MongoDB хранит данные в формате JSON, что естественно, когда мы работаем с JavaScript.

Давайте начнем!

Установите Node.js и npm

Серверная часть нашего приложения будет работать на Node.js, поэтому нам необходимо установить Node.js на нашем компьютере. Вы можете сделать это, посетив сайт Node.js и загрузив установщик, подходящий для вашей операционной системы. Я рекомендую использовать последнюю версию с долгосрочной поддержкой (LTS), которая на момент написания этой статьи была версией 12.

После установки Node.js вы можете открыть командную строку и выполнить следующую команду, чтобы убедиться, что Node.js установлен правильно:

node --version

Вы должны увидеть что-то вроде v12.16.2. Мы также должны убедиться, что npm установлен правильно:

npm --version

Опять же, вы должны увидеть что-то вроде 6.14.4.

Установить Git

Установка Git не является обязательной, но я рекомендую ее по трем причинам:

  1. Позволяет выполнять контроль версий.
  2. Он требуется для развертывания в Heroku, что я рекомендую, если вы хотите легко развернуть свое приложение в действующей производственной среде в Интернете.
  3. Если вы зарегистрируетесь в учетной записи GitHub, вы можете использовать Git для отправки вашего локального исходного кода в репозиторий GitHub, который по сути служит резервной копией вашего кода вне офиса и позволяет вам делиться своим кодом с другими.

Для macOS: откройте командную строку и запустите git --version. Если у вас еще не установлен Git, вам будет предложено установить его.

Для Windows: вы можете загрузить и установить Git, посетив страницу загрузки для Windows на веб-сайте Git.

Более подробные инструкции можно найти на сайте Git здесь.

Вы можете убедиться, что Git установлен на вашем компьютере, введя git --version в командную строку. Если Git был установлен правильно, вы должны увидеть ответ типа git version 2.16.2.

Установить MongoDB

Мы будем хранить данные нашего приложения MANNN в базе данных MongoDB. Следовательно, нам потребуется установить и запустить MongoDB на нашем компьютере. Установка MongoDB, вероятно, является самой сложной частью подготовки вашего компьютера к разработке приложения MANNN. Но обычно вам нужно сделать это только один раз. Так что не расстраивайтесь!

Установка MongoDB на macOS

Подробные инструкции по установке MongoDB на macOS см. В этом руководстве на веб-сайте MongoDB. Я резюмирую шаги ниже.

  1. Установите Apple XCode бесплатно из App Store. Homebrew, который мы установим дальше, основан на XCode.
  2. Установите Homebrew, открыв командную строку и введя:
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
    (здесь это не выглядит красиво, но все это одна строка).
  3. Установите соединение с репозиторием MongoDB, введя следующую команду:
    brew tap mongodb/brew
  4. Установите MongoDB, запустив:
    brew install [email protected]
  5. Наконец, мы можем проверить правильность установки MongoDB, запустив mongod в командной строке. Это запустит процесс mongod - другими словами, он запустит нашу MongoDB. Если MongoDB запустился правильно, вы должны увидеть, что это база данных waiting for connections on port 27017. См. рисунок 1.

Установите MongoDB в Windows

Подробные инструкции по установке MongoDB в Windows см. На этой странице веб-сайта MongoDB. Я резюмирую шаги ниже.

  1. Загрузите установщик MongoDB из Центра загрузок. (Вы выбираете Сервер совместной работы, затем текущую версию выпуска, затем Windows x64, затем пакет MSI.)
  2. Запустите установщик MongoDB, дважды щелкнув файл .msi, который вы загрузили на первом шаге (по умолчанию он перейдет в папку «Загрузки»).
  3. Следуйте инструкциям мастера установки, чтобы установить MongoDB как службу. (Вы выберете «Установить MongoDB как службу» и «Запустить службу в качестве пользователя сетевой службы. Я рекомендую оставить имя службы по умолчанию, каталог данных и каталог журналов.)
  4. Убедитесь, что MongoDB установлена ​​правильно, подключив mongo.exe оболочку к вашей запущенной MongoDB. Это можно сделать, дважды щелкнув файл mongo.exe, расположенный в C:\Program Files\MongoDB\Server\4.2\bin\.

Установите Angular CLI

Интерфейс командной строки (CLI) Nx зависит от скрытого интерфейса командной строки Angular. Итак, нам нужно установить Angular CLI. Это довольно просто. Мы просто запускаем в командной строке следующую команду:

npm install -g @angular/cli

Если вы используете macOS и получаете ответ об ошибке, это может быть связано с отсутствием разрешения на глобальную установку интерфейса командной строки. Запустите команду с правами администратора, введя:

sudo npm install -g @angular/cli

Вам будет предложено ввести пароль. После ввода пароля процесс установки должен продолжиться.

Создать рабочую область Nx

Мы создадим наше приложение в рабочей области Nx. Чтобы создать нашу рабочую область, мы должны использовать командную строку для перехода в каталог, в котором мы хотим сохранить нашу рабочую область, а затем выполнить следующее:

npm init nx-workspace my-nx-workspace

где my-nx-workspace - имя рабочей области, которую мы хотим создать.

Процесс подскажет нам четыре вопроса:

  1. Что создать в новой рабочей области? Мы выберем angular-nest, чтобы создать полнофункциональное приложение, содержащее интерфейс Angular и серверную часть NestJS.
  2. Имя приложения? Здесь мы должны ввести имя для нашего приложения.
  3. Формат таблицы стилей по умолчанию? Мы должны выбрать тот вариант, который нам больше нравится, но CSS - это стандартный вариант.
  4. Наконец, нас спросят, хотим ли мы поделиться аналитической информацией с Google. Мы должны выбрать тот вариант, который нам больше нравится.

npm теперь сгенерирует рабочее пространство Nx на основе нашего выбора. Когда все будет готово, наш каталог должен выглядеть так, как показано на рисунке 2.

Вот краткий обзор этого рабочего пространства:

  • Бэкэнд NestJS находится в apps/api.
  • Интерфейс Angular находится в apps/my-new-app.
  • По умолчанию сборки приложения будут помещены внутрь dist/.
  • Код, который используется во внешнем и внутреннем интерфейсе, будет находиться в libs/.
  • Зависимости, конечно же, будут помещены внутри node_modules/.

Обслуживание приложения локально

Наше рабочее пространство Nx поставляется с «предустановленным» работающим примером приложения Angular-NestJS. Давайте посмотрим на это приложение локально, чтобы увидеть его в действии.

Откройте командную строку и перейдите в каталог вашего рабочего пространства Nx. Затем запустите:

nx serve api

Это будет обслуживать API или серверную часть примера приложения. Другими словами, это запустит ваш сервер Node / NestJS. Если API работает успешно, вы должны увидеть что-то вроде этого:

Listening at http://localhost:3333/api

Это означает, что ваш веб-сервер разработки работает и прослушивает соединения от клиентов в http://localhost:3333/api. Затем давайте обслужим интерфейс Angular, выполнив:

nx serve my-new-app

где my-new-app - это имя приложения, которое вы ввели при создании рабочего пространства Nx ранее. Если интерфейс запущен успешно, вы должны увидеть что-то вроде этого:

Angular Live Development Server is listening on localhost:4200

Теперь откройте веб-браузер и введите http://localhost:4200 в адресную строку. Вы должны увидеть страницу приветствия примера приложения, как показано на рисунке 3.

Если ваш браузер показывает Сообщение: {«message»: «Добро пожаловать в api!»} под логотипом Nx, это означает, что интерфейс Angular успешно взаимодействует с серверной частью Node / NestJS.

Поздравляю! Теперь у вас есть работающее полнофункциональное приложение, работающее локально на вашем компьютере.

Итак, куда вы идете отсюда? Итак, вы начинаете создавать собственное приложение на основе этого начального приложения. Ознакомьтесь с разделом «Дополнительная литература и ресурсы» ниже, чтобы получить информацию, которая поможет вам создать собственное приложение.

Дополнительная литература и ресурсы

Вот список дополнительных ресурсов для создания вашего приложения MANNN:

  • Angular Docs - на сайте Angular есть отличная документация. Новичкам я настоятельно рекомендую прочитать раздел документации Основы, особенно Концепции Angular и Компоненты и шаблоны.
  • NestJS Docs - NestJS также исключительно хорошо документирован. Прочтите раздел Обзор их документации, чтобы получить фундаментальное представление о том, как создать серверную часть с помощью NestJS.
  • Nx - на сайте Nx есть полезная документация. Узнайте о преимуществах использования Nx в разделе Почему именно Nx?. Вы также можете пройти их учебное пособие, которое предназначено для демонстрации преимуществ использования рабочего пространства Nx.
  • MongoDB - узнайте больше о MongoDB, просмотрев их веб-сайт. Взгляните на это руководство на веб-сайте NestJS, чтобы узнать, как интегрировать MongoDB в серверную часть NestJS.
  • Node.js - при использовании NestJS необязательно глубоко разбираться в Node.js. Но если вы хотите узнать больше, я бы порекомендовал прочитать раздел О Node.js на веб-сайте Node.js. Возможно, наиболее важным понятием для понимания является использование асинхронного программирования в Node.js. Посмотрите эту статью на Digital Ocean или эту статью на веб-сайте Node.
  • Развертывание. Если вы хотите развернуть свое приложение в действующей производственной среде, я предлагаю попробовать Heroku. Ознакомьтесь с моей статьей о развертывании вашего приложения на Heroku. Вы можете пропустить первый шаг, поскольку вы уже выполнили его здесь.