Як розгорнути додаток create-react за допомогою експрес-сервера для Heroku

Ви використовували інструмент cli-create-react app для створення свого додатка React, а тепер ви хочете додати бекенд, такий як Express. Як ви це робите?

Є кілька способів вирішити це:

Розташуйте їх окремо: Розгорніть програму Express на одній машині та програму React на іншій машині.

Використовуйте проксі: обидва додатки розміщуються разом, але обслуговуються різними серверами.

Зберігання їх разом: Попросіть файли Frontend React та файли Backkend Express на одному сервері, а Express на додаток до API-запитів обслуговує ваші файли React.

Тут ми зупинимося на третьому варіанті. Разом ми створимо просте додаток, яке використовує Express для створення API-інтерфейсу, а також подавати файли React. Тоді ми розгорнемо його на Хероку. Якщо у вас немає облікового запису Heroku, підпишіться безкоштовно! Крім того, встановіть інструменти кліпу Heroku. (Крім того, просто $ brew встановіть heroku)

Створимо наш додаток!

Додаток Backend Express

Спочатку ми створимо наш кореневий каталог. Я назвав мій приклад, але смію бути творчим. Потім ініціалізуйте його NPM або пряжі.

$ mkdir crae-example
$ cd crae-example
$ npm init

Встановіть пакети за допомогою NPM або пряжі, а потім зробіть наш індексний файл.

$ npm я висловлюю корова прогулянку
$ touch index.js

Ми хочемо створити наш сервер Express для обслуговування двох маршрутів. Основний маршрут, який поверне корову, що говорить "Привіт, світ!", І той, який приймає власні дані. Оскільки це проста програма, ми збережемо все в одному файлі, хоча на практиці набагато краще модулювати.

const express = вимагати ('express')
const cowsay = вимагати ('cowsay')
const cors = вимагати ('cors')
// Створення сервера
додаток const = express ()
// Обслуговуємо наш маршрут / корівку, яка повертає власну корова, що розмовляє
app.get ('/ api / корова /: сказати', cors (), async (req, res, next) => {
  спробуйте {
    const text = req.params.say
    const moo = cowsay.say ({текст})
    res.json ({moo})
  } улов (помилка) {
    наступний (помилка)
  }
})
// Обслуговуємо наш базовий маршрут, який повертає корову Hello World
app.get ('/ api / корова /', cors (), async (req, res, next) => {
  спробуйте {
    const moo = cowsay.say ({текст: 'Привіт, світ!'})
    res.json ({moo})
  } улов (помилка) {
    наступний (помилка)
  }
})
// Виберіть порт і запустіть сервер
const PORT = process.env.PORT || 5000
app.listen (PORT, () => {
  console.log (`Змішування його на порт $ {PORT}`)
})

Це все для нашого index.js. Додамо стартовий скрипт у наш package.json і перевіримо наш єдиний маршрут.

"скрипти": {
    "test": "echo \" Помилка: тест не вказано \ "&& exit 1",
    "start": "вузол index.js"
  },

Крім того, ви можете використовувати nodemon index.js для прослуховування будь-яких змін. Почнемо наш додаток:

$ npm початок

Ви повинні побачити журнал консолі у своєму терміналі.

Наше додаток працює на порту 5000!

Потім перейдіть до http: // localhost: 5000 / api / корова. Це хитрість, але це наша корова з текстовим текстом!

Це зовсім не схоже на корову ...

Розгортання в Heroku

Це добре використовувати на початку, переконайтесь, що все працює, а потім продовжуйте додавати. Давайте ініціалізуємо сховище git, щоб ми могли розгорнутись до Heroku.

$ git init
$ echo node_modules> .gitignore
$ git add -A
$ git commit -m "Перша фіксація"

Якщо припустити, що ви встановили інструменти CLI Heroku, тепер ми можемо використовувати його для розгортання. Якщо ви ще цього не зробили, увійдіть у Heroku.

$ heroku логін // введіть свої облікові дані
$ heroku створити crae-example
Це було легко, чи не так?

Тепер нам просто потрібно підштовхнути наш код до Heroku.

$ git push heroku master
Це завжди приємно бачити зроблене в консолі.

Якщо ми переходимо до https://crae-example.herokuapp.com/api/cow, нам слід побачити той самий химерний вихід, як вище. Наша корова (додаток) зараз живе в Інтернеті!

Додаток Frontend React

Нам потрібен інтерфейс, щоб показати нашій корові, чи не так? Давайте встановимо інструмент кліпу create-react app.

$ npm я -g create-react-app

Всередині нашого кореневого каталогу, де розміщено наш додаток Express, давайте створимо наш додаток:

$ create-react-app client

Оскільки це саме по собі є додатком, нам потрібно проксі API-запити від додатка до інтерфейсу до нашого додатка Express. На щастя, це легко зробити, додавши наступне в client / package.json.

"проксі": "http: // localhost: 5000"

Що це робиться, це коли ми закликаємо / api / корову з боку клієнта, замість того, щоб перейти на http: // localhost: 3000 / api / корова, воно буде проксі до http: // localhost: 5000 / api / корова.

