A builder is an app (basically a .json file) responsible for interpreting the code of other apps and transforming it. It works as an API service that will process and interpret a directory in your app.
For example: the React builder transforms the source code of TypeScript React components into compiled bundles, ready to be imported into Render apps.
As a result, It's important for builders to:
- Have very well-defined and minimal responsibilities;
- Be abstract and opinionated;
- Allow for fine-grained permission control.
We currently work with several builders that simplify app development by making each part of an app's responsibilities clear and well separated.
By dividing responsibilities into smaller builders, we will be able to evolve them separately - faster and with fewer stop-the-world breaking changes. They are:
Styles Builder takes your styles.json file when building and uses a Tachyons generator to properly produce your store's CSS.
This is the builder responsible for powering Store Framework stores. It interprets everything that is inside an app's /store directory following 4 steps with different complexity levels:
- createParseFiles - Where the parsing of .json files in /store takes place;
- resolve - Responsible for validating the blocks, interfaces and routes defined by those files;
- maybeAppendDependency - Adds new dependencies to the app (if needed);
- writeAssets - Writes the build result that will be sent to the IO registry.
Builder that processes an app's documentation and make it available on VTEX IO Docs. Each app is responsible for containing its own documentation, written in Markdown (.md) format in a /docs directory, where Docs Builder can find it and work on it.
GraphQL Builder is responsible for processing GraphQL files (.graphql or .gql) in an IO app. These files are used to define a GraphQL's API and Schema. As expected, these files are found in the /graphql directory.
Messages Builder empowers VTEX IO internationalization. It reads json files associated with different locales within /messages and makes them available for front-end applications to use via react-intl.
This is the builder responsible for processing the source-code and configuration of Pixel Apps in VTEX IO. The files picked up by this builder are located in /pixel.
The VTEX Assets Builder is responsible for handling assets within store theme blocks by getting all asset paths used and uploading them in the File Manager service. You can learn how to use it by accessing the recipe on Using the Assets Builder.
The Configurations Builder allows you to allocate code pertaining to service configurations to an app that's independent on the platform. You can learn how to use it by accessing the recipe on Creating service configuration apps.