Execution of logic before build, enables programmatically setting environment variables. To achieve it, the following actions are required:

1. Create a new extension

In order to create a build configuration plugin an extension module should be created.

To create such an extension module we need to make a new NPM package. This can be done by creating a new folder and inside running the following commands:

npm init # Using NPM
yarn init # Using Yarn

It is important for an extension to be recognized by Mosaic. To do it, add a mosaic field to the package.json:

{
	// ...
  "mosaic": {
    "type": "extension"
  }
	// ...
}

2. Register a before build script

Next, create a script to execute before build (for example ./build-config/before.js) and register it in mosaic section.

<aside> 🧠 Location of build configuration plugin does not matter technically. However, to get better ESLint suggestions, put it inside of a folder starting with build prefix.

</aside>

{
  "mosaic": {
	"type": "extension"
    "build": {
      "before": "./build-config/before.js"
    }
  }
}

3. Implement a logic to run before build

Implement a script to run before build (created previously, for example ./build-config/before.js):

module.exports = () => {
	// TODO: update ENV, create files, etc
};

4. Link the extension

Install and enable the newly created extension, by installing it from filesystem. Given extension name test-extension, located in packages/test, run:

yarn add test-extension@link:./packages/test # using Yarn
npm i test-extension@file:./packages/test # using NPM

<aside> 🧠 When using NPM, the package is not automatically linked (which means updates will not be synced after installation). To avoid it, make sure the package.json contains the following scripts:

// ...
"scripts": {
	// ...
  "postinstall": "scandipwa-scripts link",
  "postupdate": "scandipwa-scripts link"
}
// ...

</aside>

5. Enable the extension

In the package.json, enable the extension by setting it to true:

// ...
"extensions": {
	// ...
	"test-extension": true
}
// ...