Reactend / Express

React-like http-server on Nodejs

What's that?

Node.js http-server based on React-Components
Express.js inside
Get, Post, Delete and etc. components to use router method
Get(render) and Res.Render to render your regular React DOM Components
useContext(ReqResContext) hook to access req, res
Support styled-components
Built-in logger (morgan)
Middleware component in Router and its Routes
handler prop in Route components to use as regular controller

and many many features that should be documented...

Get started

Run this to create reactend project on your local machine

npx create-reactend my-app

You choose template (default: basic)

npx create-reactend my-app --template faker

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={resolve(__dirname, '/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>
);

registerApp(ExpressApp);

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>

<Get path="/faker">
  <Res.Faker
    length={10}
    locale="az"
    map={{
      fullName: "name.findName",
      avatar: "image.people",
      registeredAt: "date.past",
    }}
  />
</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)
<Res.Faker /> - Redirect (props: length, locale, map)

Contact me

Email me if you have any idea and you would like to be contributor [email protected]

Cheers ✨

reactend / reactend-express Goto Github PK