unable to use json-server and react together

Question

I'm trying to use json-server in a project directory that I already set up with React via: npx create-react-app new-app. In the new-app directory, I have a file db.json with some content:

{
  "notes": [
    {
      "id": 1,
      "content": "first content",
    },
    {
      "id": 2,
      "content": "content 2",
    }
  ]
}

I also have the json-server installed with npm install json-server --save-dev. Then, I ran the server on port 3001 via: npx json-server --port 3001 --watch db.json and everything so far runs smoothly and I can see the notes file on http://localhost:3001/notes.

At this point, to packages.json, under "scripts", I added a server configuration as such:

{
  "name": "new-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server -p3001 --watch db.json" // ADDED THIS
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "json-server": "^0.16.1"
  }
}

According to the reference that I was following, this was supposed to show all the stuff from react on http://localhost:3001, but what I get is just a blank page with the title React App (no icon either). My root directory is as follows (no changes other than ones mentioned):

https://i.sstatic.net/fg0a4.jpg

Could anyone point out what went wrong here? Or alternatively, how they managed to get react and json-server set up correctly?

When set up this way, it doesn't seem like the index.js file (and other .js files) in the src folder is being used by the index.html in the public folder.

Answer 1

Am I right that you want to see the website, not the content of the json-server? Maybe try http://localhost:3000.