Reactend / Express

React-like http-server on Nodejs

Why?

It's the only crazy idea to use React to structure Backend on Node.js.

How it works?

It works with express.js framework to run Node.js server. Custom renderer we have is building express structure app from React Components.

Install

Install the package

npm i --save @reactend/express
or
yarn add @reactend/express

Install peer dependecies

npm i --save react react-dom react-helmet styled-components
or
yarn add react react-dom react-helmet styled-components

Code Example

import React from 'react';
import { resolve } from 'path';

import { registerApp, App, Static, Router, Get, Post, Res, Logger } from '@reactend/express';

const ExpressApp = () => (
  <App port={process.env.PORT || 8080}>
    <Static publicPath="/public" />
    <Logger mode="dev" />
    <Router path="/">
      <Get>
        <Res.Header name="Cache-Control" value="public, max-age=31557600" />
        <Res.Render component={HomePage} />
      </Get>
      <Get path="/components" render={ComponentsPage} />
      <Router path="/api">
        <Post
          path="/status"
          json={{ msg: 'It is okay, bro' }}
          handler={(req) => console.log(req.originalUrl)}
        />
      </Router>
      <Get path="*" text="Not Found" status={404} />
    </Router>
  </App>
);

You can use this way too

import cors from 'cors';
<Middleware handler={cors()} />;

<Get path="/redirect">
  <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
</Get>

<Post path="/json">
  <Res.Status statusCode={401} />
  <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />
</Post>

<Get path="/send-file">
  <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />
</Get>

<Get path="/render">
  <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
</Get>

Components

This minor description for now (Docs is on the way)

<App /> - App Instance (props: port)
<Static /> - Static route (props: publicPath, path, options)
<Router /> - Router-Provider (props: path)
<Get />, <Post /> and ... - Route component (props: path, content,
handler, status)
<Middleware /> - Middleware (props: handler)
<Logger /> - morgan logger (props: mode, disabled)
<Res /> - Response components
<Res.Render /> - Render (props: component)
<Res.Content /> - Response send (props: json, text, contentType)
<Res.Status /> - Response Status (props: statusCode)
<Res.SendFile /> - Response Send File (props: path, options,
onError)
<Res.Redirect /> - Redirect (props: path, statusCode)

Contact me

Email me if you have any idea and you would like to be contributor orkhanjafarovr@gmail.com