Build Process for SuiteApp Projects with Single Page Applications

Before you can deploy SDF SuiteApp projects that contain single page applications (SPA), the SPA source files must be transpiled and converted first. You can use any standard tool to convert your sources, or you can use the build tools provided in the sample SPA SuiteApp projects.

In the sample SPA projects, the build and bundle tasks for converting SPA sources are specified in the package.json (under the scripts section) and implemented in the gulpfile. These tasks are available using Node Package Manager (npm):

npm run build
npm run bundle
npm run clean
npm run deploy
npm run test

For information about how these tasks are used in the SPA creation process, see Single Page Application Creation And Development.

For information about the sample SPA SuiteApps, see Single Page Application Samples.

Optionally, you can configure the source concatenation and minification settings in the gulpfile using these variables:

concatenateScripts – Set the value to true to concatenate or bundle the sources for each entry point into a single file. Doing so can help reduce the number of requests and loading time. Set the value to false to disable concatenation.
minifyScripts – Set the value to true to remove unnecessary characters from the source code to decrease file size. Doing so can help save bandwidth and improve web performance. Set the value to false to disable minification.

npm run build

This task runs the TypeScript compiler on the source files, builds them, and saves the result in a new /build directory.

The following source files are processed:

SPA and backend script sources from /src/SuiteApps/<ApplicationID>/<SpaFolder>
Unit test sources from /test/unit
Configuration from tsconfig.json

Take note of the following:

Both TypeScript and JavaScript sources are supported.
The SPA scripts in /src/SuiteApps/<ApplicationID>/<SpaFolder> must be in JSX and ESM. The gulpfile is designed specifically for converting SPA scripts and there is no assurance that it will work for other script types.
Anything inside /src/SuiteApps/<ApplicationID> and outside /src/SuiteApps/<ApplicationID>/<SpaFolder> will be ignored by this process.
Other AMD scripts that do not need to be converted must be placed directly in the /src/FileCabinet/SuiteApps/<ApplicationID> folder.

npm run bundle

This task takes the source files from the /build folder, searches for entry points in SPA folders, and bundles all of the SPA dependencies. The entry points are found using the following criteria:

Identify SPA folders by searching for directories that contain an SpaServer script
Within each SPA folder, search for these entry points: SpaClient scripts, SpaServer scripts, and any script file containing the @NScriptType tag.

This task transpiles all the source files from using import and export statements to define and require statements. It also takes into account the concatenateScripts and minifyScripts options defined in the gulpfile.

The results are saved in /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder> and is ready to be deployed to the target NetSuite account. This task also copies all asset files from /src/SuiteApps/<ApplicationID>/<SpaFolder> to /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder>. Any file in the SPA folder that is not a JavaScript or a TypeScript file is considered an asset.

npm run clean

This task cleans the /build and /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder> directories.

npm run deploy

This task bundles the project and runs the suitecloud project:deploy command to deploy the SuiteApp to the target NetSuite account.

npm run test

This task runs unit tests from the /test/unit folder using the Jest testing framework.

npm run build

npm run bundle

npm run clean

npm run deploy

npm run test

Related Topics