Develop Frontend and Backend

This tutorial will help developers to develop and debug the frontend and backend projects of AREX. Additionally, welcome to contribute by submitting fixes to relevant issues and implementing new features to the main branch.

Project Structure

The service components of AREX include AREX-Front, AREX-Storage, AREX-Schedule, AREX-API.

Service	Description	YOUR local IP	Related Service Components	Minimum & Recommended Configurations
AREX-Front	AREX User Interface	10.5.1.100	AREX-API，Storage，Schedule Service	1 core 1G RAM
AREX-Storage	A set of remote storage APIs that provide AREX Agent to save records and get responses as mocks.	10.5.1.101	MongoDB，Redis，AREX-Web-API Service	2 core 3G RAM
AREX-Schedule	A set of schedule APIs that provide replay send and retrieve all responses for comparison.	10.5.1.102	MongoDB，Redis，Storage，AREX-API Service	2 core 4G RAM
AREX-API	Provides all the interfaces that AREX-Front needs to use.	10.5.1.103	MongoDB, Redis, Storage Service, AREX-Front	2 core 6G RAM

Configure the development environment

Backend project

To make debugging easier, we can first set up an AREX in our local environment using docker-compose and use the DB and Redis from that environment as our development environment. The installation documentation can be found here: http://arextest.com/docs/chapter1/quick-installation

AREX-API

1. Clone the arex-api project's codebase locally with the git clone command.

git clone https://github.com/arextest/arex-api.git

2. Open the project in IDEA.

3. Configure the startup parameters for the JVM, including overriding the necessary parameters in the configuration file. The -Darex.storage.service.url parameter is used to specify the address of the deployed storage service, the -Darex.report.mongo.uri parameter is used to specify the address of the deployed mongo, and the -Darex.redis.uri parameter is used to specify the address of the deployed redis address.

-Darex.storage.service.url=http://<storage_service_address>:8093
-Darex.report.mongo.uri=mongodb://arex:iLoveArex@<mongodb_address>:27017/arex_storage_db 
-Darex.redis.uri=redis://<redis_address>:6379/

4. Start debugging.

Storage and Schedule projects are started in a similar way, so here We will only describe the startup parameters for each project.

Startup Parameters for Storage Service

-Darex.storage.mongo.host=mongodb://arex:iLoveArex@<mongodb_address>:27017/arex_storage_db 
-Darex.storage.cache.url=redis://<redis_address>:6379/ 
-Darex.report.service.api=http://<arex_api_address>:8090/

Startup Parameters for Schedule Service

-Darex.storage.service.api=http://<storage_service_address>:8093 
-Darex.report.service.api=http://<arex_api_address>:8090 
-Darex.schedule.cache.redis.host=redis://<redis_address>:6379 
-Dmongo.uri=mongodb://arex:iLoveArex@<mongodb_address>:27017/arex_storage_db

Frontend project

Development environment

	Minimum configuration	Recommended Configurations
node	16.14	18
pnpm	8	8

Technology stack

• React 18
• AntDesign 5
• Zustand
• Emotion
• i18n
• pnpm
• ...

Directory structure

.
└── packages
    ├── arex                        # Main Project Package
    ├── arex-core                   # Public Component Packages - Provides heavy-duty components encapsulated for business logic.
    ├── arex-common                 # Core Component Package - Provides arex infrastructure components, reusable stateless components, utility functions
    ├── arex-request                # Request Packages - Provides support for browsers to send http-rest requests.
    └── arex-lite                   # Lite version - provides demo of arex project structure and components

Start the project

Clone the arex project's codebase locally with the git clone command.

git clone https://github.com/arextest/arex
cd arex
pnpm install
pnpm run dev

Run test scripts

pnpm run test

Pack and build

pnpm run build