Create a Baseline Extension

A baseline extension is a set of files, installed locally in your extension development directory. You use these files as a basis to build any extension for your Commerce web store or SCIS implementation.

When you run the gulp extension:create command, the developer tools create this baseline extension in a Workspace directory within your top-level extension development directory. The baseline extension starts out with one module that you design, based on your needs. It can include any combination of the following file types within one new module:

Templates
Sass
Configuration
JavaScript
SuiteScript 1.0
SuiteScript 2.0

Note:

Only 2020.1 Extension Developer Tools and later include the SuiteScript 2.0 file type as an option.

To create a baseline extension:

Open a command line or terminal.
Access the top-level extension development directory you created when you installed the extension developer tools.
Enter the following command:

gulp extension:create

When prompted, enter the information for your baseline extension.

Important:

Note the following requirements and behavior:

Unless otherwise directed, create all entries using only alphanumeric characters without spaces.
Pressing Enter results in the default value.

Set Your Extension Fantasy Name

Provide a name for your extension as you want it to appear in the NetSuite user interface. This can contain special characters and spaces. For example: My Cool Extension!

Set Your Extension Name

Provide a name for your extension’s files and folders within your development environment.

Set the Vendor Name

Enter your business, vendor, or partner name.

Assign a Version Number

Add a version number for your extension.

Important:

To take advantage of extension update requirements, assign a version number to your extensions. Version numbers should follow this format, where d is a single digit: dd.dd.dd.

Set the Initial Module Name

Name the module to be created as part of the baseline extension. Each extension needs at least one module to contain your extension files.

Set a Description for Your Extension

Provide some text to describe your extension. This string can contain spaces and special characters.

This Extension Supports

Select one of the following options:

SuiteCommerce Online – To create an extension for SuiteCommerce or SuiteCommerce Advanced.
SuiteCommerce InStore – To create an extension for SuiteCommerce InStore.

An asterisk (*) identifies the selected option. Use arrow keys to scroll. Press the spacebar to select an option, press <a> key to select all, or <i> key to invert your selections.

This Extension Will Be Applied To

Select one or more applications that your extension requires. Options include:

Shopping
My Account
Checkout

Target Version

Using Commerce versioning schema, enter a string to declare the target versions to which this extension applies. The developer tools prompt you for a target version for each product specified earlier. Leaving these prompts blank results in compatibility with all versions of the associated Commerce products.

See Declare Target Versions and SuiteScript 2.x Bundle Installation Script Type for more information.

For This Extension You Will Be Using

Select one or more file types that your extension should include. Your file options are:

JavaScript
SuiteScript
Templates
Sass
Configuration
SuiteScript2

The developer tools create a baseline Hello World extension to get you started. For more information, see What Happens When You Create a Baseline Extension?

Note:

Only 2020.1 Extension Developer Tools and later include the SuiteScript 2.0 file type as an option.

After following these prompts, you can optionally build on this baseline by adding additional modules. Consider the following topics:

When you have completed building baseline extension files in your developer environment, you are ready to develop your extension. See Develop Extensions for details.

What Happens When You Create a Baseline Extension?

When you run the gulp extension:create command, the extension developer tools:

Create the Workspace directory in your top-level development directory, unless it already exists.
Create a subdirectory with the same name you set for the extension. This subdirectory houses all of the assets and the initial module for the extension. This is where you develop your extension, using the starter files created by the developer tools as an example.
Create a manifest.json file. This file includes all the information required to compile resources for your extension.

For example, if you run the gulp extension:create command and create an extension named MyCoolExtension with the following options:

Set a Vendor/Business name of Acme
Set the initial module name to MyCoolModule
Include all available file types

In this example, your Workspace directory structure should look similar to:

            Workspace/
      MyCoolExtension/
         assets/
            fonts/
            img/
            services/
         Modules/
            MyCoolModule/
               Configuration/
               JavaScript/
               Sass/
               SuiteScript/
               SuiteScript2/
               Templates/
         manifest.json

For a detailed explanation of the files in a baseline extension, see Anatomy of an Extension.

Starter Files

Building on the preceding example, the developer tools generate Configuration, JavaScript, Sass, SuiteScript, SuiteScript 2, and Template files to provide an example Hello World extension. If you use these starter files as the basis for your own extension, you may need to make specific adjustments to the following files generated in the JavaScript directory, depending on the version of SuiteCommerce or SuiteCommerce Advanced you are using:

Acme.MyCoolExension.MyCoolModule.Model.js — This file is the frontend model for the extension’s initial module. If you are developing for SuiteCommerce or SuiteCommerce Advanced 2020.1 or later and want to include SuiteScript 2.0 services in your extension, set the getAbsoluteUrl method as described in Using SuiteScript 2.0 Services.
MyCoolModule.Model.View.js — This file is the view for the example extension. Views listen to the user interface events and coordinate with the data required by the associated module to handle the presentation layer of your extension.

If you are developing for SuiteCommerce Advanced 2020.1.0 or earlier, refer to Work with Views in an Extension for more information about working with views.

If you are developing for SuiteCommerce or SuiteCommerce Advanced 2020.2.0 or later, the generated example view does not use currently recommended API methods. Starting with the 2020.2 release, you should use SCView in your extensions instead of Backbone.View. SCView extends from Backbone.View, inheriting all its methods and properties. SCView also provides additional methods for Commerce site development. For more information, see the extensibility API reference.

Using SuiteScript 2.0 Services

When you run the gulp extension:create command, the extension developer tools create a frontend model in the JavaScript directory for your extension’s initial module. For this example, the model name would be: Acme.MyCoolExension.MyCoolModule.Model.js.

This model includes logic to issue requests via entry points to a backend service. During extension development, the location of extension files after activation is unknown. So, to successfully issue service requests, the model uses the getAbsoluteUrl method to generate the absolute URL to the service. This is the service URL that will exist when the extension is deployed to NetSuite and activated. The getAbsoluteUrl method includes two parameters:

The relative path to the service, which is returned by the getExtensionAssetsPath helper.
A boolean that it set to True to generate an absolute URL for a SuiteScript 2.0 service; or set to False to generate the URL to a SuiteScript 1.0 backend service. Note that leaving the boolean empty is the same as a False setting.

Important:

The extension developer tools create one initial frontend model for each module in your extension. You need to create additional models if your extension module includes multiple services. Create a separate model for each service.

To create additional models, you can copy and rename the initial model created by the extension developer tools. Then make sure each model includes the correct values for the getAbsoluteUrl method parameters as shown in the following examples:

SuiteScript 1.0 service

              //@property {String} urlRoot
     urlRoot: Utils.getAbsoluteUrl(
       getExtensionAssetsPath("services/MyCoolModule.Service.ss")
     );

SuiteScript 2.0 service

              //@property {String} urlRoot
     urlRoot: Utils.getAbsoluteUrl(
       getExtensionAssetsPath(
         "Modules/MyCoolModule/SuiteScript2/MyCoolModule.Service.ss"
       ),
       true
     );

To create a baseline extension:

What Happens When You Create a Baseline Extension?

Starter Files

Using SuiteScript 2.0 Services

Related Topics