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. SuiteCloud Project Structure for Single Page Applications

SuiteCloud Project Structure for Single Page Applications

To use NetSuite UIF with single page applications (SPAs), you need a specific folder structure to convert the source files before you deploy the SuiteCloud project. This folder structure lets you use JavaScript or TypeScript in your source files. During conversion, the SPA source files are transpiled and the converted files are saved in a different folder in the project directory.

You can find sample SuiteApp projects with SPAs in the SuiteCloud Project Repository on Oracle Samples GitHub. For more information, see Single Page Application Samples.

For more information on the project structure for SPAs, see the following:

Local Project Folders and Files for Single Page Applications

SuiteCloud projects with SPAs use the following local project folders and files. The SPA source and File Cabinet output paths depend on the project type:

  • SPA source folder - Holds the SPA server script, SPA client script, and application root component. It can also include an assets folder for static files.

  • /test - Holds unit tests and test stubs.

  • /src/manifest.xml and /src/deploy.xml - These files contain the SuiteCloud project configuration.

  • /src/Objects/custspa_xxx.xml - The XML object definition file for the SPA SDF custom object.

  • SPA File Cabinet output folder - Holds the transpiled and converted source files that are deployed to NetSuite when you deploy the SuiteCloud project. You can use the gulpfile.mjs from the sample SPA projects to run the build and bundle tasks that convert the SPA source files. Alternatively, use your own tool to transpile and convert the files, and save the converted files in this folder.

For examples of local project structures after the build and bundle tasks, see Sample SuiteCloud Project Structure for a Single Page Application.

Note:

All JavaScript files in either the src/FileCabinet/SuiteApps folder or the src/FileCabinet/SuiteScripts folder must use the Asynchronous Module Definition (AMD) format.

Non-SPA Script Files in SuiteApp Projects

If you have non-SPA script files in your SuiteApp project, take note of the following when using the gulpfile.mjs from the sample projects:

  • If you have JavaScript and AMD script files, save them directly in the /src/FileCabinet/SuiteApps/<ApplicationId> folder. Keep them outside the SPA folder (if it already exists) because the gulpfile.mjs regenerates that folder each time you run a bundle task.

  • Don't place AMD script files inside the /src/SuiteApps/<ApplicationId>/<SpaFolder>. The gulpfile.mjs assumes that all files in that folder are in ECMAScript Modules (ESM) format. If you include AMD scripts, the gulpfile.mjs treats them as ESM and tries to convert them to AMD, which causes errors.

  • The gulpfile.mjs only processes files inside the SPA folders, anything outside is ignored. If you want to place scripts in the /src/SuiteApps/<ApplicationId> folder, you'll need to handle building, bundling, and moving those scripts to the src/FileCabinet/SuiteApps/<ApplicationId> folder for deployment.

  • The gulpfile.mjs is designed specifically for converting SPA scripts. If you want to use it to convert non-SPA scripts in TypeScript and ESM, you'll need to handle any errors that may occur during this process.

For more information about the gulpfile.mjs, see Build Process for SuiteCloud Projects with Single Page Applications.

Note:

For ACPs, store non-SPA scripts in appropriate folders under src/FileCabinet/SuiteScripts/. Scripts that are already in AMD format do not require conversion. If a script requires conversion, configure a build process that saves the converted file in that location. Include the files you want to deploy in src/deploy.xml.

Related Topics

General Notices