React atmo is a custom renderer for express js. This is an experimental project, supports very minimal features and not suitable for production apps. But it's a great fit for creating mock APIs for demos and presentations.
But, Why?
Beacause, Why not?
Getting Started
Start with the starter kit powered by backpack.
yarn add react-atmo
Hello, world!
;; Atmo;
Have a look at the examples here.
API
Atmo.listen(element, [callback])
Starts an express server.
Elements
<server>
Creates a server app and starts listening on the provided port
port
| Server port
<route>
Attaches the route to the express app
method
| Http method name for the route.
url
| Url of the route.
<response>
Represents the response of the route. Takes a function as a children. Whatever the function returns would be returned by the route.
Response function also receives request and response objects of express, if you want to do something interesting.
<response> { // play with the request and response object of express return status: 'alive' }</response>
<headers>
Takes <header />
as children.
<header>
Represents a response header
<header name="x-powered-by" value="Unicorn JS" />
name
| Header name
value
| Header value
Save some typing and use the following header presets.
;
<Headers.JsonContentTypeHeader />
- Adds JSON content type header<Headers.CrossOriginHeader />
- Adds Cross origin header
<status>
code
| Satus code number
Should be a childen of the <route />
element.
Save some typing and use the following status presets.
;
<Status.Ok />
- Code 200<Status.Unauthorized />
- Code 401<Status.BadRequest />
- Code 400<Status.Forbidden />
- Code 403<Status.NotFound />
- Code 404<Status.InternalServerError />
- Code 500
<delay>
If you are creating a mock API and wants to simulate slowness, delay is the one you are looking for.
<delay time=1000 />
time
| Delay in milliseconds.
<middlewares>
Accepts <middleware />
as children.
<static>
The static middleware.
<static path="./" />
path
| Path of the folder to expose as static directory.
<bodyparser>
The body parser middleware.
<bodyparser />
<middleware>
Your own, custom middleware.
<middleware> { // use the app and do whatever you want}</middleware>
<servers>
When you are not happy with a single instance and wants multiple apps listening on different ports.
import React, { Component } from "react";import Atmo from "react-atmo"; Atmo.listen( <servers> <server port="9001"> <route method="get" url="/unicorns"> <response> {() => ({ name: "Adiana", description: "The fiery one" })} </response> </route> </server> <server port="9002"> <route method="get" url="/unicorns"> <response> {() => ({ name: "Adiana", description: "The fiery one, from server 2" })} </response> </route> </server> </servers>);
Kitchen sink
;; Atmo;
Inspiration and Reference
React-ionize is a react custom renderer which targets electron. I have used react-ionize as a reference to build react-atmo. Infact, I have used it as a boilerplate.