Skip to content

Latest commit

 

History

History
320 lines (247 loc) · 11 KB

README.md

File metadata and controls

320 lines (247 loc) · 11 KB
Raw

Mock Server

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.

Getting started

  • 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

Make Request

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

Preview

Serve Static Files

  • 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

Start Mock Server in Terminal

  • 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

Custom Server script

  • 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

Commands

Start or Restart Server

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

Stop or Reset Server

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

Set Port

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.

Set as Server Root Folder

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.

Switch Environment

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.

Get Db Snapshot

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

Transform to Mock Server Db

  • 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.

Open Home Page

  • 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

DB

  • 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" },
  };
};

Middleware

  • 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,
  };
};

Injectors

  • 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"]
  }
]

Route Rewriters

  • 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

Static File Server

  • 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

Documentation

Author

Sivaraman - [email protected]

License

MIT