Как связаны между собой сервер node.js и фронтенд react?
Я только начинаю изучать веб разработку. На этапе разработки я создаю react приложение на 3000 порту и сервер node.js на 80 порту. Чтобы просмотреть сайт захожу на 3000 порт, и соответственно react представляет страницу используя данные от сервера (axios). Но правильно ли я понимаю, что на этапе продакшена мы должны подключаться только к одному порту, на котором находится сервер, а он отправит html, css, js файлы при первом запросе на главную страницу а в дальнейшем будет отправлять JSON? Или как это организовано? И еще вопрос при использовании npm run build я получаю папку build, где много css и js файлов. Как эту папку надо связать с node.js. Допустим мы при первом запросе на сервер отправляем HTML файл. Но как клиент получит нужный ему css и js файл из кучи в папке build. Я хотел найти подобные посты или видео, однако не смог ничего найти. Может подскажите туториал или видео, где создается полноценный сервер node.js с папкой build. Везде нахожу только подход где создается react app на 3000 порту и сервер на другом порту.
Дополнительно:
правильно ли я понимаю, что на этапе продакшена мы должны подключаться только к одному порту, на котором находится сервер, а он отправит html, css, js файлы при первом запросе на главную страницу а в дальнейшем будет отправлять JSON?
В зависимости от настроек сервера и архитектуры твоего проекта. Экспресс может как отдавать хтмл/css,так и служить для обмена данными бека с фронтом(апи). Во втором случае за раздачу хтмл может отвечать какой-либо популярный веб-сервер, nginx/apache.
при использовании npm run build я получаю папку build, где много css и js файлов. Как эту папку надо связать с node.js
Никак. На стадии билда участие ноды в проекте заканчивается (в случае с фронтом, естественно. Если у тебя сам сервер, бекенд на ноде, то там нужно запускать это дело на хосте). Ты размещаешь свой код на веб-сервере, который его раздает в дальнейшем клиентам.
Допустим мы при первом запросе на сервер отправляем HTML файл. Но как клиент получит нужный ему css и js файл из кучи в папке build.
все как в обычном html. Есть точка входа в виде хтмл-файла, к которой твой билдер уже привязал все стили/скрипты. Все это отдается клиенту.
Это базовый сценарий. Есть другие способы, такие как SSR например. Но это уже другая история.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Node.js и React являются двумя популярными инструментами в мире веб-разработки, и они могут быть использованы вместе для создания мощных и масштабируемых веб-приложений.
Node.js - это среда выполнения JavaScript, построенная на движке V8 от Google Chrome, которая позволяет запускать JavaScript на сервере. Она обеспечивает возможность создания серверного кода на JavaScript, что делает его идеальным для создания веб-серверов, API и других серверных приложений.
React, с другой стороны, является JavaScript-библиотекой для создания пользовательских интерфейсов. Он позволяет разработчикам создавать компоненты, которые отображаются на веб-странице, и обеспечивает удобные средства для управления состоянием и рендерингом.
Как они связаны между собой? Node.js может использоваться для создания серверной части приложения, которая обрабатывает запросы от клиентов (браузеров) и взаимодействует с базой данных и другими внешними сервисами. React, в свою очередь, может использоваться для создания фронтенд-части приложения, которая отображает пользовательский интерфейс и взаимодействует с сервером через API.
Чтобы связать Node.js и React вместе, обычно используются AJAX-запросы или WebSocket для обмена данными между клиентом и сервером. Например, React-компоненты могут отправлять запросы на сервер с помощью fetch или axios, чтобы получить данные из базы данных или выполнить другие операции на сервере. Серверная часть приложения, написанная на Node.js, может обрабатывать эти запросы, выполнять необходимые действия и отправлять обратно клиенту ответ.
Таким образом, Node.js и React могут работать в тесном взаимодействии друг с другом, обеспечивая создание полноценного веб-приложения с отзывчивым пользовательским интерфейсом и мощным серверным функционалом.