Build variants

What is a build variant

In short, a build variant is just a collection of files we use in the project that can be replaced by another collection of files to vary how the application functions or looks.

For example, we use WindiCSS to handle CSS. We can use it to customize our theme, such as colors. Instead of typing text-[#f1f1f1] we can simply type text-primary in our classes. The color of 'primary' is then handled by the file windi.config.js. The color varies in our build configurations, therefore we swap out one copy of windi.config.js out for another when compiling different variants.

Another function of variants is to disable certain features, if for example a feature is experimental, or we provide multiple versions, that may suite other users needs, such as toggling more expert-level features off for classroom learning in elementary schools. These are found in features.json

Selecting variant

The first step of the build process is selecting which build variant should be built.

• simple (Branded, but reduced feature-set)
• unbranded (No branding and without colors)
• branded (Branded full-feature version)

These build variants are configured in prepEnv.js. This script can be used to switch between configurations

node prepEnv.js branded

will switch colors and feature-set according to the configuration found in the folder src/__viteBuildVariants__/ml-machine/. The script will then copy these files and place them into the root directory.

Creating variants

To create a new variant, go to prepEnv.js and add a new entry into the fileMoveTargets. For example

    "example": [ // Set source(first) and destination(second)
        ['./src/__viteBuildVariants__/example/windi.config.js', './windi.config.js'],
        ['./src/__viteBuildVariants__/example/features.json', './features.json']
    ]

Then we can create a new folder inside the __viteBuildVariants__ folder. This is just convention and not strictly required, the source files are just copied into the destination(overwriting) whenever the command node prepEnv.js example is executed.