https://github.com/raathigesh/react-atmo
:sparkles: Custom react renderer for express js
https://github.com/raathigesh/react-atmo
express-js react
Last synced: about 1 year ago
JSON representation
:sparkles: Custom react renderer for express js
- Host: GitHub
- URL: https://github.com/raathigesh/react-atmo
- Owner: Raathigesh
- License: mit
- Created: 2017-08-12T13:30:34.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-17T08:26:24.000Z (almost 9 years ago)
- Last Synced: 2024-11-12T16:03:16.701Z (over 1 year ago)
- Topics: express-js, react
- Language: JavaScript
- Homepage:
- Size: 138 KB
- Stars: 42
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React atmo is a custom renderer for [express js](https://expressjs.com/). 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.**
## Is this a good idea?
I'm pretty sure it's not! But it's lot of fun!
## Getting Started
Start with the [starter kit](https://github.com/Raathigesh/react-atmo-sample) powered by [backpack](https://github.com/jaredpalmer/backpack).
```
yarn add react-atmo
```
## Hello, world!
```javascript
import React from "react";
import Atmo, { Headers } from "react-atmo";
Atmo.listen(
{() => ({
name: "Adiana",
description: "The fiery one"
})}
);
```
Have a look at the examples [here](https://github.com/Raathigesh/react-atmo/tree/master/examples).
## API
### `Atmo.listen(element, [callback])`
Starts an express server.
## Elements
### ``
Creates a server app and starts listening on the provided port
> `port` | Server port
### ``
Attaches the route to the express app
> `method` | Http method name for the route.
> `url` | Url of the route.
### ``
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.
```javascript
{(request, response) => {
// play with the request and response object of express
return {
status: 'alive'
}
}}
```
### ``
Takes `````` as children.
#### ``
Represents a response header
```javascript
```
> `name` | Header name
> `value` | Header value
Save some typing and use the following header presets.
```javascript
import Atmo, { Headers } from "react-atmo";
```
* `````` - Adds JSON content type header
* `````` - Adds Cross origin header
### ``
> `code` | Satus code number
Should be a childen of the `````` element.
Save some typing and use the following status presets.
```javascript
import Atmo, { Status } from "react-atmo";
```
* `````` - Code 200
* `````` - Code 401
* `````` - Code 400
* `````` - Code 403
* `````` - Code 404
* `````` - Code 500
### ``
If you are creating a mock API and wants to simulate slowness, delay is the one you are looking for.
```javascript
```
> `time` | Delay in milliseconds.
## ``
Accepts `````` as children.
### ``
The static middleware.
```javascript
```
> `path` | Path of the folder to expose as static directory.
### ``
The body parser middleware.
```javascript
```
### ``
Your own, custom middleware.
```javascript
{app => {
// use the app and do whatever you want
}}
```
### ``
When you are not happy with a single instance and wants multiple apps listening on different ports.
```javascript
import React, { Component } from "react";
import Atmo from "react-atmo";
Atmo.listen(
{() => ({
name: "Adiana",
description: "The fiery one"
})}
{() => ({
name: "Adiana",
description: "The fiery one, from server 2"
})}
);
```
## Kitchen sink
```javascript
import React, { Component } from "react";
import Atmo, { Headers, Status } from "react-atmo";
Atmo.listen(
{app => {
// use the app and do whatever you want
}}
{() => ({
name: "Adiana",
description: "The fiery one"
})}
);
```
## Inspiration and Reference
[React-ionize](https://github.com/mhink/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.