Extension Development Files and Folders

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

This section describes the various files and folders included in your top-level extensions development directory. You create this when you extract the zip file containing the extension developer tools.

Note

Some of the files and folders listed herein do not appear until you run one or more Gulp.js commands. The following sections point this out where applicable. However, for a full list of Gulp.js commands, see Gulp Command Reference for Themes and Extensions.


The Top-Level Extension Development Directory

Your top-level extensions development directory contains the following files/folders. Some of the files/folders listed below do not appear until after you run your customizations to a local server or deploy them to NetSuite. You name this top-level directory when you extract the theme development tools.

File/Folder

Description

DeployDistribution/

Created the first time you run the gulp extension:deploy command, this directory contains all of the files associated with the compiled application. After compilation, Gulp.js deploys the contents of this directory to your NetSuite file cabinet. Do not manually edit the files in this directory.

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 gulp extension:local command, this directory contains all of the files associated with the compiled application used by the local server. When you run gulp extension:local, Gulp.js deploys the contents of this directory to the local Node.js server. Do not manually edit the files in this directory.

node_modules

Created when you run the npm install command, this directory stores the dependencies and other files required by the development tools.

Do not manually edit this file.

ns_npm_repository

Created when you install the extension developer tools, this folder contains important files for the NPM package manager.

Do not manually edit this file.

Workspace/

Created the first time you run the gulp extension:fetch or gulp extension:create command, this directory maintains all of your extension files under development. This directory also includes an Extras/ folder to maintain theme files for local testing.

See The Extensions Workspace Directory for detailed information on the contents of this directory.

.jshintrc

Do not manually edit this file.

distro.json

Do not manually edit this file.

gulpfile.js

This file contains all the JavaScript code necessary to run Gulp.js.

Do not manually edit this file.

javascript-libs.js

Do not manually edit this file.

package.json

This file maintains dependencies required to operate the theme development tools.

Do not manually edit this file.

version.txt

This file maintains versioning information for SuiteCommerce.

Do not manually edit this file.

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 places 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 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 gulp extension:deploy command. For more information on this file, see Extension Manifest.

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 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/
               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.

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 maintains 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.

manifest.json

This file lists all extension-related HTML templates, Sass, and assets related to the active theme downloaded when you ran the gulp extension:fetch command.

Do not manually edit this file.

Note

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 following:

<TopLevelDevelopmentDirectory>/
   Workspace/
      Extras/
         ActiveTheme1/
            assets/
            Modules/
            Overrides/
            manifest.json
      MyCoolExtension/