quick-tech v0.0.25

Quick Tech Harness

Get Started

1. clone the repo
2. yarn install
3. to run in dev environment

Note: if you have problem installing sqlite3, please make sure your python version is below 3.10, and export PYTHON=$(pyenv which python)

yarn dev
yarn dev:electron

The commands above will run a single spa host application ameripharma-root-config, and let the electron load it in an app shell, one micro-frontend app will be hosted in the root config application, please bear in mind that the electron app is not a single spa application, it's just a shell for the single spa application, so running yarn dev:electron sololy won't work.

The environment associated with these two command is local.

To build the application, the host application and electron are build separately, for the shell(host application), the build actions are yarn build:webpack:production and yarn build:webpack for production and development respectively. For build electron app, yarn electron-pack is for all platform production build, and yarn electon-pack:robot is for x64 multi-platform build.

Environement Variables

Electron

For Electron runtime, the environment variables are all defined from electron-runtime.config.js. Some variables, such as NODE_ENV, APP_URL are generated in before-pack.js file. The before-pack.js convert environment files from .env.${NODE_ENV} files to the electron-runtime.config.js. Some others are defined and later modified when user change settings of the shell layer, for instance the SERIAL_NUMBER and FILE_DIR

Shell(Host Application)

All environment variables for the host application layer is from the .env files

Micro Frontend Apps

Environment varibles are from the corresponding projects

Debug

open a new coomand line tab

yarn electron-pack:local 
cd build/mac-arm64/quick-tech.app/Contents/Resources 
npx electron app.asar

Project Structure

There are three layers of the whole application. On the top is the electron. The single spa root config lies in the middle, and a react app serving as a module is at the bottom

1. First, the electorn part, it loads the host application, and perform special actions for events triggered in the micro frontend applications. For host application and children miscro frontend apps, the electron assist them with a websocket connection, and file system operations

2. Second, the single spa host application, it manages a global state store, a message broker, and a class to handle ws messages between this project and quickfill

3. At last, the react applications for actual user interface

Children Micro-frontend projects

More on the host application

When the app is up, ameripharma-root-config will try to read token from local mobx state store. The token should be already in the mobx store at this point. In the token exists, try to ping remote to test if the token is valid. If the token is not in the store or the token is not valid, the root config makes attempt to authenticate the client and fetch a new token. After the token is acquired, a ws network class instance should be created, and local indexeded + global store should update the token in the data.