1. Commerce
  2. Commerce Developer Documentation
  3. Develop Themes
  4. Theme Development Files and Folders

Theme Development Files and Folders

When you extract the zip file that contains the theme developer tools as described in Set Up Theme Developer Tools, the result is your top-level theme development directory. Read the following topics to learn more about theme development files and folders:

The Theme Development Directory

The top-level theme development directory contains the following files and folders. You name this top-level directory when you extract the theme development tools.

Note:

Some of the files and folders listed in the following table are created when you run specific gulp commands during the theme 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.

File/Folder

Description

DeployDistribution/

Created when you run the gulp theme: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/

This directory contains all of the files required by Gulp.js. Do not manually edit the files in this directory.

LocalDistribution/

Created when you run the gulp theme:local command, this directory contains all of the files associated with the compiled application used by the local server. When you run gulp theme: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 theme developer tools.

Do not manually edit the files in this directory.

ns_npm_repository

Do not manually edit this file.

Workspace/

Created when you initially run the gulp theme:fetch command, this directory contains all downloaded and customized theme and extension HTML, Sass, and asset files. This is the directory where you develop and maintain all of your theme and extension customizations.

See The Theme Workspace for more information.

.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 version information for SuiteCommerce or SuiteCommerce Advanced (SCA).

Do not manually edit this file.

The Theme Workspace

The Workspace directory is the location within your top-level theme development directory where you create themes. This directory contains a subdirectory for the downloaded theme and an Extras directory to maintain all extension-related source files. When you run the gulp theme:fetch command, the theme developer tools delete all Workspace directory subfolders and download the active theme and extension source files, building a new Workspace environment each time.

              <TopLevelDevelopmentDirectory>/
   Workspace/
      Extras/
      <THEME_DIRECTORY>/

The Theme Directory

When you access your theme development directory and run the gulp theme:fetch command, the development tools create a subdirectory to store the source files for the active theme. The name of this directory matches the name of the theme that is active when you run the gulp theme:fetch command. Perform all theme customizations and template overrides here.

For more information about the contents of the theme directory and customizing the active theme, see Anatomy of the Base Theme.

Theme Development Extras Directory

When you access your theme development directory, the Workspace/Extras/Extensions directory contains subdirectories for each extension that was active when you downloaded the current them using the gulp theme:fetch command. Each extension subdirectory contains the following files or folders:

Important:

Do not manually edit or remove files found in the Extras/Extensions directory. You can only customize extension-related HTML and Sass files using the Override method. See Override Active Extension Files.

File/Folder

Description

assets/

This directory contains any images or fonts associated with the associated extension. 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 extension. These files are provided here for your reference only.

manifest.json

This file lists all extension-related JavaScript, SSP libraries, configuration, HTML templates, Sass, and assets related to the active extensions downloaded when you ran the gulp theme:fetch command. For more information on this file, see Theme Manifest.

Do not manually edit this file.

If your domain does not have any active extensions when you run the gulp theme:fetch command, or an active extension does not contain any Sass, HTML, or assets, the development tools do not create a folder for that extension.

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.

Related Topics

General Notices