React-like http-server on Nodejs
- Node.js http-server based on React-Components
- Express.js inside
- Get, Post, Delete and etc. components to use router method
Get(render)andRes.Renderto 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
handlerprop in Route components to use as regular controller
and many many features that should be documented...
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
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);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>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)
Email me if you have any idea and you would like to be contributor [email protected]
Cheers ✨