Build configuration plugins
ScandiPWA introduces concept of "build plugins". This is a feature of ScandiPWA extensions.
To create a build plugin
Define an empty object as a value of the
scandipwa.build
field in your extension'spackage.json
Populate the configuration object with
cracoPlugins
field, set it to empty array.
Create a new folder in your extension's root, name it
build-config
:Create a new file in it, name it to represent it's build modification purpose
Populate an array of
cracoPlugins
in yourpackage.json
with a path to your new file (relative to the extension root).
Inside of your plugin file, define a
module.exports
equal to an object. This object may have two keys:plugin
(required) where the plugin implementation will be definedoptions
(optional) where the plugin options will be defined
Implement a plugin in the object created at the step 3). To do it, follow these guidelines.
To define a before run script
Define an empty object as a value of the
scandipwa.build
field in your extension'spackage.json
Populate the configuration object with
before
field, set it to empty string.
Create a new folder in your extension's root, name it
build-config
:Create a new file in it, name it to represent before-run script's purpose
Set the
before
field in yourpackage.json
equal to a path to your new file (relative to the extension root).
Inside of your plugin file, define a
module.exports
equal to a function.Implement a script based on your needs. No guidelines here, it's up to you!
Build plugin implementation syntax
The plugin syntax of Create ScandiPWA App is based on the Craco (Create React App Configuration Override) plugin syntax.
Each plugin is an object, which might contain following keys (you can combine them):
overrideCracoConfig
- allows to customize the Craco configuration object.overrideWebpackConfig
- allows to customize the Webpack config.overrideDevServerConfig
- allows to customize the Webpack dev-server config
The values of this object keys are functions, which implement an override for the configuration. The function may be asynchronous.
Craco configuration plugin
The function overrideCracoConfig
allows a plugin override the configuration object before it's process by Craco.
The function must return a valid Craco configuration object. The function will be called with a single object argument having the following structure:
{
cracoConfig, // The original CRACO configuration object
pluginOptions, // The plugin options provided by the consumer
context: {
env, // The current NODE_ENV (development, production, etc..)
paths // An object that contains all the paths used by CRA
}
}
Webpack configuration plugin
The function overrideWebpackConfig
allows plugin override the Webpack configuration object after it's been customized by Craco.
The function must return a valid Webpack configuration object. The function will be called with a single object argument having the following structure:
{
webpackConfig, // The webpack config object already customized by craco
cracoConfig, // The configuration object read from the craco.config.js file provided by the consumer
pluginOptions, // The plugin options provided by the consumer
context: {
env, // The current NODE_ENV (development, production, etc..)
paths //An object that contains all the paths used by CRA
}
}
Webpack dev-server configuration plugin
The function overrideDevServerConfig
let a plugin override the dev server config object after it's been customized by Craco.
The function must return a valid Webpack dev-server configuration object. The function will be called with a single object argument having the following structure:
{
devServerConfig, // The dev server config object already customized by craco
cracoConfig, // The configuration object read from the craco.config.js file provided by the consumer
pluginOptions, // The plugin options provided by the consumer
context: {
env, // The current NODE_ENV (development, production, etc..)
paths, // An object that contains all the paths used by CRA
allowedHost // Provided by CRA
}
}
Last updated
Was this helpful?