Extension Development Files and Folders
When you extract the zip file that contains the extension developer tools as described in Set Up Extension Developer Tools, the result is your top-level extension development directory. Read the following topics to learn more about extension development files and folders:
The Top-Level Extension Development Directory
The top-level extension development directory contains the following files and folders. You name this top-level directory when you extract the extension development tools.
Some of the files and folders listed in the following table are created when you run specific gulp commands during the extension development lifecycle and so are not visible when you initially extract the tools. These cases are noted in the descriptions of the files and folders in the following table.
Do not manually edit any of the individual files in the top-level extensions development directory.
|
File/Folder |
Description |
|
DeployDistribution/ |
Created the first time you run the |
|
gulp/ |
Created when you extract the extension developer tools, this directory contains all of the files required by Gulp.js. Do not manually edit the files in this directory. |
|
LocalDistribution/ |
Created the first time you run the |
|
node_modules |
Created when you run the |
|
ns_npm_repository |
Created when you install the extension developer tools, this folder contains important files for the NPM package manager. |
|
Workspace/ |
Created the first time you run the See The Extensions Workspace Directory for detailed information on the contents of this directory. |
|
gulpfile.js |
This file contains all the JavaScript code necessary to run Gulp.js. |
|
package.json |
This file maintains dependencies required to operate the theme development tools. |
The Extensions Workspace Directory
The Workspace directory resides in your top-level extensions development directory. This directory contains a subdirectory for each extension you are creating plus an Extras directory to store the active theme source files.
<Top-LevelDevelopmentDirectory>/
Workspace/
Extras/
<EXTENSION_DIRECTORY>/
The Extension Directory
When you run the gulp extension:create command, the developer tools create the Workspace directory (unless it already exists) and create a basic extension with source files for you to begin creating your own extension.
Each extension directory contains the following files or folders:
|
File/Folder |
Description |
|
assets/ |
This directory maintains any images or fonts associated with the extension. These assets include fonts, logos, icons, and other images related to your site that are not managed by NetSuite. |
|
Modules/ |
This directory contains individual modules as subdirectories associated with the extension. Each module defines a specific area of functionality (feature or utility) for your site and contains the JavaScript, SuiteScript, Configuration, Templates, and Sass files for your extension. |
|
manifest.json |
This file maintains all extensible resources for the extension. The development tools automatically edit this file to include any necessary overrides when you run the |
Example
You run the gulp extension:create command from your top-level extension development directory. During this task, you name your extension MyCoolExtension and choose to create all options for extension files (templates, sass, configuration, etc.). You also choose not to create a Custom Content Type (CCT).
After this command is complete, your Workspace directory contains the following:
<TopLevelDevelopmentDirectory>/
Workspace/
MyCoolExtension/
assets/
fonts/
img/
services/
MyCoolModule.Service.ss
Modules/
MyCoolModule/
Configuration/
JavaScript/
Sass/
SuiteScript/
SuiteScript2/
Templates/
manifest.json
The MyCoolModule directory contains an example file for each files type. You use these files as an example to build your new extension. For example, the JavaScript folder contains JavaScript collection, model, router, view, and entry point files. For more information about these files, see What Happens When You Create a Baseline Extension?
The Extras Directory
When you run the gulp extension:fetch command, the developer tools create the Workspace directory (unless it already exists) and downloads the source files for the active theme. These files are provided for reference during local testing only. Do not move, delete, add, or edit the files in the Extras subdirectory.
The Extras subdirectory contains the following files or folders:
|
File/Folder |
Description |
|
assets/ |
This directory contains any images or fonts associated with the active theme. These assets include fonts, logos, icons, and other images related to your site that are not managed by NetSuite. |
|
Modules/ |
This directory contains a module folder that maintains all HTML templates and Sass associated with the theme. These files are provided here for your reference only. |
|
Overrides/ |
This directory contains files associated with overrides for the theme. See Override Active Extension Files to learn how to use the Override method to customize HTML and Sass files related to extensions. |
|
manifest.json |
This file lists all extension-related HTML templates, Sass, and assets related to the active theme downloaded when you ran the Do not manually edit this file. |
The Extras subdirectory also contains an application_manifest.json file. This file confirms that you have a valid SSP Application version that supports the Themes and Extensions. Do not move, delete, or edit this file.
Example
You run the gulp extension:fetch command.
Your domain has an active theme, ActiveTheme1, and an active extension, MyCoolExtension. You run the gulp theme:fetch command and specify your domain. The extension developer tools download all theme-related HTML, Sass, and asset files into the Exrtras/ActiveTheme1/ directory.
In this example, your Workspace directory structure should look similar to:
<TopLevelDevelopmentDirectory>/
Workspace/
Extras/
ActiveTheme1/
assets/
Modules/
Overrides/
manifest.json
MyCoolExtension/