Далі ми замінимо src / App.js на таке:

import React, {Component} з 'реагувати'
імпорт './App.css'
клас додаток розширює компонент {
  state = {
    корова: '',
    текст: ''
  }
компонентDidMount () {
    this.fetchCow ()
  }
fetchCow = async () => {
    const відповідь = очікувати отримання (`/ api / корова`)
    const початковаCow = очікувати відповідь.json ()
    const корова = початковаCow.moo
    this.setState ({корова})
  }
customCow = async evt => {
    evt.preventDefault ()
    const text = this.state.text
    const відповідь = очікувати отримання (`/ api / корова / $ {текст}`)
    const custom = очікувати response.json ()
    const корова = custom.moo
    this.setState ({корова, текст: ''})
  }
handleChange = evt => {
    this.setState ({[evt.target.name]: evt.target.value})
    console.log (this.state.text)
  }
render () {
    повернути (
      
        

Текст корова. Му

         {this.state.cow}         <форма onSubmit = {this.customCow}>           <мітка> Спеціальний текст корівки:           <введення             type = "текст"             name = "текст"             value = {this.state.text}             onChange = {this.handleChange}           />                           
    )   } }
експорт за замовчуванням додаток

Це схоже на багато, але це не так! Ми просто називаємо fetchCow в нашому компонентіDidMount, який дасть нам нашу корову «Hello World» і встановимо її у стан, щоб ми могли відобразити її на візуалізації. Ми також надаємо форму введення, яка дозволяє користувачам вводити текст у власному рядку для виведення корів.

Необов’язково: update src / App.css, я рекомендую принаймні додати пробіл: попереднє, що дозволить зберегти всі пробіли замість стиснення кількох пробілів в одне. Для корови це дуже важливо!

.App {
  дисплей: флекс;
  флекс-напрямок: стовпчик;
  вирівнювати-елементи: центр;
  маржа: 2em;
  пробіл: перед
}
.App-код {
  маржа: 2em;
  маржа-верх: 0;
  підкладка: 0;
  вирівнювання тексту: зліва;
  розмір шрифту: 2em;
}
h3 {
  розмір шрифту: 2,5ем;
  маржа: 1ем;
  підкладка: 0;
  межа: 0
}
кнопка {
  розмір шрифту: 1em;
  сімейство шрифтів: "Courier New", монопростір;
  межа: 2px суцільний # 000;
  підкладка: 10px 25px;
}
кнопка: наведіть курсор {
  фон-колір: rgb (255, 235, 59);
}
кнопка: активна {
  фон-колір: rgb (255, 244, 142);
}
форма {
  дисплей: флекс;
  флекс-напрямок: стовпчик;
  сімейство шрифтів: "Courier New", монопростір;
}
введення {
  розмір шрифту: 1,5ем;
  margin-top: 1em;
  маржа-нижня: 1ем;
  облямівка: 1 пікс
}

Оскільки це проста програма, ми визначаємо атрибути css безпосередньо на елементах, а не вказувати класи (не рекомендується). Щоб перевірити, що все працює, нам потрібно запустити обидві наші програми (з кореневого каталогу):

$ npm запуск запуску
$ cd клієнт
$ npm запуск запуску

Перейдіть на http: // localhost: 3000, і ви повинні побачити це:

Це працює! Привіт Світ!

І останнє: нам потрібно оновити наш index.js в кореневому каталозі, щоб обслуговувати наші файли React, як тільки вони з'являються у виробництві:

const шлях = вимагати ('шлях')
// Подавайте статичні файли з додатку React frontend
app.use (express.static (path.join (__ dirname, 'client / build')))
// Все, що не відповідає зазначеному, надсилайте назад index.html
app.get ('*', (req, res) => {
  res.sendFile (path.join (__ dirname + '/client/build/index.html'))
})

Остаточний зліт

Перш ніж ми знову зможемо розгорнути, нам спочатку потрібно налаштувати Heroku для створення програми frontend React після того, як ми підштурхнемо весь наш код. Це тому, що ми явно вказали вище для обслуговування статичних файлів від клієнта / збірки. Давайте налаштуємо пакет нашого кореневого каталогу package.json в останній раз:

"скрипти": {
    "test": "echo \" Помилка: тест не вказано \ "&& exit 1",
    "start": "вузол index.js",
    "heroku-postbuild": "CD-клієнт & & npm встановити & & npm запустити збірку"
  },

Ми додаємо сценарій heroku-postbuild, щоб він міг запустити вбудований метод збирання create-react-додаток, який дає нам після того, як Heroku буде зроблено власне складання. Тепер ми можемо розгорнути!

$ git add -A
$ git commit -m 'Розгорнути зліт!'
$ git push heroku master

Купа речей відбудеться в терміналі. але наприкінці ви повинні побачити той самий URL, що і раніше. Перейдіть до URL-адреси Heroku і перегляньте, як працює ваша програма! Ви можете грати з моїм на https://crae-example.herokuapp.com/. Вітаємо! У вас є додаток React і Express у виробництві!

Перевірте код тут, на Github. Щасливого кодування! :)