Components and Structure of Single Page Applications

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

NetSuite UIF and SuiteApps use different ways to manage modules. NetSuite UIF uses ECMAScript Modules (ESM), whereas SuiteApps use RequireJS, which is based on the Asynchronous Module Definition (AMD). Because of this, you need to convert SPA source files before you can deploy a SuiteApp project with SPAs. The conversion process includes:

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

You also need a specific folder structure to set up SPAs and make sure the conversion process works as expected. Each SPA in your SuiteApp project needs 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 sets the SPA name, URL, and references to the SPA folder and script files

You can download sample SPA SuiteApps from the SuiteCloud Project Repository on Oracle Samples GitHub and use them as templates for your own SPAs. These samples use the required folder structure and include a file that handles (using Gulp) the build and bundle steps to convert the source files. You can use the gulpfile from the samples, or 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