バックエンドをモックしてフロントエンド開発する時にJSON Serverって便利じゃん

概要

JSON Serverはバックエンドの処理をモックして、フロントエンド側の処理を優先して行う時に便利じゃん！という話。 github.com

出典

※この記事は Full Stack open 2020 Part2-c Getting data from server を参考に書かれています 📝

使い方

# とりあえずグローバルにインストールする
$ npm install -g json-server

プロジェクトのルートに db.json というファイルを用意

$ touch db.json

{
  "notes": [
    {
      "id": 1,
      "content": "HTML is easy",
      "date": "2019-05-30T17:30:31.098Z",
      "important": true
    },
    {
      "id": 2,
      "content": "Browser can execute only JavaScript",
      "date": "2019-05-30T18:39:34.091Z",
      "important": false
    },
    {
      "id": 3,
      "content": "GET and POST are the most important methods of HTTP protocol",
      "date": "2019-05-30T19:20:14.298Z",
      "important": true
    }
  ]
}

db.jsonをDBとしてサーバーとしてを起動する

npx json-server --port 3001 --watch db.json

http://localhost:3001/notes にアクセスする db.json に定義した通りのJSONが表示される📝