json-server homepage is not showing

Viewed 1325

I created a react-app with npx create-react-app in package.json added json-server and run script.

"devDependencies": {
   "json-server": "0.14.2",
   "react-scripts": "1.0.10",
   "styled-components": "^2.1.1"
},

"scripts": {
    "apiserver": "json-server -p 3001 -w tools/db.json",

When I start the json-server with npm run apiserver it starts successfully. But home page does not load.

 \{^_^}/ hi!

  Loading tools/db.json
  Done

  Resources
  http://localhost:3001/posts

  Home
  http://localhost:3001

  Type s + enter at any time to create a snapshot of the database
  Watching...

Not loading :(

enter image description here

Also I have json-server installed globally. So when I start it like that:

json-server -w db.json -p 3001

It loads successfully:

enter image description here

3 Answers

It is due to the public directory you already have in the app and workarounds are stated here

For me, I tried passing the static URL of the public folder and it worked.

So, for you, a simple solution would be to update the apiserver script to the following;

"apiserver": "json-server -p 3001 -w tools/db.json -s ./node_modules/json-server/public"

Create json-server.json file in root of your project, and add your custom configuration:

{
  ...,
  "static": "./node_modules/json-server/public"
}

by this solution, you call your home route from static not public directory which exists in your app.

in the same command line window you used to start your json-server, if you pressed s then enter it will save you a new file in the same directory as your original

Related