yangshaoxue c069ce5aaf docs: add development guide
add development guide

Change-Id: Id8fcac77eb5691e297f99cfe845c1b53bf1709bf
2022-09-08 18:12:42 +08:00

2.7 KiB

Ready To Work

For more information about installation, refer to the source-install-ubuntu

Preparation before development

  • Node environment

    • Requirement in package.json: "node": ">=10.22.0"
    • Verify nodejs version
    node -v
  • Yarn

    • Install yarn
    npm install -g yarn
  • Install dependencies

    • Execute in the project root directory, which is the same level as package.json, and wait patiently for the installation to complete
    yarn install
  • Prepare a usable backend

    • Prepare an accessible backend, for example: https://172.20.154.250
    • Modify the corresponding configuration in config/webpack.dev.js:
    if (API === 'mock' || API === 'dev') {
      devServer.proxy = {
        '/api': {
          target: 'https://172.20.154.250',
          changeOrigin: true,
          secure: false,
        },
      };
    }
  • Configure access host and port

    • Modify devServer.host and devServer.port
    • Modify the corresponding configuration in config/webpack.dev.js
    const devServer = {
      host: '0.0.0.0',
      // host: 'localhost',
      port: 8088,
      contentBase: root('dist'),
      historyApiFallback: true,
      compress: true,
      hot: true,
      inline: true,
      disableHostCheck: true,
      // progress: true
    };
  • Completed

    • Execute in the project root directory, which is the same level as package.json
    yarn run dev
    • Use the host and port configured in config/webpack.dev.js to access, such as http://localhost:8088
    • The front-end real-time update environment used for development is done.

Front-end package used in production environment

Have the required nodejs and yarn

Execute in the project root directory, which is the same level as package.json

yarn run build

The packaged files are in the dist directory and handed over to the deployment personnel.

Front-end package used for testing

Have the required nodejs and yarn

Execute in the project root directory, which is the same level as package.json

yarn run build:test

The packaged files are in the dist directory

Note

This test package is designed to measure code coverage

It is recommended to use nginx to complete the E2E test with code coverage