Get a full REST API with zero coding in less than 30 seconds (seriously)
Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
This Extension is built upon node package @r35007/mock-server.

• Install the Extension.
• Right click on the workspace folder and select MockServer -> Create db.json from the context.
• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Start Server (Alt+Enter)
• To view the List of resources go to Command MockServer: Home Page or open any browser and hit the localhost url

Preview

• Once the Server is started we can check the request using MockServer: Make Request command in command pallet.

Preview

• Right click on any file or folder and select Serve Static Files from the Mock server context menu.
• This will serve the active folder as a server static files.
• We can also set a custom static folder path in mock-server.settings.paths.static.

Preview

• We need to install npm install -g @r35007/mock-server to make this command work.
• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Start Server in Terminal
• This starts the mock server in terminal.

Preview

• Install Mock Server npm install -g @r35007/mock-server.
• Right click on the vscode explorer and select Mock Server -> Create Server.js.
• This create a sample server.js file
• Now go to terminal and give node server.js to start the mock server.
• Please refer @r35007/mock-server for more api documentation.

Preview

This command Starts the Mock Server or Restart if its already running.

• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Start Server
• Use Alt+Enter shortcut to start or restart the server.
• Click the Mock It icon at the right corner of the statusbar
• Server will automatically will restarted if any changes are made.
• You can also manually restart the server bu giving the same MockServer: Start Server Command

This command Stops the current running Mock Server or Reset Mock Server instance if any error occur.

• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Stop or Reset Server.
• ShortCut using Shift+Alt+Enter

This command helps to set the port of the server in setting mock-server.settings.port.

• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Set Port.
• This command helps prompts and sets the custom port to start the server.

This command sets current folder as the server root folder in setting mock-server.settings.paths.root.

• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Set as Server Root Folder.
• This command helps sets the current selected file or folder as a Server root folder.

Helps to work in multiple data environments.

• Create env folder in root.
• Keep you different db data of extension .json, .jsonc or .har
• From Command Palette ((Ctrl/Cmd)+Shift+P) type mock and select MockServer: Switch Environment
• UseAlt+S shortcut to switch environment.
• This path can be modified using the settings mock-server.settings.paths.environment.
• Now all the .json, .jsonc, .har, .js files will be listed down. You can pick a data to launch the server.
• You can create a env-config.json file to create a custom database environment. For Example: env/env-config.json

  // These names will be listed in the environment pick list
  {
   "Your Environment Name": {
   "db": "./testDb.json",
   "injectors": "./testInjectors.json",
   "middlewares": "./testMiddlewares.js",
   "description": "Your description here" // This description will be shown in the switch environment pick list
   },
   "Your New Environment Name": {
   "db": ["./testDb2.json", "./testDb2.json"], // Can also provide multiple paths
   "injectors": [],
   "middlewares": []
   }
  }

  Note: All the paths given in the env-config.json will be relative to the path given in mock-server.settings.paths.environment. File or Folder name with injectors and middlewares will not list in the pick list.

• MockServer: Get Db Snapshot Command helps to save the current db data snapshot.

• MockServer: Transform to Mock Server Db Command helps to generate a valid routes.
• This also helps to convert the .har or kibana json to a valid db.json file.

• MockServer: Open Home Page Command opens a new window which shows you all the list of resources.
• This window also helps to update or add new resources in runtime.
• It can also be opened in a separate browser window. HomePage

• Create db.json

• Set custom Db path using setting mock-server.settings.paths.db.

• This path can be either file path or folder path or also a server path.

• If provided as a folder path, then all the .json files will be joined together and starts the server.

• Example 1 : db.json.

  {
   "posts": [{ "id": 1, "title": "mock-server", "author": "r35007" }],
   "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
   "profile": { "name": "r35007" }
  }

• Example 2 : ./folder.

• Example 3 : https://jsonplaceholder.typicode.com/db.

