Requirements

• node version >=14.17.1
• windows os only: windows-build-tools have been installed
• mac os only: Command Line Tools (CLT) for Xcode: xcode-select --install, developer.apple.com/downloads or Xcode 3
• arch linux os only: base-devel have been installed

Getting started

Clone the repository

git clone [email protected]:fe-x/gm_static_x_mes.git
# or git clone https://code.guanmai.cn/fe-x/gm_static_x_mes.git

Switch to the repo folder

cd gm_static_x_mes

Install dependencies (If you are blocked by GFW, please read the QA section)

yarn install

Move the config/sample.local.js to config/local.js.

mv config/sample.local.js config/local.js

Runs the app in the development mode

yarn start

Devlopement

Webpack DevServer Config

the config/local.js file:

module.exports = {
  port: 5555,
  proxy: [
    {
      context: ['/ceres'],
      target: 'https://x.guanmai.cn',
      // target: 'https://env-feature-order-abolish-calculate.x.k8s.guanmai.cn',
      // target: 'https://env-develop.x.k8s.guanmai.cn,
      changeOrigin: true,
    },
  ],
}

Webpack will merge config/local.js files, so you can configure webpack through js files. For more information about this json file, you can check this page

The proxy target list:

• develop: https://env-develop.x.k8s.guanmai.cn
• online: https://x.guanmai.cn
• feature: https://env-feature-you-branch-name.x.k8s.guanmai.cn

This branch name will be provided to you by the backend

mes.json

the config/mes.json file

{
  "mainLoadURL": "http://172.16.3.70:5555/mes_index",
  "printLoadURL": "http://172.16.3.70:8080/build/print.html",
  "isOpenDevTools": true,
  "showPrint": true,
  "isOpenPrintDevTools": true
}

copy the mes.json to user desktop, the electron will read the config, so you can configure elelctron through json files.

Remote Desktop

archlinux: you can use the xfreerdp remote to windows desktop

yay -S xfreerdp

xfreerdp /u:Administrator /p:123456 /f /v:172.16.3.100 +clipboard -themes -wallpaper -grab-keyboard

mac: you can use the microsoft-remote-desktop remote to windows desktop

windows: just use system bind remote desktop

https://docs.microsoft.com/en-us/windows-server/remote/remote-desktop-services/clients/remote-desktop-mac#get-the-remote-desktop-client

Test

When you are independently developing a function or fixing a bug, and no back-end changes are involved, you can provide a link in the following format to provide an environment for testers to test

https://env-develop.x.k8s.guanmai.cn/mes/you-branch-name/index.html

for example:

• https://env-develop.x.k8s.guanmai.cn/mes/feature-add-ssu-id/index.html
• https://env-develop.x.k8s.guanmai.cn/mes/hotfix-chenge-text/index.html

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://localhost:5555 to view it in the browser.

the default port is 5555, you can change this in the config/local.json

The page will reload if you make edits. You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

yarn lint

Use eslint to check for script errors

yarn lint:fix

Use eslint to check and try to fix script errors

yarn stylelint

Use stylelint to check for style errors

yarn stylelint:fix

Use stylelint to check and try to fix style errors

Note: If you have added these plugins to your editor, you rarely need to manually execute any of the above code specification related commands.

Enhance your development experience

The vscode editor extensions listed below can enhance your development experience, and other editors should have similar plugins.

• css modules
• eslint
• stylelint
• prettier
• tailwindcss
• vscode-styled-components
• GitLens — Git supercharged
• jest
• dotenv
• npm Dependency Links
• SVG Language Support

Learn More

There are a lot of link comments in the source code, if you do not understand the code, you might as well click the link in the comments to see!

QA

Q: yarn upgrade does not update package.json

A: ref https://github.com/yarnpkg/yarn/issues/2042

yarn global add npm-check-updates
ncu -u
yarn install --check-files
ncu -u

Q: What to do if the dependencies cannot be downloaded due to network problems

A: ref https://npm.taobao.org/mirrors

First execute the following command to add the mirror, and then use yarn install to download the dependencies

yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g

if it still does not work, you can try to use yarn --ignore-optional to skip the download of optional dependencies