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?
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
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);
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>
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>
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"
}
}
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>
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
},
....
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);
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!
Top comments (1)
The real backend seems too beefy. I'll choose the mock server...
JK LOL. Real' funny pic you got there.