The application building system in the JSS React sample app
The JSS React app includes some build system helpers to simplify working with the app.
Scaffolding
You can scaffold a new JSS React component using the command jss scaffold <componentName>
. The scaffold is defined by scripts/scaffold-component.js
, and is fully customizable to your needs. Scaffolding creates the React component and the disconnected component definition files, then provides helpful feedback about what to do to make your component work.
Dynamic config generation
The JSS app must be able to read parts of the JSS configuration, such as the current Layout Service endpoint config. To accomplish this, before a build runs, the script defined in scripts/generate-config.js
runs and dynamically assembles the src/temp/config.js
file. The application can import this file when it needs access to the configuration. This script is fully customizable and/or removable if you have different configuration requirements.
Dynamic component factory module
When a build starts, the JSS React app automatically generates the component builder in the src/temp/componentBuilder.js
file. The ComponentBuilder
class provides out of the box componentFactory
implementation. The component factory is a mapping between JSS component names and their React component implementations.
The src/temp/componentBuilder.js
file is generated using conventions for defining your JSS components. It helps avoid manually registering new components. When the app runs locally, the component builder watches for new components and updates the module. This auto-generation is defined in the scripts/generate-component-builder/index.js
file and is fully customizable.
To remove this convention from your JSS application:
-
Delete the
/scripts/generate-component-builder.js
file. -
In the
/scripts/bootstrap.js
file, remove the reference to the deleted script. -
Delete
start:watch-components
command and usages from thepackage.json
file.