json-server : Mock DB + API Server for testing and development

As a Front-End Developer you may got resentful or sometimes angry 😡about api issues in your project related to many reasons like :

• New API is not ready for use
• API is not tested and the BackEnd Dev wait for feedback to fix the api issue
• Api server is not available

So those are just some of many reasons that can push you to think about a solution instead of waiting for production api to be ready.

One of the simplest solution is json-server, this one provide a simple way to configure a MockDB managed by apis with less code. This mock server can be used rather for development purposes or end to end testing purposes.

To initialize a new project with Mock DB + API Server follow these steps :

1 – Initialize node project

[pastacode lang=”bash” manual=”%24%20mkdir%20api-server-mock-db%0A%24%20cd%20.%2Fapi-server-mock-db%0A%24%20npm%20init” message=”” highlight=”” provider=”manual”/]

2 – Install required package

• json-server : Gives us a full fake REST API
• npm-run-all : To run multiple npm-scripts in parallel or sequential

[pastacode lang=”bash” manual=”%24%20npm%20install%20-D%20json-server%20npm-run-all” message=”” highlight=”” provider=”manual”/]

3 – Create database init file

Let’s imagine a data structure of Products And Categories, a product is attached to a category and many products can be attached to same category :

The following file contains init data for your api server, this data will be used to initialize db content each time we run the server

[pastacode lang=”javascript” manual=”const%20initDb%20%3D%20%7B%0A%20%20%22products%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%201%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22T%20shirt%20Women%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22New%20Arrivals%20T%20shirt%20Women%20Fashion%20VOGUE%20Printed%20Harajuku%20Female%20T-Shirts%20Summer%20Short%20Sleeve%20Casual%20TShirt%20Tops%22%2C%0A%20%20%20%20%20%20%22category%22%3A%201%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%202%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Black%20leather%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22Nerazzurri%20black%20leather%20biker%20jacket%20women%20long%20sleeve%20leather%20jacket%20women%20soft%20moto%20jacket%20motorcycle%20faux%20leather%20tops%20women%22%2C%0A%20%20%20%20%20%20%22category%22%3A%201%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%203%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Kawaii%20Print%20T%20Shirt%20Women%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22Nutella%20Kawaii%20Print%20T%20Shirt%20Women%2090s%20Harajuku%20Ullzang%20Fashion%20T-shirt%20Graphic%20Cute%20Cartoon%20Tshirt%20Korean%20Style%20Top%20Tees%20Female%22%2C%0A%20%20%20%20%20%20%22category%22%3A%201%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%204%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22MAMA%20Letter%20Print%20T%20Shirt%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22Rainbow%20MAMA%20Letter%20Print%20T%20Shirt%20Women%20Short%20Sleeve%20O%20Neck%20Loose%20Tshirt%202020%20Summer%20Women%20Tee%20Shirt%20Tops%20Camisetas%20Mujer%22%2C%0A%20%20%20%20%20%20%22category%22%3A%201%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%205%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22iPhone%2011%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22The%20prominent%20changes%20compared%20with%20the%20iPhone%20XR%20are%20the%20Apple%20A13%20Bionic%20chip%2C%20and%20an%20ultra%20wide%20dual%20camera%20system.%22%2C%0A%20%20%20%20%20%20%22category%22%3A%202%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%206%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Samsung%20Galaxy%20Note%2010%20%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22The%20Samsung%20Galaxy%20Note%2010%20is%20a%20line%20of%20Android-based%20phablets%20designed%20%22%2C%0A%20%20%20%20%20%20%22category%22%3A%202%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%207%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Dell%20XPS%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%2213.3-inch%2C%20Ultra%20HD%20(3%2C840%20x%202%2C160)%20UltraSharp%20InfinityEdge%20touch%20display%20%22%2C%0A%20%20%20%20%20%20%22category%22%3A%202%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%208%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Apple%20MacBook%20Pro%2015.4%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22macbook%20pro%202019%2015%2C%20i9%208%20cores%20ssd%20512%20go%20ram%2016go%22%2C%0A%20%20%20%20%20%20%22category%22%3A%202%0A%20%20%20%20%7D%0A%20%20%5D%2C%0A%20%20%22categories%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%201%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Clothes%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22We%20provide%20you%20with%20the%20latest%20women’s%20clothes%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22id%22%3A%202%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Electrical%22%2C%0A%20%20%20%20%20%20%22description%22%3A%20%22Mobile%2C%20Laptop%2C%20Robot%22%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3B%0A%0Aconst%20products%20%3D%20initDb.products%3B%0A%0Aconst%20categories%20%3D%20initDb.categories%3B%0A%0Aconst%20newProduct%20%3D%20%7B%0A%20%20id%3A%20null%2C%0A%20%20name%3A%20%22%22%2C%0A%20%20description%3A%20%22%22%2C%0A%20%20category%3A%20null%0A%7D%3B%0A%0Amodule.exports%20%3D%20%7B%0A%20%20newProduct%2C%0A%20%20products%2C%0A%20%20categories%0A%7D%3B%0A” message=”mock/mockData.json” highlight=”” provider=”manual”/]

4 – Add code for mock db file initialization