• Example 4 : db.js.

  module.exports = async (mockServer, env) => {
   return {
   posts: [{ id: 1, title: "mock-server", author: "r35007" }],
   comments: [{ id: 1, body: "some comment", postId: 1 }],
   profile: { name: "r35007" },
   };
  };

• Create middlewares.js
• Set custom Middleware path using setting mock-server.settings.paths.middlewares.
• Middlewares must be of a type .js file.
• Callback method to generate routes can also be given in this middlewares.js.
• Example:

middlewares.js

const harEntryCallback = (entry, routePath, routeConfig) => {
 return { [routePath]: routeConfig };
};
const kibanaHitsCallback = (hit, routePath, routeConfig) => {
 return { [routePath]: routeConfig };
};
const harDbCallback = (data, db) => {
 return db;
};
const kibanaDbCallback = (data, db) => {
 return db;
};
const logPath = (req, res, next) => {
 console.log(req.path);
 next();
};
// You can create n number of middlewares like this and can be used in any routes as a middleware.
const DataWrapper = (req, res, next) => {
 res.locals.data = {
 status: "Success",
 message: "Retrieved Successfully",
 result: res.locals.data,
 };
 next();
};
const CustomLog = (req, res, next) => {
 console.log(new Date());
 next();
};
// Access store value
const GetStoreValue = (req, res, next) => {
 const store = res.locals.getStore();
 res.locals.data = "The store value is : " + store.data;
 next();
};
module.exports = async (mockServer, env) => {
 const { app, routes, data, getDb, getStore } = mockServer || {};
 const { config, db, injectors, middlewares, rewriters, store } = data || {};
 // Your Global middleware logic here before setting default middlewares by the MockServer
 return {
 globals: [logPath],
 harEntryCallback,
 harDbCallback,
 kibanaDbCallback,
 DataWrapper,
 CustomLog,
 GetStoreValue,
 };
};

• Create injectors.json.

• Set custom Injectors path using mock-server.settings.paths.injectors.

• Injectors helps to inject a route config to the routes in the db.json.

• Example: injectors.json

  [
   {
   "routes": ["/injectors/:id"],
   "description": "This description is injected using the injectors by matching the pattern '/injectors/:id'."
   },
   {
   "routes": ["/injectors/1"],
   "override": true,
   "mock": "This data is injected using the injectors by matching the pattern '/injectors/1'."
   },
   {
   "routes": ["/injectors/2"],
   "override": true,
   "mock": "This data is injected using the injectors by matching the pattern '/injectors/2'."
   },
   {
   "routes": ["/injectors/:id"],
   "override": true,
   "exact": true,
   "statusCode": 200,
   "mock": "This data is injected using the injectors by exactly matching the route '/injectors/:id'."
   },
   {
   "routes": ["/(.*)"],
   "description": "This Description is injected using the injectors. Set 'Override' flag to true to override the existing config values."
   },
   {
   "routes": ["/(.*)"],
   "override": true,
   "middlewares": ["...", "CustomLog"]
   }
  ]

• Create rewriters.json.

• Set custom Rewriters path using mock-server.settings.paths.rewriter.

• This helps to create a custom route.

• Example: rewriters.json

  {
   "/posts/:id/comments": "/fetch/comments/proxy?postId=:id",
   "/:resource/:id/show": "/:resource/:id",
   "/posts/:category": "/posts?category=:category",
   "/articlesS?id=:id": "/posts/:id"
  }

• To mount on another endpoint you can use mock-server.settings.base. Alternatively you can also rewrite the url as follows

  {
   "/api/*": "/1ドル"
  }

Now you can access resources using /api/

 /api/posts # → /posts
 /api/posts/1 # → /posts/1

• Create a folder public in the project root folder.
• Now when you start the server, all files under this folder will be automatically hosted in the file server.
• Set Custom directory using mock-server.settings.paths.static

• ReadMe - https://r35007.github.io/Mock-Server/

Sivaraman - sendmsg2siva.siva@gmail.com

• GitHub - https://github.com/R35007/Mock-Server

MIT