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.
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/ |
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 |
node_modules |
Created when you run the 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 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:
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 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.
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.