Chats Development Guide

Chats 开发指南

欢迎使用 Chats！在我上一篇博客 /sdcb/p/18597030/sdcb-chats-intro 中，我介绍了 Chats 的各种功能，但所有功能都是用代码一行一行写出来的。

在这个指南中，我将帮助您快速上手开发，了解如何在开发阶段使用和配置 Chats 项目。Chats Adoption of a front-end and back-end separation model during the development phase，However, in a production environment the front and back ends are merged into a single release package。

technological base

Rear end: Developed in C#/ Core.
Front End: Developed with /React/TypeScript.
CSS： Use Tailwind CSS.

environmental needs

Git
.NET SDK 8.0
>= 20
Visual Studio Code
Visual Studio 2022 (optional but recommended)

Get Code

First, clone the Chats code repository:

git clone /sdcb/

Front-end and back-end co-development

Backend Development Guide

Open the solution using Visual Studio:

In the root directory, find thechats/ solution file and open it. In Visual Studio, you will see a file named of the website project.
Run the project:
- Press F5 to run the project. The default configuration checks for SQLite database files exists, if not, it is automatically created in the./AppData directory and initialize the database.
- The service will be available inhttp://localhost:5146 running on it and providing API services. If running in development mode (ASPNETCORE_ENVIRONMENT=Development), Swagger UI will be available in thehttp://localhost:5146/swagger Available on.
Configuration file description:

The default configuration is in the but it is highly recommended to use the Manage sensitive information. This prevents leakage of sensitive development configurations in the code base.

The default configuration structure is as follows:
```
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "": "Warning"
    }
  },
  "AllowedHosts": "*",
  "FE_URL": "http://localhost:3001",
  "ENCRYPTION_PASSWORD": "this is used for encrypt auto increment int id, please set as a random string.",
  "DBType": "sqlite",
  "ConnectionStrings": {
    "ChatsDB": "Data Source=./AppData/"
  }
}
```
Configuration options explained:
- Logging: Manage logging levels, defaults to message level logging.
- AllowedHosts: Configure the hostnames to which access is allowed.* Indicates acceptance of all.
- FE_URL: The URL of the front end, which by default points to thehttp://localhost:3001The front-end can access the back-end via CORS across domains. The front-end can access the back-end via CORS across domains. The default port 3000 requires no additional configuration.
- DBType: database type, supportsqlite(default),mssql respond in singingpostgresql。
- ConnectionStrings:ChatsDB:: Database The concatenation string that follows theDBType And change.
- ENCRYPTION_PASSWORD: Used to encrypt self-incrementing IDs. should be set to a random string in production environments to avoid exposing the ID directly.
Why use integer + encryption instead of GUID?

At the beginning of the Chats project, we did use GUIDs, but I switched to self-incrementing integer Id's for the following 2 reasons and after careful consideration:
- The GUID field is larger and takes up more space;
- GUIDs as aggregated indexes can lead to index fragmentation and impact performance;
Manage sensitive configurations:

Not recommended for The configuration items can be modified directly in the The configuration items can be modified directly through Visual Studio using the：
- Visual Studio: Right-click Project ->Managing user confidentiality。
- CLI: Use the following command to manage user secrets.
```
dotnet user-secrets init
dotnet user-secrets set "key" "value"
dotnet user-secrets list
```
This prevents you from accidentally uploading sensitive information when submitting code.
Does not use the Visual Studio runtime:

Go to the back-end catalog:
```
cd ./chats/src/BE
dotnet run
```

Front-end Development Guide

Go to the front-end directory:
```
cd ./chats/src/FE
```
establish. file and specify the backend URL:
```
echo "API_URL=http://localhost:5146" > .
```
Install dependencies and run the development server:
```
npm i
npm run dev
```

After running, the front-end service will listen to thehttp://localhost:3000The backend already has a CORS configuration to support this. CORS configuration is already supported on the backend without additional configuration.

Front-end development only

For scenarios focused on front-end development, we provide a deployed back-end development environment:

Cloning Warehouse:
```
git clone /sdcb/
```
Go to the front end directory and specify the remote back end:
```
cd ./chats/src/FE
echo "API_URL=:88" > .
```
This environment is already allowed by defaulthttp://localhost:3000 Cross-domain access behavior for this address.
Install the dependency and run it:
```
npm i
npm run dev
```

caveat

Execute if you want to simulate the production packing process:

npm run build

This command generates the./out folder, which contains all the necessary static files.

Backend development only

For scenarios that focus on back-end development, you can use packaged front-end files:

Clone the repository and enter the backend catalog:
```
git clone /sdcb/
cd ./chats/src/BE
```
Download and unzip the front-end static files and place them in thewwwroot：

Linux:
```
curl -O /sdcb/chats/releases/latest/download/
unzip 
cp -r chats-fe/* wwwroot/
```
Executed under Windows:
```
Invoke-WebRequest -Uri "/sdcb/chats/releases/latest/download/" -OutFile ""
Expand-Archive -Path "" -DestinationPath "."
Copy-Item -Path ".\chats-fe\*" -Destination ".\wwwroot" -Recurse -Force
```
take note of
1. I have at the same time included the above/sdcb/chats/releases/latest/download/ The address is uploaded to my personal Minio file server at::88/chats/latest/
  
  If you are too slow to download directly from Github, you can switch to this address.
2. This address corresponds to the Attachment was added by Github Actions in the code mergemain The branches are automatically generated when they come in and are merged into thedev Branching does not trigger updating this file.
Run the back end:
```
dotnet run
```
Or open the and run Project.

After running, access thehttp://localhost:5146/login You can go directly to the Chats login screen to realize the deployment mode without separating front-end and back-end.

We hope this guide will help you get started with the Chats project. If you have any questions, please check the documentation in the source code or on the/sdcb/chats Create issue to get support.