Theme 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 theme development directory. You create this when you extract the zip file containing the theme 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.


The Theme Development Directory

The top-level theme 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 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 development tools.

Do not manually edit this file.

ns_npm_repository

Do not manually edit this file.

Workspace/

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

See The Theme Workspace 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 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 development 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.

The theme directory contains the following files or folders:

File/Folder

Description

assets/

This directory maintains any images or fonts associated with the theme. These assets include fonts, logos, icons, and other images related to your site that are not managed by NetSuite. This is also the location where you save any new assets you introduce as part of your theme customizations or extension overrides.

Modules/

This directory contains individual modules as subdirectories associated with the theme. Each module defines a specific area of functionality (feature or utility) for your site and contains Template and Sass files in respective subdirectories. You customize these Sass and HTML files directly.

Overrides/

This directory contains any HTML and Sass associated with all extensions that were active when you ran the gulp theme:fetch command. This directory is initially empty, but its structure matches that of the files in the Extras directory.

If you are customizing HTML and Sass files associated with an extension, you place copies of those files here to maintain your overrides.

See Override Active Extension Files for more details.

Skins/

This directory contains any skin preset files for your theme. For more information on skins, see Create Skins for more details.

manifest.json

This file maintains all extensible resources for the theme and declares any overrides for extension customizations. The development tools automatically edit this file to include any necessary overrides when you run the gulp theme:deploy command. For more information on this file, see Theme Manifest.

Example:

Your domain has an active theme, SuiteCommerceBaseTheme. You run the gulp theme:fetch command and specify your domain. The development tools clear any existing Workspace directory contents and download all theme-related HTML, Sass, and asset files into the SuiteCommerceBaseTheme directory. This is your workspace for creating and editing your theme. If the theme you download includes any previously deployed overrides, the development tools place them in the Overrides directory.

In this example, your theme workspace structure should look similar to following:

<TopLevelDevelopmentDirectory>/
   Workspace/
      SuiteCommerceBaseTheme/
         assets/
            img/
            fonts/
         Modules/
            AddressModule@1.0.0/
               Sass/
               Templates/
         Overrides/
         manifest.json

The Extras Directory (Theme Development)

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

Important

At this time, you can only create your own themes. Therefore, 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 maintains 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.