1. Project Overview

He Tu is a low-code platform, which can quickly generate various backend pages through a visual interface, greatly reducing development costs

He Tu is a project incubated by Beike Zhifu, and it has been landed in most business lines of the company, completing 200+ projects and 1500+ pages

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• ♀️ Simple and powerful visual editor
•   High-quality backend management system template that can be used out of the box
• ⚙️ All development processes are online, saving communication, debugging, and maintenance costs
•   Developed using React, TypeScript, nodejs, and express

Environment Compatibility

• Modern browsers, IE11 and above

5. Tech Stack

System architecture diagram

Preparation

1. An email account

Used to send verification codes, and SMTP service needs to be enabled

2. MySQL database

This project uses MySQL 5.7 version

• Method 1: Manual deployment of MySQL database
• Method 2: Purchase MySQL cloud service

3. Initialize database

Import the server/open_hetu.sql file into the database using the MySQL GUI tool

4. Create configuration file

Clone the project, and create a system_config.ini file in the project root directory, and configure the contents as follows (replace **** with your own configuration, and remove comment contents)

[server]
port = 9536         // node service startup port

[mysql]             // mysql configuration
host = ****
port = ****
user = ****
password = ****
database = ****

[email]
host = smtp.163.com // SMTP service domain
port = 364          // connection port
user = ****         // public email account
pass = ****         // authorization password

If the project reports that host port is not found, you can try writing the configuration directly in the project

5. Globally install yarn

npm install -g yarn

Start

Step 1: Start component library service

# Enter plugin directory
cd ./plugin

# Install dependencies
yarn

# Package output esm module
yarn run build:umd

# Start component library service
yarn run server:dist

Open

http://127.0.0.1:8080/manifest.json to preview, and you can see the following content

{
  "files": {
    "index.js": "/0.0.6/hetu.umd.development.js",
    "index.min.js": "/0.0.6/hetu.umd.production.min.js",
    "index.css": "/0.0.6/index.css"
  },
  "entrypoints": [
    "index.js",
    "index.css"
  ]
}

He Tu main application will automatically read the contents and dynamically load resources

Step 2: Install dependencies

Install client layer dependencies

cd ../client && yarn

Install server layer dependencies

cd ../server && yarn

Step 3: Start service

Start client layer service

cd ../client && yarn start

Start server layer service

cd ../server && yarn dev

Open http://127.0.0.1:1234 for preview, you can register an account with any email

Development Process#

River Map's development, debugging, testing, and deployment are all done in the browser