What is the Development Life Cycle?

The following topics describe the stages of the life cycle when developing themes and extensions, as well as best practices around versioning, and delivery options for themes and extensions:

Theme Development Life Cycle
Extension Development Life Cycle
Maintaining Themes and Extensions

Theme Development Life Cycle

When you’re working with the theme developer tools, the stages of the development life cycle follow this basic flow:

Stage	Activity	Gulp Command to Use	Result
1	Fetch existing theme — You need to download files for the active theme to use as the baseline for your own custom theme. The SuiteCommerce Base Theme is a good starting point.	`gulp theme:fetch`	Theme developer tools create a Workspace directory and then download theme files into separate subdirectories.
2	Customize existing theme — You can customize the theme by changing templates, styles, or assets. Modify templates, styles, and other assets using your chosen editor in the local Workspace directory created by the theme developer tools. Note: SuiteScript, JavaScript, and configuration files are not allowed in themes.	—	You revise and store your customized files in the local Workspace directory and subdirectories.
3	Test locally — You should test your theme locally so you can identify any issues and correct them before deployment.	`gulp theme:local`	Theme developer tools compile all source files into a LocalDistribution/tmp directory. When you start a local server, the local Commerce app/website uses the Sass, template and other files from this directory so you can view and adjust your theme in one or more browsers. Changes you make to source files are immediately visible in your local browser.
4	Deploy theme — You need to deploy your theme to NetSuite so you can activate it for your Commerce website.	`gulp theme:deploy`	Theme developer tools validate your customizations, copy theme files into a local DeployDistribution directory, and then upload these files to a location in your NetSuite File Cabinet.
5	Activate theme — Activating your theme applies it to a Commerce website domain. You can activate your theme using the SuiteCommerce Extension Manager in NetSuite.	—	Your customized theme is active and controls the design and layout of the domain you selected during activation.

Stage

Activity

Gulp Command to Use

Result

Fetch existing theme — You need to download files for the active theme to use as the baseline for your own custom theme. The SuiteCommerce Base Theme is a good starting point.

gulp theme:fetch

Theme developer tools create a Workspace directory and then download theme files into separate subdirectories.

Customize existing theme — You can customize the theme by changing templates, styles, or assets. Modify templates, styles, and other assets using your chosen editor in the local Workspace directory created by the theme developer tools.

Note:

SuiteScript, JavaScript, and configuration files are not allowed in themes.

—

You revise and store your customized files in the local Workspace directory and subdirectories.

Test locally — You should test your theme locally so you can identify any issues and correct them before deployment.

gulp theme:local

Theme developer tools compile all source files into a LocalDistribution/tmp directory. When you start a local server, the local Commerce app/website uses the Sass, template and other files from this directory so you can view and adjust your theme in one or more browsers. Changes you make to source files are immediately visible in your local browser.

Deploy theme — You need to deploy your theme to NetSuite so you can activate it for your Commerce website.

gulp theme:deploy

Theme developer tools validate your customizations, copy theme files into a local DeployDistribution directory, and then upload these files to a location in your NetSuite File Cabinet.

Activate theme — Activating your theme applies it to a Commerce website domain. You can activate your theme using the SuiteCommerce Extension Manager in NetSuite.

—

Your customized theme is active and controls the design and layout of the domain you selected during activation.

When you’re ready to get started with theme development, see Next Steps for Theme Developer Tools.

Extension Development Life Cycle

When you create a new extension using the extension developer tools, the life cycle is somewhat different from updating an existing extension. In general, the stages of the extension development life cycle follow this basic flow:

