Components and Structure of Single Page Applications

In NetSuite, you build SPAs as part of SuiteCloud projects. You can build SPAs with the UI components available in the NetSuite UI Framework (UIF).

NetSuite UIF and SuiteScript use different ways to manage modules. NetSuite UIF uses ECMAScript Modules (ESM), whereas SuiteScript uses 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 SuiteCloud 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 SuiteCloud 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.mjs from the samples, or you can choose to use your own combination of tools to transpile and convert the files. For more information, see Single Page Application Samples.

Read the following topics for more information:

SuiteCloud Project Structure for Single Page Applications - Describes the required folder structure for SPAs.
Sample SuiteCloud Project Structure for a Single Page Application - Shows sample local folder structures for SuiteCloud projects with SPAs.
Build Process for SuiteCloud Projects with Single Page Applications - Describes how the gulpfile.mjs from the sample SPA projects works and the supported build tasks.
NetSuite User Interface Framework for Single Page Applications - Provides information about NetSuite UIF.

Related Topics