Build Process for SuiteApp Projects with Single Page Applications
Before you can deploy SDF SuiteApp projects that contain single page applications (SPAs), 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):
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 totrue
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 tofalse
to disable concatenation. -
minifyScripts
– Set the value totrue
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 tofalse
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. Thegulpfile
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.