Stage	Activity	Gulp Command to Use	Result
1	Create New Extension Create a baseline extension — Get started by creating the files needed for a basic Hello World extension.	Create New Extension `gulp extension:create`	Create New Extension Extension developer tools create a Workspace directory and a subdirectory that contains the files and initial module for your extension. This is where you develop your extension, using the starter files created by the developer tools as an example.
Update Existing Extension Fetch existing extensions — You need to download files for the active extensions to use as the basis for your customizations.	Update Existing Extension `gulp extension:fetch`	Update Existing Extension Extension developer tools download: Files for any custom extensions that are activated. HTML and Sass files for the currently active theme. Do not modify these files. The Sass and HTML files downloaded using this command are for reference only.
2	Develop or revise your extension — Create or update files needed to implement custom features or functionality, including JavaScript, SuiteScript, JSON, HTML templates, Sass files, and more. Use your chosen editor in the local Workspace directory created by the extension developer tools.	—	Develop and store your files in the local Workspace directory and subdirectories.
3	Fetch active theme — You must download files for the active theme before you can deploy an extension or test it on a local server. The extension developer tools require theme files to compile a local distribution for testing on a local server. The developer tools also use these theme files to run a test compilation before deploying. Note: If you used the `gulp extension:fetch` command to update an existing extension in stage 1, you can skip this stage. The fetch command you issued in stage 1 downloads both active theme and extension files.	`gulp extension:theme`	Extension developer tools download HTML and Sass files for the active theme. Do not modify these files. The Sass and HTML files downloaded using this command are for reference only.
4	Test locally — You should test your extension locally so you can identify any issues and correct them before deployment. Note: If you are developing an extension that includes SuiteScript or JSON files, you must deploy your files to your NetSuite account and activate the extension for these changes to be accessible by the local server.	`gulp extension:local`	Extension developer tools compile all source files into a LocalDistribution/tmp directory. When you start a local server, the local Commerce app/website uses the Sass, template, and other files from this directory so you can view and adjust your extension in one or more browsers. Changes you make to source files are immediately visible in your local browser.
5	Deploy your extension — You need to deploy your extension to NetSuite so you can activate it for your Commerce website.	`gulp extension:deploy`	Extension developer tools validate your code, copy your extension files into a local DeployDistribution directory, and update the manifest.json file. The developer tools then upload these files to your NetSuite account, making them available for activation.
6	Activate extension — Activating your extension applies it to a Commerce website domain. You can activate your extension using the SuiteCommerce Extension Manager in NetSuite.	—	Your custom extension is active and its functionality is available in the domain you selected during activation.

Stage

Activity

Gulp Command to Use

Result

Create New Extension

Create a baseline extension — Get started by creating the files needed for a basic Hello World extension.

Create New Extension

gulp extension:create

Create New Extension

Extension developer tools create a Workspace directory and a subdirectory that contains the files and initial module for your extension. This is where you develop your extension, using the starter files created by the developer tools as an example.

Update Existing Extension

Fetch existing extensions — You need to download files for the active extensions to use as the basis for your customizations.

Update Existing Extension

gulp extension:fetch

Update Existing Extension

Extension developer tools download:

Files for any custom extensions that are activated.
HTML and Sass files for the currently active theme. Do not modify these files. The Sass and HTML files downloaded using this command are for reference only.

Develop or revise your extension — Create or update files needed to implement custom features or functionality, including JavaScript, SuiteScript, JSON, HTML templates, Sass files, and more. Use your chosen editor in the local Workspace directory created by the extension developer tools.

—

Develop and store your files in the local Workspace directory and subdirectories.

Fetch active theme — You must download files for the active theme before you can deploy an extension or test it on a local server.

The extension developer tools require theme files to compile a local distribution for testing on a local server. The developer tools also use these theme files to run a test compilation before deploying.

Note:

If you used the gulp extension:fetch command to update an existing extension in stage 1, you can skip this stage. The fetch command you issued in stage 1 downloads both active theme and extension files.

gulp extension:theme

Extension developer tools download HTML and Sass files for the active theme. Do not modify these files. The Sass and HTML files downloaded using this command are for reference only.

Test locally — You should test your extension locally so you can identify any issues and correct them before deployment.

Note:

If you are developing an extension that includes SuiteScript or JSON files, you must deploy your files to your NetSuite account and activate the extension for these changes to be accessible by the local server.

