An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Deploy React app with JSON server on Heroku
Prerequisites
Assuming you have already done the following:
- Created a react application using create-react-app,
- Installed JSON server in the root directory and created db.json database,
- Your front-end application can run correctly and can access the JSON database properly,
- Your app has been committed on Github,
- 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
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");});
Step 3:
(1) Commit the changes above to your Git repo. Then,
(2) Log in to your Heroku account, and create a new app:
(3) In the Deploy
catalogue, select GitHub
as your Deployment method
, find your repo and Connect
it to Heroku:
(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.
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.
hyc0812 / deploy-feedback-app
a simple feedback app demo @ https://deploy-feedback-app-with-jsv.herokuapp.com/
See you!
Reference
Deployment:
https://www.youtube.com/watch?v=DAuHI7bHx1Q
Learn React.js:
Cover image:
https://blog.devgenius.io/how-to-deploy-your-first-full-stack-web-application-react-rails-heroku-17a799e78bb4
Original Link: https://dev.to/yongchanghe/deploy-react-app-with-json-server-on-heroku-59ak
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To