DEV Community 👩‍💻👨‍💻

Cover image for Deploy React app with JSON server on Heroku
Yongchang He
Yongchang He

Posted on

Deploy React app with JSON server on Heroku

Prerequisites

Assuming you have already done the following:

  1. Created a react application using create-react-app,
  2. Installed JSON server in the root directory and created db.json database,
  3. Your front-end application can run correctly and can access the JSON database properly,
  4. Your app has been committed on Github,
  5. You have a Heroku account.

Step 1:

create a file named Procfile in the root directory, and paste the following code into the file:

web: node server.js
Enter fullscreen mode Exit fullscreen mode

Image description

Step 2:

create a file named server.js in the root directory, and paste the following into the file:

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");
});
Enter fullscreen mode Exit fullscreen mode

Image description

Step 3:

(1) Commit the changes above to your Git repo. Then,
(2) Log in to your Heroku account, and create a new app:

Image description

(3) In the Deploy catalogue, select GitHub as your Deployment method, find your repo and Connect it to Heroku:

Image description

(4) Click Deploy Branch to deploy your app.

Suppose the whole procedure finishes without any problem, congrats! And now, you can click Open app to see your deployed app.

Image description

Image description

That's the end of this article. I want to share my deployed repo here, and please feel free to check interesting things, play it, fork and give stars, and leave a message below if you have questions.

GitHub logo hyc0812 / deploy-feedback-app

a simple feedback app demo @ https://deploy-feedback-app-with-jsv.herokuapp.com/

Feedback app demo

DemoLink

Run it locally:

npm install
npm run dev

Deploy it to Heroku:

BlogLink

The blog haven't publish yet, I will update the blog URL soon...

See you!

Reference

Deployment:
https://www.youtube.com/watch?v=DAuHI7bHx1Q
Learn React.js:
https://www.skillshare.com/classes/React-Front-To-Back-2022/1541849001/projects?via=member-home-EnrolledClassesLessonsSection
Cover image:
https://blog.devgenius.io/how-to-deploy-your-first-full-stack-web-application-react-rails-heroku-17a799e78bb4

Top comments (2)

Collapse
piyushyadav0191 profile image
piyush yadav

Very helpful

Collapse
yongchanghe profile image
Yongchang He Author

Glad you like it!

🌚 Life is too short to browse without dark mode