How to use mock server

Krystian Kruk

Developing frontend web apps can be tricky when your backend gets complex, it's not easy to set up locally, is not available on a public domain or changes often. To overcome these issues, we recommend to use mock-server.

Mock-server is a node.js HTTP server that supports the same routes as your real backend, but always returns the same results.

Mock-servers can significantly speed up your development:

  • you no longer have to wait for new changes to arrive at your backend,
  • mock-servers are easy to run locally,
  • results are reproducible,
  • your development doesn't rely on backend issues.

To create your first mock-server, create a new NPM project and install necessary dependencies (in this example we're going to use express, so execute npm i express).

In your index.js file, paste:

const express = require("express")
const cors = require("cors")

const app = express()
const port = 3000

app.use(cors())
app.use(express.json())

app.get("/items/:type", (req, res) => {
  res.send({ message: `Hello ${req.params.type}!` })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Provide necessary routes that are used by your web app and run the server on the same port you usually expect backend to run.

If your website works as expected, it's time to let PageShare know where the mock-server is located.

For CLI, provide the parameter --mock-server with a path to the build mock-server.

For GitHub Actions, provide mock-server: option.

Make sure that your mock-server is built (if needed) and dependencies are installed.

At this point, all of your PageShare uploads will contain your mock-server.

If you need a full example of working project, check out our demo project.