Build Process for SuiteApp Projects with Single Page Applications

Before you deploy SDF SuiteApp projects with single page applications (SPAs), you must first transpile and convert the SPA source files. You can use any standard toolchain for this step, or you can use the example build scripts included in the published sample SPA SuiteApp projects.

The published sample SPA projects include the following example npm scripts in package.json, with supporting task definitions in gulpfile.mjs.

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.

You can also configure source concatenation and minification in the sample project gulpfile.mjs with these variables:

concatenateScripts - Set the value to true to concatenate or bundle the sources for each entry point into a single file. This helps 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. This helps save bandwidth and improve web performance. Set the value to false to disable minification.

Sample Project NPM Scripts

Note:

The commands in this section are npm scripts provided by the sample SPA projects (defined in the sample package.json and implemented in the sample gulpfile.mjs). If you use a different build toolchain, your project's npm run scripts may differ.

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

npm run build

npm run build runs the build script defined in package.json, which maps to gulp build.

This task uses the TypeScript compiler on the source files, builds them, and puts 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.
SPA scripts in /src/SuiteApps/<ApplicationID>/<SpaFolder> need to be in JSX and ESM format. The gulpfile.mjs is built for converting SPA scripts, and there's no guarantee that it will work for other script types.
The process ignores files inside /src/SuiteApps/<ApplicationID> that are outside /src/SuiteApps/<ApplicationID>/<SpaFolder>.
If you have other AMD scripts that don't need to be converted, place them directly in the /src/FileCabinet/SuiteApps/<ApplicationID> folder.

npm run bundle

npm run bundle runs the bundle script defined in package.json, which maps to gulp 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. It uses these steps to find the entry points:

Identify SPA folders by searching for directories that contain an SpaServer script.
In each SPA folder, it looks for these entry points:
- SpaClient scripts
- SpaServer scripts
- Any script with the @NScriptType tag

This task changes all import and export statements in the source files to define and require statements. It also uses the concatenateScripts and minifyScripts options set in the sample project gulpfile.mjs.

The results are saved in /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder> and are 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 treated as an asset.

npm run clean

npm run clean runs the clean script defined in package.json, which maps to gulp clean.

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

npm run deploy

npm run deploy runs the deploy script defined in package.json. This script first runs npm run bundle and then runs suitecloud project:deploy to deploy the SuiteApp to the target NetSuite account.

npm run test

npm run test runs the test script defined in package.json. This script runs unit tests from the /test/unit folder using the Jest testing framework.