Следующим в моей серии статей об очень забавных вещах с Visual Studio Code и Dev Containers я собираюсь настроить внешний интерфейс Angular и, конечно же, создать среду разработки с использованием Docker и Visual Studio Code.

Вы можете найти код, сопровождающий эту статью, на моем GitHub.

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

  • Согласованность во всех средах разработки, что означает конец «хорошо, это работает на моей машине».
  • Нанять новых разработчиков невероятно просто — они просто загружают репозиторий, и все зависимости для разработчиков уже есть.
  • Обновить каждую машину разработчика также невероятно просто.
  • Требования для сборки и запуска проекта на машине разработки выражаются в виде кода и перемещаются вместе с репозиторием. (Расширение понятия «инфраструктура как код» на среду разработки)
  • Вам не нужно «загрязнять» свою машину зависимостями для каждого отдельного проекта, над которым вы работаете.
  • Это не обязательно. Если какой-либо разработчик в команде по какой-либо причине испытывает отвращение к Docker, он может просто отказаться и не использовать функциональность Docker.
  • Среда, в которой вы работаете, адаптирована к проекту, над которым вы работаете.

Предпосылки

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

Начиная

Откройте терминал WSL, создайте новую папку и откройте VSCode с помощью code ..

Когда откроется VSCode, нажмите F1 и найдите Add Development Container Configuration Files.

Теперь найдите Node.js & TypeScript

Выберите свою версию — важно использовать версию 14, так как в настоящее время существуют проблемы совместимости с версией 16. [ПОДТВЕРЖДИТЕ, ЧТО ЭТО ЕЩЕ АКТУАЛЬНО]

Никаких дополнительных функций добавлять не нужно, просто нажмите «ОК».

VSCode появится следующее

(Подсказка: если он не появляется, нажмите F1 и найдите Rebuild and Reopen in Container )

Нажмите «Повторно открыть в контейнере». Это может занять некоторое время в первый раз, но в последующие разы это будет происходить намного быстрее. Как только это будет сделано, нижний левый угол VSCode должен выглядеть так:

Итак, теперь мы знаем, что работаем в контейнере. Не совсем очевидно, что что-то изменилось, но если вы откроете терминал, вы увидите, что это не окна, и не ваш WSL.

На этом этапе вы можете попробовать создать новый проект Angular, но среда Docker понятия не имеет, что такое Angular, поэтому нам есть над чем поработать…

Установить угловой

Откройте файл Dockerfile (находится в папке .devcontainer), раскомментируйте строку для установки пакетов глобальных узлов и добавьте файл angular cli. Это должно выглядеть так:

# [Optional] Uncomment if you want to install more global node packages
RUN su node -c "npm install -g @angular/[email protected]"

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

Прежде чем вы увидите изменения, отраженные в терминале, вам необходимо выйти и снова войти в среду удаленного контейнера (нажмите F1).

Вернувшись в среду контейнера, откройте терминал и введите ng --version, чтобы подтвердить, что cli установлен.

Хорошо пойти!

Создайте новое приложение с помощью ng new test-app (не беспокойтесь о параметрах, просто выберите значения по умолчанию).

cd в папку cd test-app и соберите приложение ng build, чтобы увидеть следующий вывод.

А теперь запустите приложение ng serve, а затем перейдите по адресу http://127.0.0.1:4200/ и посмотрите, как работает приложение!

Расширения

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

Перейдите в файл devcontainer.json и добавьте следующие расширения:

"lucono.karma-test-explorer",
"angular.ng-template",
"johnpapa.angular2",
"alexiv.vscode-angular2-files",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"shardulm94.trailing-spaces"

Не стесняйтесь добавлять что-то еще, к чему вы, возможно, уже привыкли. Вышеизложенное является хорошим началом для разработки Angular, но оно ни в коем случае не является исчерпывающим.

Тестирование

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

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

Эти ошибки вызваны тем, что у образа докера нет браузера. Установите Chrome, добавив в Dockerfile следующее:

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -y google-chrome-stable

Опять же, вам нужно выйти из среды Docker и снова войти в нее, чтобы увидеть эти изменения. Нажмите F1, повторно откройте папку в WSL, затем повторите то же самое, чтобы вернуться в среду Docker.

Нам также нужно настроить Karma для запуска Chrome в автономном режиме. Зайдите в файл конфигурации Karma и замените browsers:['Chrome'] на

browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
  ChromeHeadlessNoSandbox: {
    base: "ChromeHeadless",
    flags: [
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ]
  }
},

Теперь запуск ng test должен привести к прохождению тестов!

Обозреватель тестов

Мы добавили расширение karma Test Explorer, поэтому давайте добавим для него конфигурацию и заставим его работать!

Создайте папку с именем .vscode в корне проекта, добавьте в эту папку файл с именем settings.json и вставьте следующее:

{
"karmaTestExplorer.projectRootPath": "test-app",
}

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

(Если вы получите здесь ошибку, вам нужно будет закрыть и перезапустить VSCode, а затем повторно войти в среду Docker.)

Выводы

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

  • Среда разработки Angular на основе Debian.
  • Доступ к инструментам командной строки Angular.
  • Индивидуальный код Visual Studio с расширениями специально для разработки на Angular.
  • Базовый проект / проект по умолчанию, который можно использовать по мере необходимости.
  • Модульные тесты, которые запускаются через командную строку и через обозреватель тестов

Следующие шаги могут быть

  • Добавьте сквозное тестирование с помощью Cypress (смотрите это место!)
  • Добавьте учетные данные git — в настоящее время я взаимодействую с git на хосте.

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