Предлагает простой способ работы с приложением create-react-app и серверной частью Express. Это поможет вам пройти путь от первоначальной настройки до обслуживания приложения на Heroku 🚀 .

Эта статья родилась из разочарования, которое я испытал при настройке своей файловой структуры. В результате я хотел поделиться своим опытом создания собственной установки, потому что я нашел несколько руководств, в которых несколько файлов package.json расположены в разных местах, что может сбить с толку начинающих программистов. Хотя это может быть не лучшая настройка для больших приложений, я нашел это более интуитивным подходом и решил поделиться.

Предпосылки:

  • Опыт работы с React (не обязательно, но определенно полезно, если вы играли с React раньше)
  • Опыт работы с Node/Express серверами
  • npm и node установлены на вашем ноутбуке
  • Текстовый редактор, такой как атом
  • Установлен интерфейс командной строки Heroku.

У приложения Create-React могут быть свои критики, но это отличный шаблон для начинающих, поскольку он снимает когнитивную нагрузку с файлов конфигурации и позволяет быстро начать работу с React. Установите приложение create-реагировать глобально.

npm install -global create-react-app
npx create-react-app name-of-app
cd name-of-app
npm init
npm start

Теперь у вас должна быть полностью рабочая плита React ✨

Здорово! Но мы хотим добавить к нему серверную часть, чтобы мы могли разместить наше приложение на хостинге, таком как Heroku.

Создайте папку сервера. Здесь мы будем хранить все, что связано с нашим бэкэндом.

mkdir server && cd server
touch index.js

Теперь структура вашего приложения должна выглядеть так.

- name-of-app
  - public
    - favicon
    - index.html
    - manifest.json
  - server
    - index.js
  - src
    - App.css
    - App.js
    - App.test.js
    - index.css
    - index.js
    - logo.svg
    - registerServiceWorker.js
  - .gitignore
  - package-lock.json
  - package.json
  - README.md

Давайте продолжим и создадим экспресс-сервер для обслуживания нашего интерфейса React.

npm install --save express

Отредактируйте файл server/index.js, указав следующий код.

Сладкий! Как вы, наверное, заметили, мы обслуживаем каталог сборки. Откуда это пришло? Create-react-app поставляется с различными встроенными скриптами, один из которых создает производственную сборку для нашего проекта.

npm run build

Теперь давайте отредактируем наш package.json, добавив пару дополнительных скриптов.

npm install --save-dev nodemon

Итак, теперь наш стартовый скрипт будет запускать наш экспресс-сервер либо в режиме разработки с помощью nodemon, либо в режиме производства с помощью узла. Если вы включаете базу данных в свой проект, вам нужно будет включить прокси. Это должно быть установлено на тот же порт, который вы установили в index.js. Это позволит вам отправлять запросы на маршруты, не охваченные реакцией, подробнее здесь. Несколько замечаний по этому поводу: когда вы разрабатываете, вам нужно будет запустить оба сервера, и все маршруты /api должны быть выше строки, где вы обслуживаете свою сборку.

Мы будем использовать Heroku для развертывания нашего приложения 🚀

Файлы сборки предназначены для производства, поэтому их не следует отправлять на Github. Файлы или папки могут быть скрыты в файле .gitignore. К счастью, create-react-app поставляется с .gitignore, который включает /build, поэтому нет необходимости что-либо менять.

Сценарий heroku-postbuild в основном говорит Heroku собрать наш проект, а затем запустить наш сценарий сборки, создав каталог сборки, который затем обслуживается нашим сервером.

heroku create name-of-app
git push heroku master // assuming this code is on master

Теперь у нас есть полностью работающее приложение на Heroku 🌟