gulp extension:local

Extension developer tools compile all source files into a LocalDistribution/tmp directory. When you start a local server, the local Commerce app/website uses the Sass, template, and other files from this directory so you can view and adjust your extension in one or more browsers. Changes you make to source files are immediately visible in your local browser.

Deploy your extension — You need to deploy your extension to NetSuite so you can activate it for your Commerce website.

gulp extension:deploy

Extension developer tools validate your code, copy your extension files into a local DeployDistribution directory, and update the manifest.json file. The developer tools then upload these files to your NetSuite account, making them available for activation.

Activate extension — Activating your extension applies it to a Commerce website domain. You can activate your extension using the SuiteCommerce Extension Manager in NetSuite.

—

Your custom extension is active and its functionality is available in the domain you selected during activation.

When you’re ready to get started with extension development, see Next Steps for Extension Developer Tools.

Maintaining Themes and Extensions

When developing and maintaining themes and extensions, keep the following important resources and strategies in mind.

To learn more about these and other resources, see More Information for Each Tool.

Resource	Description
Manifests	The theme and extension developer tools generate a manifest.json file for each theme and extension you develop. Each manifest file includes the information required to compile resources for that particular theme or extension. Manifest files also specify the name, description, version, and other data that is displayed for each theme and extension in the SuiteCommerce Extension Manager in NetSuite. Because manifest files are generated by the theme and extension developer tools, you generally do not need to edit them. One exception is that you may need to add Sass entry points for newly introduced Sass files. And, you can also edit the manifest if you want to omit some local assets from a test or deployment. If you do manually edit a manifest file, be aware that the gulp commands to test and deploy update the extension’s manifest.json file and overwrite any manual changes you made. You can preserve your manifest edits by using the `--preserve-manifest` flag.
Versions	In accordance with standard software practices, you should implement version control for your themes and extensions. When you deploy themes and extensions to NetSuite, you are prompted to provide a version number. This version number is stored in the manifest and when you deploy your theme or extension, NetSuite checks the version to determine if that version already exists. If so, NetSuite overwrites any files that already exist for that version. If not, NetSuite generates new records for your theme or extension. You should implement version control to prevent stable versions of your themes and extensions from being overwritten.
Delivery Options	In addition to deploying to your NetSuite account and activating themes and extensions for specific domains of your Commerce website, you can also bundle your themes and extensions as SuiteApps to make them available for distribution to other NetSuite accounts.

Resource

Description

Manifests

The theme and extension developer tools generate a manifest.json file for each theme and extension you develop. Each manifest file includes the information required to compile resources for that particular theme or extension. Manifest files also specify the name, description, version, and other data that is displayed for each theme and extension in the SuiteCommerce Extension Manager in NetSuite.

Because manifest files are generated by the theme and extension developer tools, you generally do not need to edit them. One exception is that you may need to add Sass entry points for newly introduced Sass files. And, you can also edit the manifest if you want to omit some local assets from a test or deployment. If you do manually edit a manifest file, be aware that the gulp commands to test and deploy update the extension’s manifest.json file and overwrite any manual changes you made. You can preserve your manifest edits by using the --preserve-manifest flag.

Versions

In accordance with standard software practices, you should implement version control for your themes and extensions. When you deploy themes and extensions to NetSuite, you are prompted to provide a version number. This version number is stored in the manifest and when you deploy your theme or extension, NetSuite checks the version to determine if that version already exists. If so, NetSuite overwrites any files that already exist for that version. If not, NetSuite generates new records for your theme or extension. You should implement version control to prevent stable versions of your themes and extensions from being overwritten.

Delivery Options

In addition to deploying to your NetSuite account and activating themes and extensions for specific domains of your Commerce website, you can also bundle your themes and extensions as SuiteApps to make them available for distribution to other NetSuite accounts.

Theme Development Life Cycle

Extension Development Life Cycle

Maintaining Themes and Extensions

Related Topics