[pastacode lang=”javascript” manual=”%2F*%20eslint-disable%20no-console%20*%2F%0Aconst%20fs%20%3D%20require(%22fs%22)%3B%0Aconst%20path%20%3D%20require(%22path%22)%3B%0Aconst%20mockData%20%3D%20require(%22.%2FmockData%22)%3B%0A%0Aconst%20%7B%20products%2C%20categories%20%7D%20%3D%20mockData%3B%0Aconst%20data%20%3D%20JSON.stringify(%7B%20products%2C%20categories%20%7D)%3B%0Aconst%20filepath%20%3D%20path.join(__dirname%2C%20%22db.json%22)%3B%0A%0Afs.writeFile(filepath%2C%20data%2C%20function(err)%20%7B%0A%20%20err%20%3F%20console.log(err)%20%3A%20console.log(%22Mock%20DB%20created.%22)%3B%0A%7D)%3B” message=”mock/createMockDb.js” highlight=”” provider=”manual”/]

5 – Create a simple configuration file for api server with following content

[pastacode lang=”javascript” manual=”%7B%0A%20%20%22port%22%3A%203030%0A%7D%0A” message=”mock/json-server.json” highlight=”” provider=”manual”/]

6 – Finally add api server configuration

[pastacode lang=”javascript” manual=”%2F*%0AThis%20uses%20json-server%2C%20but%20with%20the%20module%20approach%3A%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%23module%0ADownside%3A%20You%20can’t%20pass%20the%20json-server%20command%20line%20options.%0AInstead%2C%20can%20override%20some%20defaults%20by%20passing%20a%20config%20object%20to%20jsonServer.defaults()%3B%0AYou%20have%20to%20check%20the%20source%20code%20to%20set%20some%20items.%0AExamples%3A%0AValidation%2FCustomization%3A%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%2Fissues%2F266%0ADelay%3A%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%2Fissues%2F534%0AID%3A%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%2Fissues%2F613%23issuecomment-325393041%0ARelevant%20source%20code%3A%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%2Fblob%2Fmaster%2Fsrc%2Fcli%2Frun.js%0A*%2F%0A%0A%2F*%20eslint-disable%20no-console%20*%2F%0Aconst%20jsonServer%20%3D%20require(%22json-server%22)%3B%0Aconst%20config%20%3D%20require(%22.%2Fjson-server.json%22)%3B%0Aconst%20server%20%3D%20jsonServer.create()%3B%0Aconst%20path%20%3D%20require(%22path%22)%3B%0Aconst%20router%20%3D%20jsonServer.router(path.join(__dirname%2C%20%22db.json%22))%3B%0A%0A%2F%2F%20Can%20pass%20a%20limited%20number%20of%20options%20to%20this%20to%20override%20(some)%20defaults.%20See%20https%3A%2F%2Fgithub.com%2Ftypicode%2Fjson-server%23api%0Aconst%20middlewares%20%3D%20jsonServer.defaults(%7B%0A%20%20%2F%2F%20Display%20json-server’s%20built%20in%20homepage%20when%20json-server%20starts.%0A%20%20static%3A%20%22node_modules%2Fjson-server%2Fpublic%22%2C%0A%7D)%3B%0A%0A%2F%2F%20Set%20default%20middlewares%20(logger%2C%20static%2C%20cors%20and%20no-cache)%0Aserver.use(middlewares)%3B%0A%0A%2F%2F%20To%20handle%20POST%2C%20PUT%20and%20PATCH%20you%20need%20to%20use%20a%20body-parser.%20Using%20JSON%20Server’s%20bodyParser%0Aserver.use(jsonServer.bodyParser)%3B%0A%0A%2F%2F%20Simulate%20delay%20on%20all%20requests%0Aserver.use(function%20(req%2C%20res%2C%20next)%20%7B%0A%20%20setTimeout(next%2C%200)%3B%0A%7D)%3B%0A%0A%2F%2F%20Declaring%20custom%20routes%20below.%20Add%20custom%20routes%20before%20JSON%20Server%20router%0A%0A%2F%2F%20Add%20createdAt%20to%20all%20POSTS%0Aserver.use((req%2C%20res%2C%20next)%20%3D%3E%20%7B%0A%20%20if%20(req.method%20%3D%3D%3D%20%22POST%22)%20%7B%0A%20%20%20%20req.body.createdAt%20%3D%20Date.now()%3B%0A%20%20%7D%0A%20%20%2F%2F%20Continue%20to%20JSON%20Server%20router%0A%20%20next()%3B%0A%7D)%3B%0A%0A%0A%2F%2F%20Use%20default%20router%0Aserver.use(router)%3B%0A%0A%2F%2F%20Start%20server%0Aconst%20port%20%3D%20config.port%3B%0Aserver.listen(port%2C%20()%20%3D%3E%20%7B%0A%20%20console.log(%60JSON%20Server%20is%20running%20on%20port%20%24%7Bport%7D%60)%3B%0A%7D)%3B%0A” message=”mock/apiServer.js” highlight=”” provider=”manual”/]

7 – To run the server you have to add the following configuration on your package.json file 

[pastacode lang=”javascript” manual=”%22scripts%22%3A%20%7B%0A%20%20%20%20%22start%22%3A%20%22run-p%20start%3Aapi%22%2C%0A%20%20%20%20%22prestart%3Aapi%22%3A%20%22node%20mock%2FcreateMockDb.js%22%2C%0A%20%20%20%20%22start%3Aapi%22%3A%20%22node%20mock%2FapiServer.js%22%2C%0A%20%20%7D” message=”package.json” highlight=”” provider=”manual”/]

8 – Run API Mock Server

[pastacode lang=”bash” manual=”%24%20npm%20start” message=”” highlight=”” provider=”manual”/]

Use http://localhost:3030, Example :

• GET http://localhost:3030/products : To display product list
• GET http://localhost:3030/categories : To display category list
• DELETE http://localhost:3030/products/1 : To display product of Id = 1

https://i.imgur.com/bMdcZsp.gif

 

Find the source code of this example in GitHub.