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!

import React from "react";
import Atmo, { Headers } from "../src";

Atmo.listen(
  <server port="9001">
    <middlewares>
      <bodyparser />
    </middlewares>
    <route method="get" url="/unicorns">
      <headers>
        <Headers.CrossOriginHeader />
        <Headers.JsonContentTypeHeader />
      </headers>
      <response>
        {() => ({
          name: "Adiana",
          description: "The fiery one"
        })}
      </response>
    </route>
  </server>
);

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>
  {(request, 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.

import Atmo, { Headers } from "react-atmo";

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

import Atmo, { Status } from "react-atmo";

• <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>
{app => {
  // 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

import React, { Component } from "react";
import Atmo, { Headers, Status } from "react-atmo";

Atmo.listen(
  <server port="9001">
    <middlewares>
      <static path="./" />
      <bodyparser />
      <middleware>
        {app => {
          // use the app and do whatever you want
        }}
      </middleware>
    </middlewares>
    <route method="get" url="/unicorns">
      <headers>
        <Headers.CrossOriginHeader />
        <Headers.JsonContentTypeHeader />
        <header name="x-powered-by" value="Unicorn JS" />
      </headers>
      <response>
        {() => ({
          name: "Adiana",
          description: "The fiery one"
        })}
      </response>
      <delay time={3000} />
      <Status.Ok />
    </route>
  </server>
);

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.