Небольшое React приложение со своим бекендом, запускаем с одного терминала

Привет, Хабр!

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

Изучив сервисы, предоставляющие прогноз погоды, я выбрал API Яндекс погоды. У Яндекс погоды есть несколько тарифных планов. Для моих целей подходит бесплатный тариф с лимитом запросов 50 раз в сутки. Этого более чем достаточно, для того чтобы понять принципы REST Api.

Итак, регистрируемся в кабинете разработчика Яндекс, подключаем API Погоды, получаем API ключ. Для того, чтобы получить объект с прогнозом погоды, нужно выполнить GET запрос на сервер, указав в параметрах координаты интересующего населенного пункта, в заголовке необходимо указать API ключ. Я надеялся написать React приложение, которое будет делать запрос на сервер Яндекс погоды, получать ответ и рендерить страницу с данными. На этом этапе я столкнулся с первой проблемой, а именно с тем, что нельзя совершать GET запросы с браузера напрямую на сервер Яндекс погоды, так как данные действия не безопасны, злодеи могут украсть API ключ из инструментов разработчика.

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

1. Браузер делает GET запрос на промежуточный сервер;

2. Промежуточный сервер, при получении GET запроса от браузера, делает GET запрос на сервер Яндекс погоды, получает объект и отправляет ответ браузеру с этим объектом;

3. Браузер получает объект и рендерит страницу с данными.

Поискав в интернете информацию, я нашел реализацию решения подобных задач, используя Express js. Но меня не устраивало то, что нужно было в одном терминале запустить React приложение, а во втором терминале запустить бекенд сервер. Но, более подробнее изучив документацию, я узнал что в Express можно предоставить статические файлы. React, в свою очередь, при сборке приложения, в директорию build как раз так и кладёт эти файлы. То что нужно! Вперед! Экспериментируем!

Пишем сервер с помощью Express js

1. Создаем директорию server

2. Инициализируем проект npm init

3. Добавляем в проект пакет express npm i express

4. В корне проекта добавляем файл bin/index.js со следующим кодом:

20 строка кода - передаем серверу путь со статическими файлами, в нашем случае /frontend/build/

22 строка кода - при обращении к серверу по адресу '/' сервером в ответ отправляется файл index.html

26 строка кода - при обращении к серверу по адресу '/api' сервер делает GET запрос на сервер Яндекс погоды, оттуда получившим ответом в отвечает браузеру.\

В paskage.json добавляем скрипт для запуска сервера "start": "node ./bin/index.js".

Пишем React приложение:

1. В корне проекта создаем React приложение npx create-react-app frontend

2. В package.json нашего React приложения добавляем строку "proxy": "http://localhost:3001", чтобы наши запросы уходили на порт 3001 в бекенд сервер.

В компоненте React приложения делаем запрос по адресу '/api', получаем ответ и передаем его через контекст другим компонентам.

React приложение готово? Запускаем:

1. В корне React приложения выполняем команду npm run build для сборки.

2. Перемещаемся вверх cd .. в корневую директорию проекта.

3. В корневой директории проекта выполняем команду npm start, запускается сервер.

4. Открываем браузер и переходим по адресу http://localhost:3001, наслаждаемся.

Ссылки на репозитории:

weather-server

weather-react