@zohodesk/client_build_tool

Client Build Tool

This is a build tool for react based web applications.

Supported and Tested Environment

Name	Version
node	v18.11.0
npm	8.19.2

OS : Mac , ubuntu

client_build_tool

A CLI tool for build modern web application and libraries

Installation

Below Steps:-

npm i -g @zohodesk/client_build_tool

Usage

Step 1

cbt template app <your-project-folder> && cd <your-project-folder>

Step 2

Now to run app

npm run start

---

Happy Code :>) 🤟

"Client Build Tool (CBT): Streamline and Optimize Your Client-side Build Process"

Description:

CBT is a powerful client-side build tool designed to streamline and optimize your development workflow. With CBT, you can effortlessly manage and configure your project's build process, automating tasks, and improving efficiency. It provides an intuitive interface and a comprehensive set of features to simplify the build pipeline, allowing you to focus more on coding and less on tedious configuration.

Key Features:

• Integrated Dev Server: Run your application locally with a built-in development server for quick feedback and real-time updates.
• Mock API Server: Seamlessly integrate a mock API server to simulate backend interactions during development.
• Intelligent CSS Processing: Automatically process and optimize CSS files, including customizable class name generation and advanced postcss plugins.
• Internationalization Support: Easily manage internationalization (i18n) with efficient chunk splitting and language-specific resource loading.
• CDN Mapping: Effortlessly map assets to a Content Delivery Network (CDN) for faster delivery and improved performance.
• Comprehensive Configuration: Fine-tune your build process with extensive configuration options, including source maps, Babel customizations, and more.
• Service Worker Integration: Enable service worker functionality for offline support and improved caching capabilities.
• Customizable Build Artifacts: Define custom chunks, modify HTML templates, and generate a manifest.json file for better control over your build output.
• User-friendly Interface: CBT provides a user-friendly interface, making it easy to configure, customize, and monitor your build process.

With CBT, you can optimize your client-side development workflow, increase productivity, and deliver high-quality applications faster. Start using CBT today and experience the power of efficient and streamlined client-side builds.

Commands

The following commands are available options for the cbt (Client Build Tool) CLI. You can execute these commands by prefixing them with cbt. For example, cbt start.

• preProcessor: Runs the preProcessor.js in the app to set the variables before the build or run the dev mode.

• start: Starts the development server with mode support. You can specify the mode as either dev or prod. This command is used for local development and testing.

• build: Executes the build command with mode support. You can specify the mode as either dev or prod. This command compiles and bundles your application for deployment.

• build:lib: Transpile the src folder to the lib folder, generating CommonJS modules. This command is specifically designed for building libraries that require CommonJS module format.

• build:es: Transpile the src folder to the es folder, generating modules using import statements. This command is useful for building libraries that use ECMAScript module syntax.

• version: Prints the version of the CBT CLI tool.

• template: Creates an initial template or skeleton for your project. You can specify the option as app. This command sets up a basic project structure and configuration files to get you started quickly.

• mock:server: Starts an external mock API server. This command enables you to run a separate server specifically for mocking API responses during development and testing.

Note: Make sure to replace start in the examples above with the actual command or script that you use to run the Client Build Tool CLI.

These commands provide flexibility and control over your client-side build process, allowing you to start the development server, build your application, transpile libraries, create templates, run a mock API server, and more.

For more Details

Changelog and Release Notes

v0.0.6 (4-09-2023)

Feature:-

• Generating bundle integrity report json file for the build assets only in production mode. To use this feature we need to add stats > enable or cli flags enable_stats.
• Added Resource Cleanup plugin to cleanup resource retained by build tool. this plugin is controlled by efc flag resourcecleanup flag.
• added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook. only will be activate when resourceHints => allowPrefetchingMultipleChunks as true
• added support for glob pattern for custom chunks split logic.
• added options to split chunks base config in the key app => customChunksBaseConfig as object

Change:-

• i18n name not generated issue fix.
• public path not correctly set issue fix.
• changing plugin hook stages in i18nRuntimePlugin and sourceMapPlugin

v0.0.5 (6-08-2023)

Changes:--

• Typo fix in i18nRuntimeDealerPlugin.js
• fixing some bugs in resolvers.js file

v0.0.3 (1-08-2023)

Changes:--

• devtool default value changed from hidden-cheap-source-map to source-map
• unwanted files deleted from build

Issue Fix:--

• The issue with the source map not being created in the build has been fixed."

v0.0.2 (28-04-2023)

Features:-

• devModeContentHashAllowedTypes support added for some project there will be a need for hash even though they run dev mode. for details details

• devLikeHash support for disable content hash for file names in production mode. for details details

• disableReactDevWarning disable react dev warning such as prop-type warnings will be removed in dev mode build or server. for details details can be enabled via --disable_react_dev_warning too.

• statsLogConfig support to customize default webpack log after build finished. for details details can be enabled via --disable_react_dev_warning too.

• enableChunkHash renamed as enableFileNameHashing

• pre_processor command to run the preprocessor.js file.preProcessor runs in build, start, buildEs, buildLib commands bu default. and we have watch mode support as well with the option (-w)

• createSeparateSmap flag source_map_enable renamed as enable_smap

• removeAttribute option changes as babelCustomizations.removeAttribute

• removePropTypes support for remove the prop types package in the output build.

• devConsoleExclude support for remove the console statements such as console.log, console.warn in the output build.

• manifestJson default value set as false.

• customAttributes support for add attributes to html, link , script tag in the output build.

v0.0.1 (18-04-2023)

First Release Features:-

• 'start' command to run react app
• 'build' command to create build for react app
• 'build:lib' command to create lib for react library
• 'build:es' command to create es for react library
• 'templates' command to create es for react library