1. SuiteCloud Platform
  2. SuiteScript
  3. SuiteScript Developer Guide
  4. Single Page Applications
  5. Introduction to Single Page Applications
  6. Components and Structure of Single Page Applications
  7. Build Process for SuiteCloud Projects with Single Page Applications

Build Process for SuiteCloud Projects with Single Page Applications

Before you deploy SuiteCloud 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 projects.

For more information about the build process for the sample SPA projects, see the following:

Paths in Sample SPA Projects

In the sample SPA projects, the build task saves transpiled SPA files in the /build/ directory. The following table shows the local project folders for each SuiteCloud project type:

Sample Project npm Commands

In the published sample SPA projects, package.json defines the npm scripts, and gulpfile.mjs defines the supporting build tasks.

Note:

If you use a different build toolchain, your project's npm run scripts may differ.

For more information about the npm commands available in the sample SPA projects, see the following:

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.

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 in the SPA source folder.

  • 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 the SPA source folder must use 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 source files outside the SPA source folder.

  • If you have other AMD scripts that do not need conversion, place them outside the SPA File Cabinet output folder. Use an appropriate folder under src/FileCabinet/SuiteApps/<ApplicationId>/ for SuiteApp projects or src/FileCabinet/SuiteScripts/ for ACPs.

npm run bundle

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

This task uses the transpiled source files in the SPA Build output to identify entry points and bundle their dependencies:

  • Identify SPA folders by searching for directories that contain an SpaServer script.

  • For each SPA folder, the task looks for these entry points:

    • SpaClient scripts

    • SpaServer scripts

    • Any script with the @NScriptType tag

After identifying the entry points, this task converts import and export statements in the source files to define and require statements.

It saves the converted files in the SPA File Cabinet output folder, ready for deployment to the target NetSuite account. It also copies asset files from the SPA source folder to that folder. Any file in the SPA source folder that is not a JavaScript or TypeScript file is treated as an asset.

During the bundle task, the SuiteApp sample projects' gulpfile.mjs files use the following optional settings to control the generated output:

  • concatenateScripts - Set this option to true to bundle each entry point into a single file. This reduces the number of requests and load time. Set it to false to disable concatenation.

  • minifyScripts - Set this option to true to remove unnecessary characters from source files. This reduces file size, saves bandwidth, and improves web performance. Set it to false to disable minification.

npm run clean

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

This task cleans the /build directory and the SPA File Cabinet output folder.

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 SuiteCloud project to the target NetSuite account.

The suitecloud project:deploy command deploys the project content specified in src/deploy.xml 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.

Related Topics

General Notices