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

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

Изучив сервисы, предоставляющие прогноз погоды, я выбрал 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 со следующим кодом:

файл bin/index.js
файл 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 в бекенд сервер.

App.jsx
App.jsx

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

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

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

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

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

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

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

weather-server

weather-react

Комментарии (16)


  1. Maksim-Inozemtsev
    17.10.2023 11:08

    Хекслет? Я сейчас тоже хочу такое приложение сварганить, только по курсам валют. Чисто для тренировки.


    1. ramil29 Автор
      17.10.2023 11:08

      Да, закончил курс фронтендера на хекслет. Когда пилил это приложение опирался на последний проект.


  1. MAXH0
    17.10.2023 11:08
    +1

    Раньше Хабр сравнивали с Тортом. Сейчас это крошки от торта... Маленькая крупица опыта начинающего специалиста.

    Печально, что это очередной комментарий. Ничего нового


  1. Aldres
    17.10.2023 11:08

    Если я правильно понял, то проблема была в том, что не хотелось плодить окна терминала? Почему бы тогда не запустить все сразу с:
    npm run myCoolScript1 & npm run myCoolScript2

    Либо воспользоваться, например, пакетом https://www.npmjs.com/package/concurrently


    1. ramil29 Автор
      17.10.2023 11:08

      Во время работы одного сервера второй сервер в том же терминале не запустится. То есть заработает myCoolScript1, а myCoolScript2 (второй сервер) не заработает параллельно с первым.


      1. Aldres
        17.10.2023 11:08

        Вполне успешно запускаю таким образом сервер ноды, и параллельно дев-сервер vite. Правда, делаю через pnpm, но вряд ли здесь будет разница


      1. Cere8ellum
        17.10.2023 11:08

        Всё прекрасно запускается, сегодня только монорепо, написанный "на коленке", ковырял.


  1. iddqda
    17.10.2023 11:08

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


    1. ramil29 Автор
      17.10.2023 11:08

      Да, дружище, на 3001 висит бекенд, и когда мы обращаемся к нему по адресу '/', он даёт нам файл index.html из папки build


  1. Cere8ellum
    17.10.2023 11:08

    В папку build помещает файлы не React, а бандлер, которым Вы проект собираете.


    1. ramil29 Автор
      17.10.2023 11:08

      Благодарю за поправку. Впредь буду иметь ввиду. Я новичок, новичкам свойственно ошибаться)


  1. belirofon
    17.10.2023 11:08
    +1

    Можно было использовать concurrently, либо писать на next.js там express уже под капотом.


    1. ramil29 Автор
      17.10.2023 11:08

      Да, оказывается можно, попробовал. +1 к моему знанию и опыту. Благодарю, в дальнейшем буду иметь ввиду.


  1. ivanmorda
    17.10.2023 11:08

    Необычайно гениально собирать Реакт и отдавать его клиенту!


    1. ramil29 Автор
      17.10.2023 11:08

      Это выглядит как сарказм. Поясни пожалуйста.


  1. ramil29 Автор
    17.10.2023 11:08

    Это выглядит как сарказм. Поясни пожалуйста.