Предлагает простой способ работы с приложением 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 initnpm 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 🌟