Build Process for SuiteApp Projects with Single Page Applications
Before you deploy SDF SuiteApp projects with single page applications (SPAs), you'll need to transpile and convert SPA source files first. You can use any standard tool to convert your sources, or try the build tools included in the sample SPA SuiteApp projects.
In the sample SPA projects, you'll find the build and bundle tasks for converting SPA sources in the package.json (under the scripts section) and in the gulpfile. You can run these tasks with Node Package Manager (npm):
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 set up source concatenation and minification in the gulpfile with these variables:
-
concatenateScripts– Set the value totrueto 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 tofalseto disable concatenation. -
minifyScripts– Set the value totrueto remove unnecessary characters from the source code to decrease file size. This helps save bandwidth and improve web performance. Set the value tofalseto disable minification.
npm run 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. Thegulpfileis 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>and 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
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
SpaServerscript -
In each SPA folder, it looks for these entry points:
-
SpaClientscripts -
SpaServerscripts -
Any script with the
@NScriptTypetag
-
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 gulpfile.
The results are saved in /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder> and they're 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
This task cleans the /build and /src/FileCabinet/SuiteApps/<ApplicationID>/<SpaFolder> directories.
npm run deploy
This task bundles the project and runs suitecloud project:deploy 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.