@zohodesk/client_build_tool

# Configuration Documentation The following documentation provides an overview of the configuration options available in the Client Build Tool (CBT) and their default values. You can customize these options to suit your project's requirements. > You can specify your configuration in either `package.json` file under Key `react-cli` or in `cbt.config.js` file under the `config` export (`cbt.config.js` is default config file you can change config file by `--config_file=<your-config-file>`). ## Global Configuration ### context > Type: (string) Specifies the context of the application. The default value is `'app'`. <br>When using your dev url will work with this. http://localhost:9090/app You can change this with cli option `--context`, Example: `--context=my-app`. ### devtool > Type: (string) Specifies the devtool option for source mapping. The default value is `'hidden-cheap-source-map'`. you can refer more value form webpack document. ### enableFileNameHashing > Type: (boolean) Specifies whether to enable chunk hash for file names. The default value is `false`. You can change this via cli option `--enable_hash`, ### statsLogConfig > Type: (string | object) to customize default webpack log after build finished. You can change this via cli option `--enable_hash`, ### devModeContentHashAllowedTypes > Type: (object) > NOTE: this feature enabled from v 0.0.2 In some cases or project there will be a need for hash even though they run dev mode. this option enables that feature. Mostly reason for this is multiple assets have same name. Example two different Image have same name. It was type of object you can specify which type of asset needs to be as hash in dev mode. Example: (below config is default) ```json { "image": true, "font": true, "svg": true, "audio": true, "video": true } ``` ### devLikeHash > Type: (boolean) > NOTE: this feature enabled from v 0.0.2 Specifies whether to disable chunk hash for file names in production mode. The default value is `false`. Use case: in some projects there is a need for run production build in dev server for testing. this option will provide that feature You can change this via cli option `--dev_like_hash`, ### disableReactDevWarning > Type: (boolean) > NOTE: this feature enabled from v 0.0.2 Specifies whether to disable react dev warning such as prop-type warnings will be removed in dev mode build or server. You can change this via cli option `--disable_react_dev_warning`, ### bundleAnalyze > Type: (boolean) Specifies whether to generate bundle analysis reports. The default value is `false`. When enabled `report.html` will be created. that report.html will have an interactive grid visualization of the contents of all your bundles. for more https://www.npmjs.com/package/webpack-bundle-analyzer we internally using this. You can change this via cli option `--bundle_analyze`. ### enableMockReplace > Type: (boolean) Specifies whether to enable mock replacement in `index.html` for random `dir` and random `locale`. when you enable RTL split or i18n split (your see configuration for rtl and i18n later). The default value is `false`. You can change this via cli option `--enable_mock_replace`. ### noPublicPath > Type: (boolean) Specifies whether to exclude the public path from asset URLs. The default value is `false`. With set as `true` in final output domain will not be added only relative path will used for download resources like js, css ...etc. You can change this via cli option `--no_public_path`. ### output > Type: (string) Specifies the output directory for the build or bundled assets. The default value is `'build'`. this option is for specify output folder path, where bundled assets placed or will be generated. You can change this via cli option `--output`. ### mode > Type: (string) Specifies the mode for the application build. Mode are either `dev` or `prod` for devServer or Build. The default value is `null` indicating that the mode will be determined by the build tool or framework. Which means for devServer default value will be `dev` and for Build default value will be `prod`. You can change this via cli option `--mode=dev`. ### printProgress > Type: (boolean) Specifies whether to print build progress information. The default value is `false`. This is only for debugging purposes. You can change this via cli option `--print_progress`. ## Server Configuration ### server.httpsCerts > Type: (string) Specifies the path to the HTTPS certificates used by the server. The default value is `'@zohodesk-private/client_dev_cert'`. ### server.host > Type: (string) Specifies the hostname for the server. The default value is the result of the `hostname()` function. ### server.port > Type: (number) Specifies the port number on which the server will listen. The default value is `9090`. You can change this via cli option `--port=9090`. ### server.domain > Type: (string) Specifies the domain for the server. The default value is `'tsi'`. You can change this via cli option `--domain=tsi`. ### server.disableContextURL > Type: (boolean) Specifies whether to disable the context URL feature. The default value is `false`. ## Mock Server Configuration ### mockServer.enable > Type: (boolean) Specifies whether the mock server functionality is enabled or disabled. The default value is `false`. You can change this via cli option `--enable_mock`. ### mockServer.separateSeverPort > Type: (number) Specifies the separate server port for the mock API server. The default value is `null`. If this option specified with port, then mock server has to be run separately. like this `cbt mock_server` more details [here]() You can change this via cli option `--mock_port=5000`. ### mockServer.disableNodemon > Type: (boolean) Specifies whether to disable nodemon for the mock server. The default value is `false`. You can change this via cli option `--disable_nodemon`. ### mockServer.mockEntryFile > Type: (string) Specifies the entry file for the mock API server. The default value is `'mockapi/index.js'`. ### mockServer.mockPrefix > Type: (string) Specifies the prefix for the mock API routes. The default value is `'/api'`. You can change this via cli option `--mock_prefix=/api`. ## CSS Configuration ### css.classNameOptions.customizations > Type: (array) Specifies an array of customizations for generating CSS class names. Each customization rule is represented as an object with the following properties: - `enable` (boolean): Specifies whether the customization rule is enabled or disabled. - `blob` (string): Specifies the pattern for generating class names. - `patterns` (array): Specifies the file patterns to which the customization rule should be applied. ### css.classNameOptions.classNamePrefix > Type: (string) Specifies the prefix to be added to all generated class names. The default value is `'zd'`. ### css.plugins > Type: (object) Specifies the configuration options for PostCSS plugins. Each plugin is represented as a key-value pair, where the key is the plugin name and the value is an object containing plugin-specific options. For more details [here](docs/CSSCustomPluginsDocumentation.md) ### css.customPlugins > Type: (array) Specifies an array of custom CSS plugins to be used in the build process. you can specify which ever postcss plugin in this array. ## Internationalization (i18n) Configuration ### i18nChunkSplit.chunkSplitEnable > Type: (boolean) Specifies whether to enable chunk splitting for internationalization. The default value is `false`. You can change this via cli option `--i18n_split`. ### i18nChunkSplit.disableDefault > Type: (boolean) Specifies whether to disable the default internationalization chunk. The default value is `false`. ### i18nChunkSplit.templateLabel > Type: (string) Specifies the template label for internationalization chunk splitting in Initial HTML file . The default value is `'{{--user-locale}}'`. ### i18nChunkSplit.localeVarName > Type: (string) Specifies the variable name to store the user's locale. The default value is `'document.documentElement.lang'`. ### i18nChunkSplit.jsonpFunc > Type: (string) Specifies the JavaScript function name for loading internationalization chunks. The default value is `'console.log'`. ### i18nChunkSplit.jsResource > Type: (string) Specifies the JavaScript resource file for internationalization chunks. The default value is `null`. ### i18nChunkSplit.propertiesFolder > Type: (string) Specifies the folder containing the properties files for internationalization chunks. The default value is `null`. ## Public Folders Configuration ### publicFolders > Type: (array) Specifies the public folders to be copied to the build output directory. The value is an array of file paths and objects representing source and target paths. - **source** (string): Specifies the relative path of the source folder that contains the public assets. The source path should be relative to the location of the CBT configuration file. - **target** (string): Specifies the relative path of the target folder where the public assets will be copied in the build output directory. The target path should also be relative to the location of the CBT configuration file. - **toType** (string): Specifies the type of asset being copied. The value can be `'dir'` for a directory or `'file'` for a single file. This property helps CBT determine how to handle the asset during the copying process. For example, the default configuration specifies that the `'public'` folder should be copied to the same location (`'public'`) in the build output directory, and the asset being copied is a directory (`'dir'`). You can add additional entries to the `defaultPublicFolders` array to include multiple public folders in your project. Each entry should follow the same structure as described above, providing the appropriate source, target, and toType values for each folder you want to include. Please note that the source path should be specified as a relative path, not an absolute path. Relative paths help ensure the portability and flexibility of the build process across different environments and systems. By configuring the `publicFolders` array, you can ensure that the specified public folders and their contents are copied to the appropriate location in the build output directory, making them accessible to your application during runtime. ## Application Configuration ### app.entryFile > Type: (string) Specifies the entry file for the application. The default value is `'src/index.js'`. You can change this with cli option `--entry`, Example: `--entry=src/index.js`. ## Resolve Configuration Documentation ### resolve > Type: (object) Specifies the configuration options allows you to configure module resolution and aliases for your project. ### resolve.preferLocalFirst > Type: (boolean) Specifies whether local modules should take precedence over globally installed modules during module resolution. When set to `true`, local modules will be prioritized.(CBT will prioritize local modules over globally installed ones.) The default value is `false`. ### resolve.defaultAlias > Type: (boolean) Specifies whether to use the default alias configuration. When set to `true`, CBT applies default alias rules to enhance module resolution. The default value is `true`. ### resolve.moduleResolvePath > Type: (string) Specifies the path to resolve modules. The default value is `''`. This option sets the base path for resolving module imports. When empty string given we use default packages that are provided By CBT. When some package name given we first search for it locally then we will check for globally. So When you use this option you will have an option that use global packages that are use full in mono repo packages. > NOTE: Currently lerna --hoist not tested But we will added it in future. You can change this with cli option `--module_resolve_path` > NOTE: If you do not need default packages form CBT you can set this option to `'node_modules'`. ### resolve.alias > Type: (object) Allows you to define custom aliases for module resolution. Each key-value pair in the `alias` object represents an alias mapping, where the key is the original module path and the value is the replacement module path. You can modify the provided configuration to suit your specific project requirements. For example, you can add more aliases, change the module resolution path, or adjust the preferences for local and global module resolution. By customizing the `resolve` configuration, you can control how modules are resolved and provide alternative paths for module imports, enhancing the flexibility and customization of your project's module resolution process. Examples will be separate document. > Note that the `resolve` configuration is specific to module resolution and does not directly impact the build process. It helps the build tool locate and resolve modules correctly during the bundling or transpilation process. ## HTML Template Configuration ### htmlTemplate.templateFile > Type: (string) Specifies the HTML template file for the application. The default value is `'src/index.html'`. You can change this with cli option `--initial_html=src/index.html` ### htmlTemplate.minify > Type: (null|Object) Specifies options for minifying the HTML template. The default value is `null`. For more [details](https://github.com/jantimon/html-webpack-plugin#minification) ### htmlTemplate.inject > Type: (boolean) Specifies whether to inject assets into the HTML template. The default value is `true`. ## Embedded Functional Components (EFC) Configuration ### efc.hasEFC > Type: (boolean) Specifies whether the application has Embedded Functional Components. The default value is `false`. You can change this with cli option `--enable_efc` ### efc.entryPointName > Type: (string) Specifies the entry point name for the Embedded Functional Components. The default value is `'efc'`. ### efc.entryFile > Type: (string) Specifies the entry file for the Embedded Functional Components. The default value is `'src/efc.js'`. You can change this with cli option `--efc_entry=src/efc.js` ### efc.version > Type: (string) Specifies the version of the Embedded Functional Components. The default value is `'v1'`. You can change this with cli option `--efc_version=v1` ### efc.createSDkFile > Type: (boolean) Specifies whether to create the Embedded Functional Components SDK file. The default value is `false`. You can change this with cli option `--create_efc_sdk` ### efc.templateFilePath > Type: (string) Specifies the template file path for the Embedded Functional Components. The default value is `'efcTemplate.js'`. For more [details](docs/EFCFileTemplate.md) ### efc.outputFile > Type: (string) Specifies the output file name for the Embedded Functional Components SDK. The default value is `'efc-sdk-[version].js'`. You can change this with cli option `--efc_output=efc-sdk-[version].js` ## Babel Customizations The `babelCustomizations` object in the provided code represents a set of customizations that can be applied to the Babel configuration within the context of the Client Build Tool (CBT). These customizations allow you to fine-tune how JavaScript code is transpiled and transformed during the build process. The documentation for the individual customizations [details](docs/BabelCustomizations.md) ## Webpack Configuration ### webpackPlugins > Type: (array) Specifies an array of custom Webpack plugins to be used in the build process. ## Vendor Patterns Configuration ### vendorPatterns > Type: (array) Specifies an array of patterns for vendor files. These pattern can be used for either include or exclude. this is array of glob patterns. So it would be better to think it as `.gitignore`. we internally use `'ignore'` So please check it as well for complex pattern needs. ## CDN Mapping Configuration ### cdnMapping.isCdnEnabled > Type: (boolean) Specifies whether CDN mapping is enabled or disabled. The default value is `false`. ### cdnMapping.variableName > Type: (string) Specifies the variable name for CDN mapping. The default value is an empty string.This js statement will be used for cdn (domain that will server static assets such as js, css ) for download dynamic chunks (assets) Example value: `window.__CDN_URL__` ### cdnMapping.cssTemplate > Type: (string) Specifies the CSS template for CDN mapping. This template will be used in initial html to download initial css assets. The default value is an empty string. Example value: `{{--css-cdn-domain}}` ### cdnMapping.jsTemplate > Type: (string) Specifies the JavaScript template for CDN mapping. This template will be used in initial html to download initial js assets. The default value is an empty string. Example value: `{{--js-cdn-domain}}` ### cdnMapping.i18nTemplate > Type: (string) Specifies the template for mapping i18n assets to CDN. This template will be used in initial html to download initial i18n assets. The default value is an empty string. Example value: `{{--i18n-cdn-domain}}` ## Manifest JSON Configuration ### manifestJson.enable > Type: (boolean) Specifies whether to generate a manifest.json file. The default value is `true`. This will be use full in production mode identifying file hash. ## Runtime Chunk Character Configuration ### changeRuntimeChunkChar > Type: (string) Specifies the character used to separate runtime chunks. The default value is `'~'`. ## Service Worker Configuration ### serviceWorker.enable > Type: (boolean) Specifies whether the service worker functionality is enabled or disabled. The default value is `false`. ### serviceWorker.templateFilePath > Type: (string) Specifies the template file path for the service worker. The default value is `'sw.js'`. For more [details](docs/ServiseWorkerTemplate.md) ### serviceWorker.outputFilePath > Type: (string) Specifies the output file path for the service worker. The default value is `'/v1.js'`. ### serviceWorker.replaceText > Type: (string) Specifies the text to replace in the service worker template file. The default value is `'//'`. This documentation provides an overview of the configuration options available in the Client Build Tool and their default values. You can modify these values to suit your project's specific needs and requirements. ## Custom Chunks Configuration ### customChunks > Type: (array) Specifies an array of custom chunks for the application. Each chunk is represented as an object with the following properties: - `name` (string): Specifies the name of the chunk. - `patterns` (array): Specifies the file patterns to be included in the chunk. For more [details](docs/CustomChunksConfiguration.md)