The build process

Overview

Tui relies upon a build process that uses tools such as webpack and babel to produce multiple compiled versions of source modules.

The build files are commit to git at release time.

Totara Core mediates the files produced by the build. It does not use the src files.

When developing for Tui you need to build after making any changes to your Tui componentry.

This document explains how the build commands.

Getting set up

Tui uses node modules for its build, and relies upon npm to manage this.

Installing node and npm

The first step is to install npm if you don't already have this. There are many ways in which to achieve this, but we suggest you start by reading the official documentation on how to get npm.

If you are using an operating system with its own package manager, or have installed a package manager then you may prefer to get node and npm via your package manager.

Installing the required node modules

Before anything can be run your first need to install the required dependencies. The following command should be run within the top level directory of the Totara checkout.

npm install

The two types of builds

There are two distinct types of build that Tui can produce:

• Production
• Development

Prior to a release both the production and development builds are produced and both are commit.

The difference between the two is that the production builds are minified and contain only the required code to ensure the smallest possible package required for the client, whereas the development builds contain additional information such as source maps in order to mode easily facilitate development.

The production builds are used by default. If you want to use the development builds you need to put Tui into development mode. See Setting up your development environment for more information on how to do that.

When developing for Tui you probably want to have Tui set up in development mode so that you can debug your client side code. If this is the case then you only need to produce the development build during this period. The production build files will only be required when testing a production environment, and when deploying your code to a production site.

Generating production builds

The following command will produce the production builds files.

npm run tui-build-prod

Generate development builds

The following command will produce the development build files.

npm run tui-build-dev

There is an additional command as well that when run continues to run, and when you save changes to a Tui component src file will cause the development build files to be produced for just that component. This tends to be much quicker than producing development build files for all components, and will enable more efficient development.

npm run tui-build-watch