Page Comparison

...

By those configuration, we have achieved the goal of ‘one command startup’. Later, we should write specific commands to json-server to tell it what to do exactly. 

8.1.2 Creating server.js

Firstly, we have to create a ‘mock’ folder in the path /app to contain all the configurable files related to mock server, which achieves the goal of separating the business codes and mock data codes. Now, we can do whatever we need in this folder to operate the mock server without any side effects to the business.
Secondly, we create server.js. It is such an important configuration file while json-server is running. We follow the flow image below to write this file:

...

Let’s explain the code briefly.

To Firstly, to reduce the cost of modification, this program read the mock data files and use the file names as forwarding interface paths:

...

The object above uses the names of json files as object keys and uses the contents as object values, which can be accepted by json-server.
This method needs to rename all the original files. The new names should follow the rules that a file name must contain request path names and underlines. E.g. if we want to create a mock data file for the path: /alarm/form/data, we have to name the json file as ‘alarm_form_data.json’. This operation increases the burden of modifying the existed mock data files’ names, however, just one time modification is enough. What’s more, for the new joined developers, they just have to create a json file and name it under the rules of ‘request paths and underlines’ and they can easily get mock data they want. That’s not a bad idea.

Secondly, this program import ‘middleware’ in json-server, so that developers only have to pass the data object into the ‘router’ middleware to implement forwarding data interface.

function runServer(db) {
    server.use(jsonServer.router(db));
}

Thirdly, The imported data object keys are connected by underlines, e.g. ‘alarm_form_data’, but the real paths are connected by slashes, e.g. ‘/alarm/form/data’, so that’s why we have to configure routes.js to deal with it. What’s more, we need another middleware ‘rewriter’ to apply the configuration written in routes.js.

//import routes.js

const customersRouters = require('./routes’);
………
function serverRewrite() {
    server.use(jsonServer.rewriter(customersRouters))
}

//configuration in routes.js
…………
module.exports =
{
   ///////<-------------general interface--------->/////
        "/api/*": "/$1",
        "/*/*": "/$1_$2",
        "/*/*/*": "/$1_$2_$3",
        "/*/*/*/*": "/$1_$2_$3_$4",
        /////////////////////////
}

Since then, a basic local server has been built. When you tap ‘npm run mock’, most of the APIs can be mocked. Hurray!

8.1.3 Creating faker.js

 To achieve the goal of separated development of frontend and backend, we need some powerful tools. Mock.js seems a good choice but for json-server, faker.js is always a perfect partner.
We follow the flow bellow to make faker.js work in our program:

Image Added

Image 3

Let’s install it first.

npm install faker

Then, let’s create a /mock/mock folder to manage the fake data generated by faker.js. In our project, we create two files in this folder.
The first one is responsible to the function of generating fake data.

//mock.js
const fakeData = require('./fakedata.js');
module.exports = {
    //Mock json
    'customer_info': fakeData.customer,
    'alarm_formdata_multiple': fakeData.customer,
    'home': fakeData.home,
    'language': fakeData.language,
}

 The second one is responsible to the function of creating fake data object.

//mock.js
const fakeData = require('./fakedata.js');
module.exports = {
    //Mock json
    'customer_info': fakeData.customer,
    'alarm_formdata_multiple': fakeData.customer,
    'home': fakeData.home,
    'language': fakeData.language,
}

By the operation above, we have to import the fake data object into server.js and merge it with the object generated by local mock data files.

// import fake data object and merge it into the existed data object
const fakeoriginalData = require('./fake/mock.js');  //import datas created in fakedata.js
………..
   files.forEach((filename) => {
          …………….
 
          if (isDir) {
             fileDisplay(filedir);
          }
          Object.keys(fakeoriginalData).map(item => {
              localJsonDb[item] = fakeoriginalData[item];
          })
    })

By all these operations above, we have the capacity to support a totally independent frontend development. Hurray! Hurray!