Предварительные условия

Предполагается, что вы уже сделали следующее:

1. Создали react-приложение с помощью create-react-app,
2. Установили JSON сервер в корневой каталог и создали базу данных db.json,
3. Ваше внешнее приложение работает корректно и может правильно обращаться к базе данных JSON,
4. Ваше приложение было зафиксировано на Github,
5. У вас есть аккаунт на Heroku.

Шаг 1:

Создайте файл с именем Procfile в корневом каталоге и вставьте в него следующий код:

web: node server.js

Шаг 2:

создайте файл server.js в корневом каталоге и вставьте в него следующий код:

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./db.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const PORT = process.env.PORT || 8000;
server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);
server.use(router);
server.listen(PORT, () => {
  console.log("Server is running");
});

Шаг 3:

(1) Зафиксируйте вышеуказанные изменения в своем Git-репозитории. Затем,
(2) Войдите в свою учетную запись Heroku и создайте новое приложение:

(3) В каталоге Deploy выберите GitHub в качестве метода развертывания, найдите свою репозиторию и подключите ее к Heroku:

(4) Нажмите Deploy Branch, чтобы развернуть ваше приложение.

Предположим, что вся процедура завершилась без проблем, поздравляем! Теперь вы можете нажать Open app, чтобы увидеть ваше развернутое приложение.

На этом мы закончим эту статью. Я хочу поделиться своим развернутым репо здесь, и, пожалуйста, не стесняйтесь проверять интересные вещи, играть в него, форкать и давать звезды, а также оставлять сообщения ниже, если у вас есть вопросы.

npm install
npm run dev

До встречи!

Ссылка

Развертывание:
https://www.youtube.com/watch?v=DAuHI7bHx1Q
Изучайте React.js:
https://www.skillshare.com/classes/React-Front-To-Back-2022/1541849001/projects?via=member-home-EnrolledClassesLessonsSection
Изображение обложки:
https://blog.devgenius.io/how-to-deploy-your-first-full-stack-web-application-react-rails-heroku-17a799e78bb4