Изображение для статьи создано при помощи нейросети Kandinsky

Всем доброго времени суток, друзья.

На днях мне захотелось поэкспериментировать и опробовать в работе следующую связку: написать простой фронтэнд на Angular, который бы делал запросы и обращался к бэкенду на Node.js. И frontend, и backend мне нужно было поднять на локальной машине и организовать между ними простое взаимодействие. Я использовал @angular/core версии 17.0.3, версию Node.js v21.7.1 и версию NPM 10.5.0. А основная суть эксперимента имела следующие цели:

• оценить быстроту создания и организации связки frontend-backend на примере какой-то простой логики взаимодействия фронта и бэкенда.
• на бэкенде, работающем на Node.js, применить настройки CORS, чтобы запросы в браузере от фронтэнда к бэкенду проходили на моей локальной машине без каких-либо проблем и ошибок
• опробовать механизм JSON Web Token (JWT) для аутентификации клиента на сервере. В моём примере сервер на Node.js должен при корректном запросе от клиента создавать токен и подписать его некоторым тестовым секретным ключом, а затем передать клиенту (frontend на Angular), предоставляя клиенту возможность использовать полученный токен в дальнейшем для следующих запросов к серверу и подтверждения подлинности некоторого тестового аккаунта.
• написать статью с заметками самому себе и всем заинтересованным читателям о пройденном мной пути, чтобы иметь возможность быстро вспомнить основные шаги и при необходимости повторить их потом.

В статье я по шагам опишу все основные действия, которые мне потребовалось сделать, а также в конце приложу готовый архив с проектами для frontend и backend, которые можно будет просто скачать и запустить локально (конечно, при условии наличия установленных инструментов и фреймворков требуемых версий, о которых я расскажу чуть ниже). Также предполагается, что у читателя уже установлены среды разработки Microsoft Visual Studio Code и/или JetBrains IntelliJ IDEA, т.к. я не буду в деталях разбирать процесс их установки. А вот шаги по установке всех остальных инструментов (NVM, Angular CLI и др.) и NPM-зависимостей я опишу в статье.

Итак, начнём с предусловий и использованного мной набора инструментов, который нужен для организации планируемой связки frontend-backend.