KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

reactend-express

★ 398 Open GitHub ↗

React renderer to build Node.js server

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Reactend / Express

React-like http-server on Nodejs

### 🕹 [Playground on repl.it](https://repl.it/@orkhanjafarov/reactend-playground?v=1)

### 📄 [Reactend Template](https://github.com/gigantz/reactend-template)

![Planet Express](https://raw.githubusercontent.com/reactend/reactend-express/master/logo.svg)

## 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

```js
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

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

```js
<Get path="/redirect">
 <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
</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 [orkhanjafarovr@gmail.com](mailto:orkhanjafarovr@gmail.com)

Cheers ✨

reactend-express

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README