Is it possible to deploy a ReactJS website with json-server on Netlify?

Question

I have an application built with ReactJS, but I'm using a fake API (json-server) to handle my data.

So, before I run 'npm start' to run the application I have to run 'json-server server.json -p 3333' to run the server and I can't make it run on Netlify.

Does anybody know if it is possible or not?

Thanks!

Answer 1

You can run json-server on heroku or glitch. By using that url (provided by heroku or glitch) to fetch json data instead of localhost, you can deploy your website on netlify while your json server would be running on heroku or glitch. You can perform CRUD operations on the website deployed on netlify.

Procedure to upload JSON data on Glitch:

• Clone the git repository https://github.com/ikramdeveloper/json-server-deploy in any folder.
• Replace db.json file with your own json data file(with .json extension).
• Upload on github.

Or skip these steps and use the given url repository to test

• Register or Login on Glitch https://glitch.com/.
• Click New Project.
• Click Import from GitHub. Paste [your git repo url] into the URL-input and click OK.
• Wait for it to setup Click preview in bottom bar to get your URL to live site. It should be something for example like: https://seemly-truthful-scribe.glitch.me. And your DB will be at https://fallabe-pie-snake.glitch.me/posts

For more details, visit: https://github.com/ikramdeveloper/json-server-deploy

Answer 2

You can run JSON server on Heroku, that way you wont need to run both React and JSON server, as JSON server will already be running on a separate server at Heroku.

Its also free to run JSON server on Heroku too; https://github.com/eecs130/json-server-heroku#create-your-database

Once you have deployed JSON server on Heroku, your path then will be your db.json Resource name (example below is 'blogs');

    {
  "blogs": [
    {
      "postTitle": "My First Blog",

So your db.json REST API path to post to from your running instance of react will be; https://xxxx.herokuapp.com/blogs