A command line interface(CLI) tool for bundling One App and One App modules.
To bundle a One App module
To build a React component for usage as a One App module:
npm i -D @americanexpress/one-app-bundler
bundle-module script as part of your build. This script is provided by
When bundling a One App module, some options can be applied by adding a
bundler config object to a
In order to avoid duplicate code in your One App instance, you may want to
share a dependency across all your modules that is not already provided by One
App. These dependencies can be provided to your modules by your root
module. The root module should include in its configuration
providedExternals, which is an array of external dependencies to be bundled
with it and provided to other modules.
First make sure to add your dependency to your module's
npm install some-dependency
one-app-bundler to provide that dependency (and any others) as an external to your other modules:
Modules consuming these external dependencies must declare what they expect the
root module to provide by setting the
requiredExternals option. Any dependency
listed there will not be bundled with the module, but will be replaced with a
reference to the external dependency as provided by the root module.
Before doing so make sure to add said dependency to your
npm install some-dependency
Modules shouldn't configure both
Any module with
requiredExternals configured will be validate at runtime to ensure that
the root module is in fact providing those requiredExternals, and will fail to load if it is
If you attempt to include in
requiredExternals and dependencies
already provided by One App, your build will fail.
Set a custom performance budget
for your client module build. The default value is
webpackConfigPath, webpackClientConfigPath, & webpackServerConfigPath
You may extend the webpack configuration by providing paths to custom webpack config files in this option. Use of this option is at your own risk.
There are two options when customizing your webpack build.
webpackConfigPathto apply a custom config to both your client and server builds.
webpackServerConfigPathto apply different configs to your client and server builds. You don't need to add both of these options. You can pass only one if you wish to customize a single build target.
You may add additional paths for
purgecss to consider before stripping out
unused CSS by adding an array of glob patterns to
bundler.purgecss.paths. The example below illustrates how we would add
some-lib if we were applying custom styles to it in our module.
purgecss options. Please refer to the
purgecss Options Documentation
before enabling any of the following:
purgecss can be disabled for your module by adding
true. This option is only to be used in
rare instances and as a last resort, the effect of disabling will have a
negative impact on performance.
Specify what version of One App your module is compatible with
You can specify which version of One App you module is compatible with by simply adding the below configuration to your
Other Available Scripts
The following scripts are provided by
one-app-bundler and used by
npm run build:bundle
This would bundle one app.
npm run serve-module ../path-to-your-one-app-module
This would serve your module locally.
npm run drop-module ../path-to-your-one-app-module
This would stop serving your module locally.