PaddleLabel Frontend

This project is initialized with Ant Design Pro. Follow is the quick guide for how to use.

Environment Prepare

Code Format

We use ESLint, Prettier and Stylelint to keep an uniform code format.
Line-Seperator is LF. Please make sure Git does not automatically transfer to CRLF on Windows:

git config core.autocrlf false

Locale File Key Format

Write long, comma seperated key name, instead of multi-level nested key name.
Arrange content that belongs to the same block together, instead of always add at the buttom.

Good Example:

{
  "app.welcome.link.fetch-blocks": "Fetch all blocks",
  "app.welcome.link.remove-blocks": "Remove all blocks"
}

Bad Example(Violates #1):

{
  "app": {
    "welcome": {
      "link": {
        "fetch-blocks": "Fetch all blocks",
        "remove-blocks": "Remove all blocks"
      }
    }
  }
}

Bad Example3(Violates #2):

{
  "app.welcome.link.fetch-blocks": "Fetch all blocks",
  "app.welcome.other-function.other-wording": "Anything",
  //...
  "app.welcome.link.remove-locks": "Remove all blocks" // Newly added
}

Happy coding with VSCode

Recommanded Plugins in .vscode/extensions.json:

ESLint: Strict syntex check.
Prettier: Code Format.
Sneak Mark: Check non-ascii marks in code.
Stylelint: CSS Format.
Docker: Needed if you dev with docker.

Recommanded Settings in .vscode/settings.json:

Auto Save: No
Default Formatter: Prettier
Format On Paste: Yes
Format On Save: Yes
Format On Save Mode: File

Install `node_modules`

npm install --location=global yarn
yarn

If you're in mainland China, recommand to use tyarn instead.

[Optional] Install `node_modules` with Docker

Build Image

docker build -t PaddleLabel-Frontend -f Dockerfile.dev .

Install node_modules

docker run -ti -v ~/gitroot/PaddleLabel-Frontend:/usr/app PaddleLabel-Frontend yarn

Start APP

docker run -ti -p 8000:8000 -p 3000:3000 -v ~/gitroot/PaddleLabel-Frontend:/usr/app npm start --name PaddleLabel-Frontend

Tips for Ubuntu or WSL(Windows Subsystem Linux)

Switch default shell from dash to bash to prevent [ issue in git hooks:

sudo dpkg-reconfigure dash
# Then select `No`

Manage multiple node environments with ease: NVM.

Provided Scripts

There're some useful script to help you quick start and build with web project, code style check and test.

Scripts provided in package.json. It's safe to modify or add additional script:

Start project

npm start

Build project

npm run build

Check code style

npm run lint

You can also use script to auto fix some lint error:

npm run lint:fix

Test code

npm test

[Optional] With docker

Add docker run -ti PaddleLabel-Frontend in front of above commands.

For example, before:

npm test

After:

docker run -ti PaddleLabel-Frontend npm test

Generate API

yarn global add @openapitools/openapi-generator-cli

openapi-generator-cli generate \
-i ../PaddleLabel/paddlelabel/openapi.yml \
-g typescript-fetch \
-o src/services/web/ \
--additional-properties=useSingleRequestParameter=false \
--remove-operation-id-prefix \
--skip-validate-spec

openapi-generator-cli generate \
-i ../PaddleLabel-ML/paddlelabel_ml/openapi.yml \
-g typescript-fetch \
-o src/services/ml/ \
--additional-properties=useSingleRequestParameter=false \
--remove-operation-id-prefix \
--skip-validate-spec

E2E Testing

There are two sets of testing data, choose one in config file
run paddlelabel on 17995 or specify port in cypress config
test with one of the followings:

npx cypress open # with real time visulization
npx cypress run # headless with video playback

Liyulingyue/PaddleLabel-Frontend