Prerequisite

Framework and Library

Front-End projects heavily use Ant Design Eco System (https://ant.design/) to build web application. Developer must familiar with following stack in order to understand and develop with Front-End projects:

• And Design
• And Design Pro
• UmiJS
• Open API with Swagger

Version control

Using Git and GitFlow

Project setup

Front-End projects using pre-built template from Umi v3, reference to Umi v3 project for details (not Umi v4 since base template of v4 is very simple).

Develop with production server

Download OpenApi json spec from production server (https://api.namde.vn/api-doc/) to .openapi folder and rename 'api.namde.vn.json'

Importance

OpenApi json spec from production serve will be block in future for security purpose

Edit config/config.ts in project to use that file

{
  //...other settings
  openAPI: [
    REACT_APP_ENV == 'pre'
      ? {
          requestLibPath: "import { request } from 'umi'",
          schemaPath: `${path.resolve(__dirname, '../.openapi/api.namde.vn.json')}`,
          projectName: API_PROJ_NAME,
          mock: false,
        }
      : {
          requestLibPath: "import { request } from 'umi'",
          schemaPath: 'http://localhost:3000/api-doc-json/',
          projectName: API_PROJ_NAME,
          mock: false,
        },
  ],
}

Update API generation

npm run openapi:pre

Run in development

npm run start:pre