Все, что вам нужно знать при разработке React Project с серверной частью NodeJS
Когда вы работаете над каким-либо проектом, способ настройки среды разработки так же важен, как упаковка и отправка для производства. Мы можем сэкономить много времени, если ваша среда разработки будет цельной и правильной. Вам необходимо максимально автоматизировать среду разработки, чтобы вы могли сосредоточиться на том, что важно, а именно на вашей функциональности.
В этом посте мы увидим, как мы можем настроить среду разработки для React с серверной частью NodeJS и как мы можем автоматизировать любые повторяющиеся задачи.
- Введение
- Предварительные требования
- Пример проекта
- Запуск React на порту 3000
- Запуск сервера NodeJS на порту 3080
- Взаимодействие между React и NodeJS
- Автоматизируйте свои задачи
- Запустите его с помощью Docker-compose
- Ключевые выводы
- Резюме
- Заключение
Вступление
Когда дело доходит до разработки приложения React с серверной частью nodejs, вы должны использовать два отдельных порта. Как показано на следующем рисунке, сервер React и nodejs работает на разных портах.
Вам необходимо использовать отдельные модули node_modules для обоих, и вам не следует комбинировать оба. React находится в папке my-app, а код, связанный с nodejs, находится в папке api.
Предпосылки
Есть некоторые предварительные условия для этой статьи. У вас должен быть установлен nodejs на вашем ноутбуке и ноу-хау http. Если вы хотите попрактиковаться и запустить это на своем ноутбуке, вам необходимо иметь их на своем компьютере.
Пример проекта
Это простой проект, демонстрирующий разработку и запуск приложения React с помощью NodeJS. У нас есть простое приложение, в котором мы можем добавлять пользователей, подсчитывать и отображать их сбоку, а также извлекать их, когда захотите.
По мере того, как вы добавляете пользователей, мы делаем вызов API на сервер nodejs, чтобы хранить их и получать те же данные с сервера, когда мы их извлекаем. Вы можете увидеть сетевые вызовы в следующем видео.
Вот ссылка на этот проект на Github. Вы можете клонировать его и запустить на своем компьютере.
// clone the project git clone https://github.com/bbachi/react-nodejs-develop-env.git
Запуск React на порту 3000
После клонирования проекта вам необходимо установить зависимости React и запустить код React на порту 3000 по умолчанию.
// change the directory cd my-app // install dependencies npm install // start the project npm start
Если вы хотите запустить проект на другом порту, вы можете сделать это с помощью флага порта export PORT=9999 && react-scripts start
React использует webpack dev-server / react-scripts для запуска всего приложения на порту 3000 и ищет любые изменения, которые вы вносите в код React. Как только вы измените код, вы увидите это изменение в браузере. Для этого не нужно выполнять никаких дополнительных настроек.
Запуск сервера NodeJS на порту 3080
Давайте запустим сервер NodeJS на порту 3080. Вы можете выбрать любой порт, какой захотите. Вот код NodeJS.
Нам нужно установить nodemon для автоматического перезапуска сервера nodejs, если вы внесете какие-либо изменения.
Если вы посмотрите на раздел скриптов в приведенном выше файле. Мы можем настроить nodemon с помощью простой команды. nodemon ищет любые изменения в server.js и перезагружает изменения на порт сервера 3080. Если вы хотите выполнить дальнейшую настройку, просмотрите подробности здесь.
Взаимодействие между React и NodeJS
На этапе разработки приложение React работает на порту 3000 с помощью приложения create-response-app и API nodejs, работающего на порту 3080.
Между этими двумя должно быть какое-то взаимодействие. Мы можем проксировать все вызовы API на API nodejs. Приложение Create-react-app предоставляет некоторые встроенные функции и, чтобы указать серверу разработки проксировать любые неизвестные запросы к вашему серверу API в разработке, добавьте поле proxy в ваш package.json файла React. Взгляните на нижеприведенный package.json. Помните, что вам нужно поместить это в файл React UI package.json.
После этого все вызовы, начинающиеся с / api, будут перенаправлены на http: // localhost: 3080, где запущен API nodejs.
После настройки вы можете запустить приложение React на порту 3000, а API nodejs на 3080 по-прежнему заставит их работать вместе.
Вот файл службы пользователя, в котором вы выполняете вызовы API.
Автоматизируйте свои задачи
Вам нужно автоматизировать все повторяющиеся задачи с помощью какого-нибудь конструктора или средства выполнения задач. Мы используем gulp как средство выполнения задач. Например, построение проекта для продакшена - одна из задач разработчиков. Мы используем ниже gulpfile для автоматизации. Вы можете создавать папки, перемещать файлы, запускать команды и многое другое. После того, как у вас есть gulpfile.js, вам нужно выполнить эту команду gulp.
Запустите его с помощью Docker-compose
В настоящее время все работает на Docker и переходит в облако. Их также важно запускать в Docker. Мы можем разработать с помощью docker-compose, в котором React и nodejs работают как разные службы и взаимодействуют друг с другом.
Прежде всего, нам нужно определить два файла Docker для api и React UI, чтобы docker-compose.yml брал эти файлы и запускал их как службы.
React UI Dockerfile
NodeJS API Dockerfile
Файл Docker Compose
Вот файл docker-compose.yml в корне проекта, который берет Dockefile из обоих и создает службы, так что вы можете запустить всю установку с помощью одной команды.
// build with no cache docker-compose build --no-cache // start the services docker-compose up // list the services docker-compose ps // list the containers docker ps // stop services docker-compose stop
При разработке с помощью docker-compose нам нужно использовать имя службы при проксировании вызовов API. Например, нам нужно использовать http: // node-api: 3080 вместо http: // localhost: 3080.
Ключевые выводы
- Когда серверная часть nodejs участвует в вашем проекте реакции, вы должны запускать их в отдельных портах, чтобы ускорить разработку.
- Автоматизируйте любые повторяющиеся задачи, такие как строительные проекты для производства.
- Всегда используйте отдельные модули node_modules для node и React. Никогда не пытайтесь сочетать и то, и другое.
Резюме
- Настройка среды разработки так же важна, как сборка и упаковка для производства.
- В среде разработки React и сервер узла работают на разных портах.
- React работает на порту 3000, а сервер узла - на порту 3080. Вы можете выбрать порты.
- React использует сервер разработки webpack для поиска любых изменений в файлах.
- Мы используем nodemon для автоматического перезапуска кода nodejs.
- Приложение Create-response-app предоставляет возможность проксировать все вызовы API на сервер nodejs.
- При разработке с помощью docker-compose нам нужно использовать имя службы при проксировании вызовов API. Например, нам нужно использовать этот http: // node-api: 3080 вместо http: // localhost: 3080
Заключение
Ваша среда разработки должна быть эффективной и бесперебойной, чтобы ускорить вашу разработку. Автоматизируйте любые повторяющиеся задачи.
