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

• 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

1. Write long, comma seperated key name, instead of multi-level nested key name.
2. 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
}

Recommanded Plugins in .vscode/extensions.json:

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

Recommanded Settings in .vscode/settings.json:

1. Auto Save: No
2. Default Formatter: Prettier
3. Format On Paste: Yes
4. Format On Save: Yes
5. Format On Save Mode: File

npm install --location=global yarn
yarn

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

• 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

• 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.

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

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

For example, before:

npm test

After:

docker run -ti PaddleLabel-Frontend npm test

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

• 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