1-ready-to-work.md

English | Chinese

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

• Attention! ! ! This test package is designed to measure code coverage

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