1. NetSuite Developer Resources
  2. SuiteCommerce Extensions Hello World Fundamentals
  3. SuiteCommerce Extensions Hello World

SuiteCommerce Extensions Hello World

Become familiar with developing extensions by creating a baseline Hello World extension. To do this, you'll need to complete these four steps:

Step 1: Create a Baseline Extension

(5 minutes)

In this step, you'll install a set of files locally to your extension development directory. You'll use these files as a basis to build any extension for your Commerce web store or SuiteCommerce InStore implementation.

To create a baseline extension:

  1. Open a command line or terminal.

  2. Access the top-level extension development directory you created when you installed the extension developer tools.

  3. Run gulp extension:create.

    When you run this command, the developer tools create a baseline extension in a Workspace directory within your top-level extension development directory. The baseline extension starts out with one module that you layout, 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 (included with 2020.1 Extension Developer Tools and later)

  4. After the gulp command has completed, you are presented with various prompts. To use the default values, press Enter. If you choose to enter your own, use only alphanumeric characters without spaces, unless otherwise directed. For more information about these prompts, see Create a Baseline Extension.

Note:

Extension information, including the extension name, fantasy name, version, and description are stored in the extension’s manifest.json file. The manifest file is located here: <LOCAL_SOURCEFILES_ROOT>/Workspace/<EXTENSION_DIRECTORY>/manifest.json.

Step 2: Fetch Active Extension Files

(5 minutes)

In this step, you'll download the files for your baseline extension. You'll need to do this so that you can deploy your extension and test it locally.

To fetch active extension files:

  1. Open a command line or terminal.

  2. Access the top-level extension development directory you created when you installed the extension developer tools.

  3. Run gulp extension:fetch.

    This command downloads the files for any custom extensions that are currently activated. It creates an extension subdirectory in your Workspace/Extras directory. Do not add, edit, delete, or move any files in this location.

  4. After the gulp command has completed, you're presented with various prompts. For more information about these prompts, see Fetch Active Theme and Extension Files.

Note:

Login parameters, including your NetSuite email, account, role, and domain information are stored in the .nsdeploy file. To reset your login and deployment information, delete the .nsdeploy file, which is located here: <LOCAL_SOURCEFILES_ROOT>/gulp/config/.nsdeploy.

Step 3: Edit the Entry Point JavaScript File

(5 minutes)

A crucial file in any extension with JavaScript is the entry point file. When an extension is called to load into the site’s application, it's this file that is called. In this step, you'll log "Hello World!" to the console.

To edit the entry point Javascript file:

  1. Open a command line or terminal.

  2. Access the module.js file in your extension development directory. For example, Workspace/MyAmazingExtension/Modules/MyAmazingExtension/JavaScript/MyAmazingExtension.View.js.

  3. Use the following example to log "Hello World!"

                      define('ABC.MyAmazingExtension.MyAmazingExtension.View'
,   [
    'abc_myamazingextension_myamazingextension.tpl'
     
    ,   'ABC.MyAmazingExtension.MyAmazingExtension.SS2Model'
     
    ,   'Backbone'
    ]
, function (
    abc_myamazingextension_myamazingextension_tpl
     
    ,   MyAmazingExtensionSS2Model
     
    ,   Backbone
)
{
    'use strict';
return {
    mountToApp: function (container) {
        console.log('Hello World! UserPreferences calling!');
    }
});

Step 4: Test Your Extension on a Local Server

(5 minutes)

In this step, you'll test your extension on a local server to check that it loads and that your "Hello World!" greeting is displayed.

To test your extension on a local server:

  1. Open a command line or terminal.

  2. Access the top-level extension development directory you created when you installed the extension developer tools.

  3. Run gulp extension:local.

    This command starts a local server. This is important for extension development as it lets you test out changes to frontend files in real-time without having to deploy them to NetSuite or activating them on a live site. Instead, it tells the application to load some of the site’s files and resources from your computer, rather than those stored in your NetSuite account.

  4. When the process completes, you'll need to go to the local version of your site in your web browser. To construct the correct URL, you need to know some details about your site, such as your domain name, account ID, and what SSP application you're using. For example, in the following URL patterns, you must replace the following variables with values for your specific environment:

    • Shopping: http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/<SSP_APPLICATION>/shopping-local.ssp

    • My Account: http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/SSP_APPLICATION/my_account-local.ssp

    • Checkout: http://<DOMAIN_NAME>/c.<ACCOUNT_ID>/SSP_APPLICATION/checkout-local.ssp

    Variable

    Details

    DOMAIN_NAME

    Replace this value with the domain name configured for your NetSuite website record. For example, http://www.mysite.com.

    ACCOUNT_ID

    Replace this value with your NetSuite account ID. For example, c.123456.

    SSP_APPLICATION

    Replace this value with the URL root that you are accessing.

    • For SuiteCommerce implementations, this variable should read scs.

    • For SuiteCommerce Advanced (SCA), this variable equals the URL root of the SCA implementation. For example, sca-dev-aconcagua or sca-dev-2019–2–0.

    Complete URLs for SuiteCommerce implementations would look like these examples:

    Complete URLs for SuiteCommerce Advanced implementations would look like these examples:

  5. Click on the Login link to your site and proceed to log in to your account. Note when you traverse a site’s touchpoint (change applications) the URL changes and reverts back to its live version. That is, the -local part of the SSP’s name will be removed from the URL.

  6. Go to My Account. When you're there, add the -local part back to the URL. The page will reload and you should now be in the local version of the site. Now, if you open your browser's developer tools, you see your "Hello World!" message in the console.

Next Steps

Consider browsing other topics within Develop Extensions. For specific aspects of developing SuiteCommerce extensions and to expand the capabilities of the extension see: