Theme Development Directory for...

The Theme Development Directory contains essential files and folders for SuiteCommerce theme development. This directory is named when extracting the theme development tools and sets the foundation for all custom theme work.

Key Components of the Theme Development Directory

The following table outlines the critical components of the Theme Development Directory, including their creation commands, purpose, and important notes:

File/Folder	Description
DeployDistribution/	Created when running the `gulp theme:deploy` command. Contains all files associated with the compiled application, intended for deployment.
gulp/	Contains all files required by Gulp.js for theme development. These files should not be edited manually.
LocalDistribution/	Created running the `gulp theme:local` command. Contains files for the local server deployment. Do not edit these files manually.
node_modules	Created when executing `npm install`. Stores dependencies required by theme developer tools. Manual edits discouraged.
ns_npm_repository	A file not meant for manual editing.
Workspace/	Created with the `gulp theme:fetch` command. This is where theme and extension customizations are developed and maintained.
.jshintrc	A configuration file not to be edited manually.
distro.json	A configuration file that should not be manually edited.
gulpfile.js	Contains the JavaScript code necessary to run Gulp.js. This file should remain unedited.
javascript-libs.js	A file not suitable for manual editing.
package.json	Maintains dependencies for the theme development tools. Manual edits are discouraged.
version.txt	Maintains version information for SuiteCommerce or SuiteCommerce Advanced (SCA). Not intended for manual edits.

The Theme Workspace

The Workspace directory is where theme creation occurs. It includes a subdirectory for the downloaded theme and an Extras directory for extension-related source files. Each time you execute the gulp theme:fetch command, the developer tools will clear existing subfolders in the Workspace and download the active theme and extension source files anew.

Example Structure

none

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

Theme Directory

Inside the Workspace directory, the theme directory is created when you run the gulp theme:fetch command. This directory corresponds to the active theme name and is where you should perform all theme customizations and template overrides.

Theme Development Extras Directory

The Workspace/Extras/Extensions directory houses subdirectories for each active extension that was downloaded using gulp theme:fetch. Important files include:

File/Folder	Description
assets/	Contains images or fonts associated with the extension. This could include logos or icons essential for the site but not managed by NetSuite.
Modules/	Contains a folder for all HTML templates and Sass associated with the extension, provided for reference.
manifest.json	Lists all extension-related items (JavaScript, HTML, assets) linked to the active extensions. Editing is not allowed here.

Important Note: You should never directly edit any files within the Extras/Extensions directory. Customizations must follow the override procedure outlined in the documentation.

Following these best practices will ensure a smooth and efficient theme development process within SuiteCommerce.

Who This Affects

Developers: Those building and customizing themes for SuiteCommerce.
Administrators: Individuals overseeing theme management and deployment.
Designers: Professionals involved in creating theme aesthetics and user experience.

Key Takeaways

The Theme Development Directory contains essential files for SuiteCommerce theme customization.
Key commands like gulp theme:fetch, gulp theme:deploy, and gulp theme:local play critical roles in directory management.
Customizations should adhere to best practices, especially regarding file modifications.
The Workspace structure is vital for organizing theme and extension customizations efficiently.
Use the proper override methods to maintain compatibility with active extensions.

Source: This article is based on Oracle's official NetSuite documentation.

Frequently Asked Questions (4)

What command should I use to deploy the theme files for SuiteCommerce?

To deploy the theme files for SuiteCommerce, use the `gulp theme:deploy` command. This creates the DeployDistribution/ directory, containing all files associated with the compiled application intended for deployment.

Can I manually edit the files in the LocalDistribution/ or Workspace/ directories?

No, you should not manually edit the files in the LocalDistribution/ or Workspace/ directories. These files are generated through respective commands and any manual edits are discouraged.

How are active theme and extension files retrieved into the Workspace directory?

Active theme and extension files are retrieved into the Workspace directory by executing the `gulp theme:fetch` command. This command clears existing subfolders and downloads the necessary source files anew.

Where should I perform theme customizations in the SuiteCommerce development structure?

Theme customizations in the SuiteCommerce development structure should be performed in the theme directory within the Workspace directory. This directory is created when you run the `gulp theme:fetch` command, corresponding to the active theme name.

Theme Development Directory for SuiteCommerce Customization