Skip to content

Commit 98132ce

Browse files
fecommunityfecommunity
committed
docs: update readme
1 parent 60c8002 commit 98132ce

File tree

4 files changed

+628
-114
lines changed

4 files changed

+628
-114
lines changed

‎README.md‎

Lines changed: 242 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,302 @@
1-
<div align="center"><a name="readme-top"></a>
1+
<div align="center">
2+
<a href="https://gaoredu.com" title="ReactPress">
3+
<img height="180" src="./public/logo.png" alt="ReactPress Logo">
4+
</a>
5+
6+
<h1>ReactPress</h1>
7+
8+
<p align="center">
9+
<em>Modern, Full-Stack Publishing Platform Built with React, Next.js, and NestJS</em>
10+
</p>
11+
12+
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/fecommunity/reactpress/blob/master/LICENSE)
13+
[![NPM Version](https://img.shields.io/npm/v/@fecommunity/reactpress.svg?style=flat-square)](https://www.npmjs.com/package/@fecommunity/reactpress)
14+
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/fecommunity/reactpress/pulls)
15+
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg?style=flat-square)](http://www.typescriptlang.org/)
16+
[![Deploy](https://img.shields.io/badge/Deploy-Vercel-blue?style=flat-square)](https://vercel.com/new/clone?repository-url=https://github.com/fecommunity/reactpress)
17+
18+
<p>
19+
<a href="https://github.com/fecommunity/reactpress/issues">Report Bug</a>
20+
·
21+
<a href="https://github.com/fecommunity/reactpress/issues">Request Feature</a>
22+
·
23+
<a href="./README-zh_CN.md">中文文档</a>
24+
</p>
25+
</div>
226

3-
<a href="https://gaoredu.com" title="ReactPress"><img height="180" src="./public/logo.png"></a>
27+
## 🌟 Modern Publishing Platform
428

29+
**ReactPress** is a full-stack publishing platform that empowers developers and content creators to build professional blogs, websites, and content management systems. Built with modern web technologies, it offers an excellent development and user experience.
530

6-
[![ReactPress](./public/poster.png)](https://gaoredu.com)
31+
[![ReactPress Poster](./public/poster.png)](https://gaoredu.com)
732

8-
## Introduction
33+
## ✨ Key Features
934

10-
`ReactPress` is an open-source publishing platform developed using the React. Users can set up their own blogs and websites on servers that support React and MySQL databases. `ReactPress` can also be used as a content management system (CMS).
35+
### 🚀 Performance Optimized
36+
- **Server-Side Rendering** with Next.js for optimal SEO and initial load
37+
- **Code Splitting** and lazy loading for efficient resource management
38+
- **Image Optimization** with Next.js Image component
1139

12-
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/fecommunity/reactpress/blob/master/LICENSE)[![(Runtime) Build and Test](https://github.com/facebook/react/actions/workflows/runtime_build_and_test.yml/badge.svg)](https://github.com/fecommunity/reactpress/blob/master/package.json) [![(Compiler) TypeScript](https://github.com/facebook/react/actions/workflows/compiler_typescript.yml/badge.svg?branch=main)](https://github.com/fecommunity/reactpress/blob/master/client/tsconfig.json) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/fecommunity/reactpress/pulls)![Deploy](https://img.shields.io/badge/Deploy-Vercel-blue)
40+
### 🎨 Beautiful, Responsive Design
41+
- **Dark/Light Theme** switching with seamless transition
42+
- **Mobile-First** responsive design for all devices
43+
- **Ant Design v5** for a polished, professional UI
1344

14-
[Issues](https://github.com/fecommunity/reactpress/issues) · [Pull Request](https://github.com/fecommunity/reactpress/pulls) · English · [中文](./README-zh_CN.md)
15-
</div>
45+
### 🔧 Developer Experience
46+
- **TypeScript** for type safety and better tooling
47+
- **Modular Architecture** for easy customization and extension
48+
- **Auto-Generated API Toolkit** for seamless frontend-backend integration
49+
- **Hot Reload** development with instant feedback
1650

17-
## 💻 Architecture
51+
### 🌍 Internationalization
52+
- **Multi-Language Support** (Chinese & English)
53+
- **Localized Content** management
1854

19-
[![ReactPress Architecture](./public/architecture.png)](https://blog.gaoredu.com)
55+
### 🔐 Security Features
56+
- **JWT Authentication** for secure user sessions
57+
- **Rate Limiting** to prevent abuse
58+
- **Input Validation** and sanitization
59+
- **Helmet.js** for HTTP header security
2060

21-
## 🔥 Live Demo
61+
## 📸 Screenshots
2262

23-
[![Content Management](./public/demo.png)](https://blog.gaoredu.com)
63+
### Content Management Dashboard
64+
[![Content Management](./public/admin.png)](https://blog.gaoredu.com)
2465

25-
[ReactPress Demo](https://blog.gaoredu.com/)
66+
### Elegant Home Page
67+
[![Home Page](./public/home.png)](https://blog.gaoredu.com)
2668

27-
https://github.com/user-attachments/assets/594f2e92-7343-4885-a4b4-1d3216961fd4
69+
### Mobile Responsive Design
70+
[![Mobile View](./public/mobile.png)](https://blog.gaoredu.com)
2871

72+
## 🆚 Technology Comparison
2973

30-
[![ReactPress Demo](https://img.shields.io/badge/Try_Live_Demo-Online-green)](https://blog.gaoredu.com)
74+
| Feature | ReactPress | WordPress | VuePress |
75+
|--------|------------|-----------|----------|
76+
| **Technology Stack** | React + Next.js + NestJS + MySQL | PHP + MySQL | Vue.js |
77+
| **Performance** | ⚡ SSR, Code Splitting | Plugin Dependent | Static Generation |
78+
| **Developer Experience** | ✅ TypeScript, Modern Tooling | ⚠️ PHP Legacy | ✅ Vue Ecosystem |
79+
| **Customization** | 🎨 Component-Based | 🧩 Plugin-Based | 📄 Theme-Based |
80+
| **Security** | 🔐 Modern Security Practices | ⚠️ Plugin Vulnerabilities | 🔒 Static Site |
81+
| **Deployment** | 🚀 Vercel, Docker, PM2 | 🐳 Traditional Hosting | 📦 Static Deployment |
3182

83+
## 🚀 Quick Start
3284

33-
**Content Management**
85+
### One-Command Installation
86+
```bash
87+
# Install and start ReactPress server
88+
npx @fecommunity/reactpress-server
3489

35-
[![Content Management](./public/admin.png)](https://blog.gaoredu.com)
90+
# In another terminal, start the client
91+
npx @fecommunity/reactpress-client
92+
```
3693

37-
**Home Page**
94+
### Manual Installation
95+
```bash
96+
# Clone the repository
97+
git clone --depth=1 https://github.com/fecommunity/reactpress.git
98+
cd reactpress
3899

39-
[![Home Page](./public/home.png)](https://blog.gaoredu.com)
100+
# Install dependencies
101+
npm install -g pnpm
102+
pnpm install
40103

41-
**Navigation**
104+
# Start development servers
105+
pnpm run dev
106+
```
42107

43-
[![Navigation](./public/ipad.png)](https://blog.gaoredu.com)
108+
Visit [http://localhost:3001](http://localhost:3001) to see your new ReactPress site!
44109

45-
## 🆚 Comparison
110+
## 🐳 Docker Deployment
46111

47-
**Comparison of ReactPress, WordPress, and VuePress**
112+
ReactPress can be easily deployed using Docker with a single command:
48113

49-
| **Feature** | **ReactPress** | **WordPress** | **VuePress** |
50-
| ----------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------- |
51-
| **Technology Stack** | React + NextJS + MySQL + NestJS | PHP + MySQL | Vue.js |
52-
| **Type** | Open-source publishing platform / CMS | Open-source publishing platform / CMS | Static site generator / Documentation tool |
53-
| **Front-end & Back-end Separation** | Supported | Not supported (traditional approach) | Supported |
54-
| **Component-based Development** | Supported | Limited support (via plugins and themes) | Supported |
55-
| **Performance Optimization** | Virtual DOM, Code Splitting, Lazy Loading | Plugin-dependent optimization | Static page generation, excellent performance |
56-
| **SEO Performance** | Excellent (SSR support) | Good | Outstanding (static pages) |
57-
| **Customizability** | High (fully customizable themes and styles) | High (via plugins and themes) | Moderate (theme and component customization) |
58-
| **Extensibility** | Strong (API interfaces, independent front-end and back-end extensions) | Strong (plugin extensions) | Moderate (plugin and theme extensions) |
59-
| **User Interface** | Modern, component-based design based on React | User-friendly backend interface | Minimalist, optimized for technical documentation |
60-
| **Security** | Depends on the security of the framework and database | Depends on plugin and theme updates and maintenance | Static site, high security |
61-
| **Application Scenarios** | Complex functionality, high concurrent access, SEO optimization needs | Quick website setup, content publishing, and management | Technical documentation, static blogs |
62-
| **User Groups** | Developers, technical teams，Personal blogs，small businesses | Personal blogs, small businesses, startups | Technical documentation writers, developers |
63-
| **Community Support** | Active and growing | Very active, with a large user base | Supported by the Vue.js community |
114+
```bash
115+
# Clone the repository
116+
git clone --depth=1 https://github.com/fecommunity/reactpress.git
117+
cd reactpress
64118

65-
## ✨ Features
119+
# Start all services with Docker Compose
120+
docker-compose up -d
121+
```
66122

67-
- 📦 Technology Stack: Built on React+MySQL+NestJS+NextJS
68-
- 🌈 Componentization: an interactive language and visual style based on antd
69-
- 🌍 Internationalization: Supports switching between Chinese and English, with international configuration management capabilities
70-
- 🌞 Black and White Theme: Supports free switching between light and dark mode themes
71-
- 🖌️ Creation Management: Built in 'MarkDown' editor, supporting article writing, category and directory management, and tag management
72-
- 📃 Page management: supports customizing new pages
73-
- 💬 Comment management: supports content comment management
74-
- 📷 Media Management: Supports local file upload and OSS file upload
75-
- ...
123+
This will start three containers:
124+
- **MySQL Database** (port 3306)
125+
- **ReactPress Server** (port 3002)
126+
- **ReactPress Client** (port 3001)
76127

77-
## ⌨️ Development
128+
Visit [http://localhost:3001](http://localhost:3001) to access your ReactPress site.
78129

79-
### Environment
130+
### Docker Environment Configuration
80131

81-
```bash
82-
$ git clone --depth=1 https://github.com/fecommunity/reactpress.git
83-
$ cd reactpress
84-
$ npm i -g pnpm
85-
$ pnpm i
132+
The Docker deployment uses environment variables from your `.env` file. Make sure to configure the following:
133+
134+
```env
135+
# Database Config
136+
DB_HOST=mysql
137+
DB_PORT=3306
138+
DB_USER=reactpress
139+
DB_PASSWD=reactpress
140+
DB_DATABASE=reactpress
141+
142+
# Client Config
143+
CLIENT_SITE_URL=http://localhost:3001
144+
CLIENT_PORT=3001
145+
146+
# Server Config
147+
SERVER_SITE_URL=http://localhost:3002
148+
SERVER_PORT=3002
149+
150+
# Security Config
151+
JWT_SECRET=your-secure-jwt-secret
152+
JWT_EXPIRES_IN=24h
153+
154+
# SMTP Config (Optional)
155+
SMTP_HOST=
156+
SMTP_PORT=
157+
SMTP_USER=
158+
SMTP_PASS=
159+
SMTP_FROM=
86160
```
87161

88-
### Configuration
162+
## 💻 System Architecture
89163

90-
After the project starts, the `.env ` configuration file in the root directory will be loaded. Please ensure that the MySQL database service is consistent with the following configuration, and create the `reactpress` database in advance
164+
[![ReactPress Architecture](./public/architecture.png)](https://blog.gaoredu.com)
91165

92-
```js
93-
DB_HOST=127.0.0.1 // Default Database Host
94-
DB_PORT=3306 // Default Database Port
95-
DB_USER=reactpress // Default Username
96-
DB_PASSWD=reactpress // Default Password
97-
DB_DATABASE=reactpress // Default Database Name
166+
ReactPress follows a **modular architecture** with clearly separated concerns:
167+
168+
- **Frontend**: Next.js for SSR and client-side rendering
169+
- **Backend**: NestJS for scalable, maintainable server-side logic
170+
- **Database**: MySQL with TypeORM for data persistence
171+
- **API Layer**: Auto-generated TypeScript SDK for seamless integration
172+
173+
## 🛠️ Technology Stack
174+
175+
| Layer | Technology | Version |
176+
|-------|------------|---------|
177+
| **Frontend** | React | 17.0.2 |
178+
| | Next.js | 12.3.4 |
179+
| | TypeScript | 4.6.2 |
180+
| | Ant Design | 5.24.4 |
181+
| **Backend** | NestJS | 6.7.2 |
182+
| | Node.js | 18.20.4+ |
183+
| | TypeScript | 4.1.6 |
184+
| | TypeORM | 0.2.22 |
185+
| **Database** | MySQL | 5.7+ |
186+
| **Build Tool** | pnpm | 10.12.1 |
187+
| **Package Manager** | pnpm | 10.12.1 |
188+
189+
## 📦 Packages
190+
191+
ReactPress is organized as a monorepo with multiple packages:
192+
193+
| Package | Description | Version |
194+
|---------|-------------|---------|
195+
| [`@fecommunity/reactpress`](https://github.com/fecommunity/reactpress) | Main package with all components | 1.11.0 |
196+
| [`@fecommunity/reactpress-client`](https://github.com/fecommunity/reactpress/tree/master/client) | Next.js frontend application | 1.0.0-beta.23 |
197+
| [`@fecommunity/reactpress-server`](https://github.com/fecommunity/reactpress/tree/master/server) | NestJS backend API | 1.0.0-beta.48 |
198+
| [`@fecommunity/reactpress-toolkit`](https://github.com/fecommunity/reactpress/tree/master/toolkit) | Auto-generated API client SDK | 1.0.0-beta.2 |
199+
| [`@fecommunity/reactpress-config`](https://github.com/fecommunity/reactpress/tree/master/config) | Shared configuration files | 1.0.0-beta.34 |
200+
201+
## 🔧 Configuration
202+
203+
Create a `.env` file in the root directory:
204+
205+
```env
206+
# Database Config
207+
DB_HOST=127.0.0.1
208+
DB_PORT=3306
209+
DB_USER=reactpress
210+
DB_PASSWD=reactpress
211+
DB_DATABASE=reactpress
212+
213+
# Client Config
214+
CLIENT_SITE_URL=http://localhost:3001
215+
CLIENT_PORT=3001
216+
217+
# Server Config
218+
SERVER_SITE_URL=http://localhost:3002
219+
SERVER_PORT=3002
220+
221+
# Security Config
222+
JWT_SECRET=your-secure-jwt-secret
223+
JWT_EXPIRES_IN=24h
224+
225+
# SMTP Config (Optional)
226+
SMTP_HOST=
227+
SMTP_PORT=
228+
SMTP_USER=
229+
SMTP_PASS=
230+
SMTP_FROM=
98231
```
99232

100-
After the environment is ready, execute the startup shell:
233+
## 🚀 Deployment
234+
235+
### Deploy with Vercel
236+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/fecommunity/reactpress)
101237

238+
### Docker Deployment
102239
```bash
103-
$ pnpm run dev
240+
# Start all services with Docker Compose
241+
docker-compose up -d
104242
```
105243

106-
Open your browser and visit http://127.0.0.1:3001
244+
### Traditional Deployment
245+
```bash
246+
# Build for production
247+
pnpm run build
107248

249+
# Start production servers
250+
pnpm run start
251+
```
108252

109-
### Deploy
253+
## 📚 Documentation
110254

111-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/fecommunity/reactpress)
255+
- [Getting Started Guide](https://github.com/fecommunity/reactpress/wiki)
256+
- [API Documentation](https://github.com/fecommunity/reactpress/wiki/API-Documentation)
257+
- [Deployment Guide](https://github.com/fecommunity/reactpress/wiki/Deployment)
258+
- [Customization Guide](https://github.com/fecommunity/reactpress/wiki/Customization)
112259

113-
## 🔗 Links
260+
## 👥 Community & Support
114261

115-
- [Home](https://github.com/fecommunity/reactpress)
116-
- [ReactPress](https://blog.gaoredu.com/knowledge/c7edfecf-4f47-4bd3-ba93-093e43cf5314/bef19159-4a6f-4343-b84e-b1a636b570f8)
117-
- [Issues](https://github.com/fecommunity/reactpress/issues)
118-
- [Pull Request](https://github.com/fecommunity/reactpress/pulls)
119-
- [next.js](https://github.com/vercel/next.js)
120-
- [nest.js](https://github.com/nestjs/nest)
262+
- [GitHub Issues](https://github.com/fecommunity/reactpress/issues) - Bug reports and feature requests
263+
- [GitHub Discussions](https://github.com/fecommunity/reactpress/discussions) - Community discussions and Q&A
264+
- [Stack Overflow](https://stackoverflow.com/questions/tagged/reactpress) - Technical questions
265+
- [Twitter](https://twitter.com/reactpress) - Latest updates and news
121266

122-
## 👥 Contributing
267+
## 🤝 Contributing
123268

124-
We warmly invite contributions from everyone. Before you get started, please take a moment to review our [Contributing Guide](https://github.com/fecommunity/reactpress). Feel free to share your ideas through [Pull Requests](https://github.com/fecommunity/reactpress/pulls) or [GitHub Issues](https://github.com/fecommunity/reactpress/issues). If you're interested in enhancing our codebase, explore the [Development Instructions](https://github.com/fecommunity/reactpress/wiki/Development) and enjoy your coding journey!
269+
We welcome contributions of all kinds! Whether it's bug fixes, new features, documentation improvements, or translations, your help is appreciated.
125270

126-
1. [GitHub Discussions](https://github.com/fecommunity/reactpress/discussions)
127-
2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（English）
128-
3. [Segment Fault](https://segmentfault.com/t/reactpress)（Chinese）
271+
1. Fork the repository
272+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
273+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
274+
4. Push to the branch (`git push origin feature/AmazingFeature`)
275+
5. Open a Pull Request
129276

130-
You can also send me an email: [email protected]
277+
Please read our [Contributing Guide](https://github.com/fecommunity/reactpress/blob/master/CONTRIBUTING.md) for details on our code of conduct and development process.
131278

132279
## ❤️ Acknowledgments
133280

134-
The ReactPress project has been greatly inspired and assisted by the following open-source projects:
281+
ReactPress is inspired by and built upon the work of many amazing open-source projects:
135282

136-
- **[fantasticit]** - **[wipi]** - [[https://github.com/fantasticit/wipi](https://github.com/fantasticit/wipi)]
283+
- [Next.js](https://github.com/vercel/next.js) - React framework
284+
- [NestJS](https://github.com/nestjs/nest) - Progressive Node.js framework
285+
- [Ant Design](https://github.com/ant-design/ant-design) - UI design language
286+
- [TypeORM](https://github.com/typeorm/typeorm) - ORM for TypeScript and JavaScript
137287

138-
- **[Lrunlin]** - **[blog]** - [[https://github.com/Lrunlin/blog](https://github.com/Lrunlin/blog)]
288+
We're grateful to the authors and contributors of these projects for their excellent work.
139289

140-
- **[biaochenxuying]** - **[blog-react]** - [[https://github.com/biaochenxuying/blog-react](https://github.com/biaochenxuying/blog-react)]
290+
## 📈 Star History
141291

142-
- **[MrXujiang]** - **[next-admin]** - [[https://github.com/MrXujiang/next-admin](https://github.com/MrXujiang/next-admin)]
143-
144-
- **[lfb]** - **[nodejs-koa-blog]** - [[https://github.com/lfb/nodejs-koa-blog](https://github.com/lfb/nodejs-koa-blog)]
292+
[![Star History Chart](https://api.star-history.com/svg?repos=fecommunity/reactpress&type=Date)](https://star-history.com/#fecommunity/reactpress&Date)
145293

146-
……
294+
## 📄 License
147295

148-
We extend our heartfelt gratitude to the authors and contributors of these projects!
296+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
149297

150-
## ✨ Star History
298+
---
151299

152-
[![Star History Chart](https://api.star-history.com/svg?repos=fecommunity/reactpress&type=Date)](https://star-history.com/#fecommunity/reactpress&Date)
300+
<div align="center">
301+
<sub>Built with ❤️ by <a href="https://github.com/fecommunity">FECommunity</a></sub>
302+
</div>

0 commit comments

Comments
 (0)