Я как обычно учился кодить, и вдруг заметил что телеграм выпустил веб апи и теперь там есть фронт... На тот момент я уже владел React, Flask и Django, и решил повысить планку с помощью FastAPI. Веря в свои силы, я установил FastAPI и aiogram. Очевидно, мне следовало бы использовать нативные методы Telegram API, но aiogram предоставляет множество удобных функций, которые ускоряют разработку. Django и Flask используют шаблонизаторы (я использовал Jinja2), что означает, что код, выполняемый в браузере (HTML, JS, CSS, TS и т. д.), отправляется непосредственно с сервера. Таким образом, у такого приложения нет отдельного сервера для фронтэнда. однако Fast-api и React, нуждаются в отдельных серверах ... Я понимаю, что найдутся люди, которые скажут: "Зачем использовать отдельный сервер для React, если можно добавить реактивность с помощью Knockout.js и создать веб-приложение на одном сервере?" - Да, это возможно, но мне кажется, что лучше использовать нормальные технологии, а не костыли на костылях, чтобы к моменту завершения проекта у вас был ценный опыт в резюме, а не повод для пенсии)) Я сталкивался с корпоративными проектами, написанными с использованием устаревшего Knockout,js и Python 2, все на одном монолите. Схема работает, к тому же можно нанимать джунов и платить им меньше, ведь всех обучают Django на курсах). Вот у нас есть два сервера - FastAPI и React. Далее нам нужно их связать с Telegram API. Рассмотрим конкретный пример такой связи: разумеется, FastAPI и Telegram взаимодействуют через webhook. Чтобы их свести вместе, мы отправляем запрос Telegram на сервер, в котором указываем публичный адрес, полученный от ngrok, и токен бота из файла .env. В моем случае, я добавил адрес ngrok в .env, и FastAPI автоматически устанавливает связь с Telegram при запуске. Основная проблема заключается в том, что ngrok, даже в платной версии, поддерживает только один адрес, а у меня фронтэнд работает на отдельном порту. Однако здесь на помощь приходит localhost.run. Она имеет схожий функционал с ngrok, но настраивается чутка сложнее. Вот план которого я бы придерживался  Запускаем localhost.run на порту 3000 и добавляем адрес в окружение бэка запускаем React на порту 3000 Запускаем ngrok на порту 8000 и добавляем адрес в окружение Запускаем Fast-api локально на порту 8000 План простой и надежный, как швейцарские часы.  Заходим на https://admin.localhost.run/ регаемся\логинимся.  Делаем shh ключ  ориг.  инструкция на английсском. Ключ состоит из 2х частей публичной и приватной. заходим в терминал и пишем  *в комментарии рекомендуют указывать емейл выбираем название ключа. и запоминаем путь. если не вводить имя то ключи будут сгенерированы с дефолтными именами id_rsa и id_rsa.pub идем в  директорию ключа, жмем ls -1 чтобы убедиться что пришли в нужное место и ключи готовы и ждут нас.  id_rsa и id_rsa.pub это приватный и публичный ключи соответсвенно. Открываем id_rsa.pub  с помощью vim или nano. Если нет vim то стаvim vim)) копируем все что внутри(начиная с shh и до конца текста)дальше выходим из вима для этого жмем “:” и печатаем q! и жмем ентыр.  идем в браузере на https://admin.localhost.run/#/keys вводим там этот ключ дальше идем в консоль Что означет эта команда можнопочтитать в докуменции сервиса Получаем наш белый адрес на порту 3000 добавляем полученный адрес в .env бэка  теперь настало время REACT Итак чтобы чтобы обходиться без танцев, я сделяль виззард скрипт. Отмечу что он дает выбрать js/jsx, yarn/npm, и создает докер и докер компоуз с прокинутыми портами, а весь код вынесен в Volume поэтому проект не требует постоянной пересборки.  Итак, создаем create_react_compose_app.sh или скачиваем с github. Делаем его исполняемым , на мак это делается вот так: Запустим скрипт: Запускаем докер, после вводим в консоль  И вот приложение открыто на порту 3000, теперь браузере идем по адресу который получили в localhost.run Идем в  Открываем index.html и добавляем туда библиотеку телеграм  И заменим   На  В src/App.js проверяем по адресу который дал localhost.run идем в браузере на https://ngrok.com/  Регаемся/логинимся идем в https://dashboard.ngrok.com/get-started/setup  делам все по инструкции:  разархивировать zip подставить ключ в конфиг, удобно что в документации сразу даются персональные команды с подставленным ключом   запускаем ngrok на порту 8000 заходим в исходную папку создадим папку Fast-API используя команду создадим main.py и README.md, .env c помощью уже известной команды  touch. Легко запомнить про неё есть песня у Daft Punk - Touch   создаем  фаил и кладем туда адрес из localhost.run , ngrok , токенбота ... Да, нормальные пацаны юзают Poetry, но этот текст исключительно для ламеров, если готовы по уму делать сразу то вперед, тут будет через venv.  активируем его  обновляем  ставим uvicorn ставим Fast-api ставим aiogram ставим python-dotenv, это  один из тех пакетов которые в pip называются не так как импортируются  при помощи уже известной команды touch создаем  README.md в README.md прописываем команду старта  открываем main.py  прописываем импорты и загружаем переменные из .env создаем приложение и прописываем проверочную функцию  запускаем сервер uvicorn  с приложением app = FastAPI командой из README.md Переходим на BACK_URL в браузере и проверяем, что все работает. Убедимся, что мы правильно установили и импортировали файл .env, и также правильно запустили FastAPI. импортируем aiogram и создаем функции обработчики сообщений И так далее  добавляем обработчик команды старт в телеграм добавлю favicon.iso и вот полный код   сохраняем, запускаем, проверяем В данной статье я описал настройку веб-приложения в контексте #Telegram и #Web_Apps for Bots. При желании, можно также включить использование FAST-API в контейнере с помощью #poetry, но это уже не для новичков. Кроме того, мы также коснулись вопросов #ssh ключей, #react, #python, #fast-api, #docker, #docker-compose, #ngrok, #localhost.run, #venv, #uvicorn и использовали #shell-script.  Таргетолог