DEV Community

loading...
Cover image for Build mock-server with Reactend in one touch

Build mock-server with Reactend in one touch

orkhanjafarovr profile image Orkhan Jafarov ・3 min read

Hey there,

Reactend 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 inside that has a lot of fake data methods
  • Implement with any (Get, Post, Put and etc.) methods
  • One touch run
  • One tiny app file

How it looks like?

mock-server reactend

Let's create simple mock-server

To start building with Reactend, you should run this or clone this repo

npx create-reactend my-app --template faker
Enter fullscreen mode Exit fullscreen mode

We need to mock:

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

Modify src/app.js to base app structure

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);
Enter fullscreen mode Exit fullscreen mode

Mock sing-up and sign-in

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

<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>
Enter fullscreen mode Exit fullscreen mode

Mock user data

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

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

on POST request we got this json object

{
    "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"
    }
}
Enter fullscreen mode Exit fullscreen mode

Mock user's order

<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>
Enter fullscreen mode Exit fullscreen mode

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

on GET request we got this json object

[
    {
        "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
    },
....
Enter fullscreen mode Exit fullscreen mode

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

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);
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

You can also check Reactend repo and try playground on repl.it.

New features are coming for Reactend, so keep updated!

Discussion (1)

pic
Editor guide
Collapse
leviathanprogramming profile image
π‹π„π‘½πˆπ‘¨π“π‡π€π Programming

The real backend seems too beefy. I'll choose the mock server...
JK LOL. Real' funny pic you got there.