Building

Learn how to build Handsontable packages, using the available npm tasks.

Table of contents

• About building
  • Monorepo
  • Building processes
  • Building requirements
  • package.json files
• Running your first build
• Building the packages
  • Building all the packages
  • Building the JavaScript package
  • Building the Angular package
  • Building the React package
  • Building the Vue 2 package
  • Building the Vue 3 package

About building

Get an overview of Handsontable's building processes.

Monorepo

The Handsontable repository (opens new window) is a monorepo (opens new window) that contains the following projects:

Project	Location	Description
handsontable	./handsontable	Main Handsontable project
@handsontable/angular	./wrappers/angular	Angular wrapper
@handsontable/react	./wrappers/react	React wrapper
@handsontable/vue	./wrappers/vue	Vue 2 wrapper
@handsontable/vue3	./wrappers/vue3	Vue 3 wrapper

All the projects are released together, under the same version number. But each project has its own building and testing processes.

Building processes

The building processes transform the source files located in the ./handsontable/src/ directory into the following output files:

• ./handsontable/dist/handsontable.js
• ./handsontable/dist/handsontable.css
• ./handsontable/dist/handsontable.full.js
• ./handsontable/dist/handsontable.full.css
• ./handsontable/dist/handsontable.full.min.js
• ./handsontable/dist/handsontable.full.min.css
• ./handsontable/dist/languages/*

TIP

Don't modify the output files mentioned above. Instead, make changes in the ./handsontable/src/ directory and then run a selected build. This is especially important if you want to contribute your changes back to Handsontable through a pull request.

For more information on the distribution packages, see this file (opens new window).

Building requirements

Handsontable building processes require:

• Node.js (opens new window) (version 15.11+)
• npm (opens new window) (version 7.17+)
• Node modules installed through npm install (e.g. webpack (opens new window) and Babel (opens new window))

package.json files

Each Handsontable project has its own building processes defined in its own package.json file. Apart from that, the root directory has its own package.json file as well:

File	Holds tasks for building:
./package.json	- All the packages at once - Individual packages
./handsontable/package.json	The JavaScript package
./wrappers/angular/package.json	The Angular package
./wrappers/react/package.json	The React package
./wrappers/vue/package.json	The Vue 2 package
./wrappers/vue3/package.json	The Vue 3 package

Running your first build

To run your first build:

1. Install Node.js (opens new window) (version 15.11+).
2. Install npm (opens new window) (version 7.17+).
3. Clone the Handsontable repository (opens new window).
4. From the root directory, run npm install.
   All the required dependencies get installed.
5. From the root directory, run npm run build.
   All the Handsontable packages get built.

Building the packages

You can either build all the packages at once, or build each package individually.

Building all the packages

To build all the packages at once:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run build.
   The script builds the following packages:
   • The JavaScript package
   • The Angular package
   • The React package
   • The Vue 2 package
   • The Vue 3 package
   • A code examples package

Building the JavaScript package

To build the JavaScript package:

1. Make sure you meet the building requirements.
2. Go to ./handsontable.
3. Run npm run build.
   Only the JavaScript package builds.

To build the JavaScript package from the root directory:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run in handsontable build.
   Only the JavaScript package builds.

JavaScript build tasks

From the ./handsontable directory, you can also run individual JavaScript build tasks:

JavaScript build tasks

npm run build:commonjs

• Transpiles the files into the CommonJS format.

npm run build:es

• Transpiles the files into the ESM format.

npm run build:umd

• Creates the following bundles compatible with the Universal Module Definition:
  • ./handsontable/dist/handsontable.js
  • ./handsontable/dist/handsontable.css
  • ./handsontable/dist/handsontable.full.js
  • ./handsontable/dist/handsontable.full.css

npm run build:umd.min

• Creates the minified bundles compatible with the Universal Module Definition:
  • ./handsontable/dist/handsontable.min.js
  • ./handsontable/dist/handsontable.min.css
  • ./handsontable/dist/handsontable.min.full.js
  • ./handsontable/dist/handsontable.min.full.css

npm run build:walkontable

• Builds Walkontable, an essential part of Handsontable that's responsible for the rendering process.

npm run build:languages

• Creates the language bundles compatible with the Universal Module Definition, for example:
  • ./handsontable/dist/languages/de-DE.js
  • ./handsontable/dist/languages/all.js

build:languages.es

• Creates the language bundles compatible with the ESM format, for example:
  • languages/en-US.mjs

npm run build:languages.min

• Creates the minified language bundles compatible with the Universal Module Definition, for example:
  • ./handsontable/dist/languages/de-DE.min.js
  • ./handsontable/dist/languages/all.min.js

Building the Angular package

To build the Angular package:

1. Make sure you meet the building requirements.
2. Go to ./wrappers/angular.
3. Run npm run build.
   Only the Angular package builds.

To build the Angular package from the root directory:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run in angular build.
   Only the Angular package builds.

Angular build tasks

From the ./wrappers/angular directory, You can also run individual Angular build tasks:

Angular build tasks

npm run build

• Builds the @handsontable/angular package for multiple module systems.
• Places the output in the ./wrappers/angular/dist/hot-table/ directory.

Building the React package

To build the React package:

1. Make sure you meet the building requirements.
2. Go to ./wrappers/react.
3. Run npm run build.
   Only the React package builds.

To build the React package from the root directory:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run in react build.
   Only the React package builds.

React build tasks

From the ./wrappers/react directory, you can also run individual React build tasks:

React build tasks

npm run build:commonjs

• Transpiles the files into the CommonJS format.
• Places the output in ./wrappers/react/commonjs/react-handsontable.js

npm run build:umd

• Creates the following bundles compatible with the Universal Module Definition:
  • ./wrappers/react/dist/react-handsontable.js
  • ./wrappers/react/dist/react-handsontable.js.map

npm run build:es

• Transpiles the files into the ESM format.
• Places the output in ./wrappers/react/es/react-handsontable.js

npm run build:min

• Creates the minified bundles:
  • ./wrappers/react/dist/react-handsontable.min.js
  • ./wrappers/react/dist/react-handsontable.min.js.map

Building the Vue 2 package

To build the Vue 2 package:

1. Make sure you meet the building requirements.
2. Go to ./wrappers/vue.
3. Run npm run build.
   Only the Vue 2 package builds.

To build the Vue 2 package from the root directory:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run in vue build.
   Only the Vue 2 package builds.

Vue 2 build tasks

From the ./wrappers/vue directory, you can also run individual Vue 2 build tasks:

Vue 2 build tasks

npm run build:commonjs

• Transpiles the files into the CommonJS format.
• Places the output in ./wrappers/vue/commonjs/vue-handsontable.js

npm run build:umd

• Creates the following bundles compatible with the Universal Module Definition:
  • ./wrappers/vue/dist/vue-handsontable.js
  • ./wrappers/vue/dist/vue-handsontable.js.map

npm run build:es

• Transpiles the files into the ESM format.
• Places the output in ./wrappers/vue/es/vue-handsontable.js

npm run build:min

• Creates the minified bundles:
  • ./wrappers/vue/dist/vue-handsontable.min.js
  • ./wrappers/vue/dist/vue-handsontable.min.js.map

Building the Vue 3 package

To build the Vue 3 package:

1. Make sure you meet the building requirements.
2. Go to ./wrappers/vue3.
3. Run npm run build.
   Only the Vue 3 package builds.

To build the Vue 3 package from the root directory:

1. Make sure you meet the building requirements.
2. Go to the root directory.
3. Run npm run in vue3 build.
   Only the Vue 3 package builds.

Vue 3 build tasks

From the ./wrappers/vue3 directory, you can also run individual Vue 3 build tasks:

Vue 3 build tasks

npm run build:commonjs

• Transpiles the files into the CommonJS format.
• Places the output in ./wrappers/vue3/commonjs/vue-handsontable.js

npm run build:umd

• Creates the following bundles compatible with the Universal Module Definition:
  • ./wrappers/vue3/dist/vue-handsontable.js
  • ./wrappers/vue3/dist/vue-handsontable.js.map

npm run build:es

• Transpiles the files into the ESM format.
• Places the output in ./wrappers/vue3/es/vue-handsontable.js

npm run build:min

• Creates the minified bundles:
  • ./wrappers/vue3/dist/vue-handsontable.min.js
  • ./wrappers/vue3/dist/vue-handsontable.min.js.map