Components and Structure of Single Page Applications

In NetSuite, single page applications (SPAs) are developed as part of a SuiteCloud Development Framework (SDF) SuiteApp project. You can build SPAs using the UI components available in the NetSuite UI Framework (UIF).

NetSuite UIF and SuiteApps use different module management approaches. NetSuite UIF uses ECMAScript Modules (ESM), whereas SuiteApps use RequireJS, which is based on the Asynchronous Module Definition (AMD). For this reason, SPA source files must be converted before you can deploy a SuiteApp project with SPAs. The conversion process involves:

Transpiling JSX syntax to regular JavaScript
Converting import and export statements to define and require statements

In addition, a specific folder structure is required to implement SPAs and to ensure that the conversion process creates the correct output. Each SPA implementation in the SuiteApp project must have the following:

A unique SPA folder
Two required scripts, the SPA client script and SPA server script, stored inside the SPA folder
An SPA object definition file that defines the elements of the SPA, such as the SPA name, URL, and references to the location of the SPA folder and SPA script files

You can download sample SPA SuiteApps from the SuiteCloud Project Repository on Oracle Samples GitHub and use them as a template for your SPAs. These samples use the folder structure required to implement SPAs and contain a file that implements (using Gulp) the build and bundle steps to convert the source files. You can use the gulpfile from the samples or you can opt to use any standard tool you prefer to transpile and convert the files. For more information, see Single Page Application Samples.

Read the following topics for more information:

SuiteApp Project Structure for Single Page Applications – Describes the required folder structure for SPAs.
Build Process for SuiteApp Projects with Single Page Applications – Describes how the gulpfile works and the supported build tasks.
NetSuite User Interface Framework for Single Page Applications – Provides information about NetSuite UIF.

Related Topics