Build mock-server with Reactend in one touch
Tags: javascript, webdev, react, node
Published: 2021-02-22 22:55:59

---
title: Build mock-server with Reactend in one touch
published: true
description: mock-server with Reactend
tags: #javascript #webdev, #reactjs, #nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5ti7mjlhiyvmq5a1qkr.png
---

Hey there,

[**Reactend**](https://github.com/reactend/reactend-express) is still in experimental mode, but it's ready to go as a mock-server for now. 

### What is mock-server ?

Most of you know about it. But for any case I'll describe it. **Mock-server** is a http-server with fake/mock data. Before you build your frontend, you need to have a backend that responses you data you need. In case if you're backend is not ready yet.

### How can Reactend help you ?

- It provides you declarative way to build your http-server
- It uses [faker.js](https://github.com/Marak/faker.js) inside that has a lot of fake [data methods](https://rawgit.com/Marak/faker.js/master/examples/browser/index.html)
- Implement with any (Get, Post, Put and etc.) methods
- One touch run
- One tiny app file

### How it looks like?

![mock-server reactend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7fgjtmsiuq7fyeruf11.png)
<br/>

### Let's create simple mock-server

To start building with Reactend, you should run this or clone [this repo](https://github.com/reactend/reactend-faker-template)

```
npx create-reactend my-app --template faker
```

We need to mock:

- **Sign-up** and **Sign-in**
- Get user data
- Get orders

### Modify src/app.js to base app structure

```jsx
import React from "react";
import { registerApp, App, Router, Logger } from "@reactend/express";

const MockServerApp = () => (
  <App port={3000}>
    <Logger mode="dev" />
    <Router path="/api">
      {/* Magic will be here */}
    </Router>
  </App>
);

registerApp(MockServerApp);
```

### Mock sing-up and sign-in

We put this code in Router as children. There - `{/* Magic will be here */}`

```jsx
<Post path="/sign-up">
  <Res.Content json={{ msg: 'success' }} />
</Post>
<Post path="/sign-in">
  <Res.Header name="AuthToken" value="tokentokentoken" />
  <Res.Content json={{ msg: 'logged in' }} />
</Post>
```

### Mock user data

We use Res.Faker to get fake data, we will have user data with **userId, profile and etc.**

```jsx
<Post path="/user">
 <Res.Faker
    map={{
      userId: "random.uuid",
      isAdmin: false,
      profile: {
        fullName: "name.findName",
        avatar: "image.people",
        registeredAt: "date.past",
      }
    }}
  />
</Post>
```

on **POST request** we got this json object

```json
{
    "userId": "26a3392f-d80c-4927-8f09-773f9979a6ea",
    "isAdmin": false,
    "profile": {
        "fullName": "Enrique Moore",
        "avatar": "http://placeimg.com/640/480/people",
        "registeredAt": "2020-06-11T04:11:36.297Z"
    }
}
```

### Mock user's order

```jsx
<Get path="/user/orders">
  <Res.Faker
    length={5}
    map={{
      id: "random.uuid",
      name: "commerce.productName",
      color: "commerce.color",
      qty: 'random.number',
      price: 'random.float'
    }}
  />
</Get>
```

*Note. There're two props length (number of objects) and locale (default:en)*

on **GET request** we got this json object

```json
[
    {
        "id": "b2cab08e-ab41-4db4-a6ca-cafe4ae53812",
        "name": "Sleek Frozen Bike",
        "color": "turquoise",
        "qty": 25725,
        "price": 37197.2
    },
    {
        "id": "a0eadf9f-89d2-4d9d-8b10-069c72a43337",
        "name": "Handmade Rubber Computer",
        "color": "tan",
        "qty": 56871,
        "price": 192.09
    },
....
```

## Merge them all

Now we have simple mock-server to work with our frontend part. We can get response  when we login, sing up, get user data and user's orders. We can even select locale, just need to pass locale prop in Res.Faker. ex. `<Res.Faker locale="az" ...`

```jsx
import React from "react";
import {
  registerApp,
  App,
  Router,
  Logger,
  Res,
  Get,
  Post,
} from "@reactend/express";

const MockServerApp = () => (
  <App port={3000}>
    <Logger mode="dev" />
    <Router path="/api">
      <Post path="/sign-up">
        <Res.Content json={{ msg: "success" }} />
      </Post>
      <Post path="/sign-in">
        <Res.Header name="AuthToken" value="tokentokentoken" />
        <Res.Content json={{ msg: "logged in" }} />
      </Post>
      <Post path="/user">
        <Res.Faker
          map={{
            userId: "random.uuid",
            isAdmin: false,
            profile: {
              fullName: "name.findName",
              avatar: "image.people",
              registeredAt: "date.past",
            },
          }}
        />
      </Post>

      <Get path="/user/orders">
        <Res.Faker
          length={5}
          map={{
            id: "random.uuid",
            name: "commerce.productName",
            color: "commerce.color",
            qty: "random.number",
            price: "random.float",
          }}
        />
      </Get>
    </Router>
  </App>
);

registerApp(MockServerApp);
```

## Conclusion

So, now you have your tiny mock-server (Hooray!)

You can also check [Reactend repo](https://github.com/reactend/reactend-express) and try playground on [repl.it](http://repl.it).

New features are coming for **Reactend**, so keep updated!