Как настроить React и Node JS в проекте

Автор оригинала: Ganpat kakar.

Привет всем, я Ганпат Какар. Я являюсь инженером по программному обеспечению с опытом работы в 4 годах в интернет-разработке и Backend веб-разработки.

Здесь мы собираемся настроить реагировать js plus узел js, полный стек окружающей среды.

Настройка реагирования: –

Откройте свой рабочий каталог и запустите эти команды в терминале =>

1. mkdir hello_fullstack.
2. NPM I -G Create-React-App
3. CD Hello_Full.
4. Create-ract-app клиент
5. CD-клиент/
6. Начнем NPM
7. Откройте Package.json и добавьте эту строку перед зависимости: – “Прокси”: “http://localhost: 3001/”, SOU наша папка клиента Package.json будет выглядеть: –

{
 "name": "client",
 "version": "0.1.0",
 "private": true,
 "proxy": "http://localhost:3001/",
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1",
 "react-scripts": "1.1.4"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test - env=jsdom",
 "eject": "react-scripts eject"
 }
}

Наша настройка raction App выполняется. Нажмите URL Http://localhost: 3000/в вашем любимом браузере.

Узел JS Setup (Express Framework): –

Мы продолжим с предыдущим терминалом React Setup:

1. CD .. (навигация терминала к Hello_FulStack)
2. mkdir server.
3. NPM установить экспресс-генератор -G
4. Express – – сервер
5. CD Server
6. Установка NPM
7. NPM Install Neademon (Nodemon сохранит наш сервер запущен, поэтому мы надо начать сервер после того, как сделали все изменения)
8. Откройте Package.json из папки сервера и найдите скрипт

"scripts": {
 "start": "node ./bin/www"
 }

изменить этот код в

"scripts": {
 "start": "nodemon ./bin/www"
 } 

Наш узел js => package.json будет выглядеть: –

{
 "name": "server",
 "version": "0.0.0",
 "private": true,
 "scripts": {
 "start": "nodemon ./bin/www"
 },
 "dependencies": {
 "cookie-parser": "~1.4.3",
 "debug": "~2.6.9",
 "ejs": "~2.5.7",
 "express": "~4.16.0",
 "http-errors": "~1.6.2",
 "morgan": "~1.9.0",
 "nodemon": "¹.17.5"
 },
 "main": "app.js",
 "devDependencies": {},
 "keywords": [],
 "author": "",
 "license": "ISC",
 "description": ""
}

Наш узел JS (Express Setup выполняется). Но прежде чем мы начнем наш серверный код, мы должны изменить несколько настроек для узла JS. Откройте свой любимый редактор и открыть папку HELLO_FULLSTACK. Перейдите к серверу/bin/www => Здесь вы можете увидеть строку “var (process.env.port || ‘3000’);” Итак, измените порт от 3000 до 3001 или любого другого порта №, но не 3000. Поскольку мы используем порт NO 3000 для APP. Итак, теперь наш реагирование и узлы JS работают, но они не подключены, как React, и Node JS не могут выполнять связь. Здесь мы работаем над прокси-частью, которая будет работать объединение наших проектов React и Node JS. Так что обратно в наш терминал => Hello_FullStack каталог

1. NPM init -y Это создаст файл package.json. Откройте свой редактор и отредактируйте этот файл Package.json с подведем следующий код. (Обратите внимание на этот файл Package.json находится за пределами папки сервера и клиента)

{
 "name": "kmail",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "client": "cd client && npm start",
 "server": "cd server && npm start",
 "start": "concurrently - kill-others \"npm run server\" \"npm run client\""
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "concurrently": "³.5.1"
 }
}

А в Terminal Run Command => NPM Установить Hurreee !!!!! Наша настройка сделана. Теперь его время для проверки нашего проекта React + Nodejs работает. Перейдите к папке проекта (Hello_FullStack) в нашем терминале и запустите команду =>

npm start

Наш проект регулярно работает на браузере http://localhost: 3000/Наша реакция работает и на http://localhost: 3001/наш экспресс работает. Теперь сделайте несколько вызовов AJAX из приложения React, чтобы позвонить нашему серверу API. Удачи с вашим развитием. Спасибо за чтение.