Set Up SCA 2019.1 for Theme and Extension Developer Tools

This topic applies to

Applies to

SuiteCommerce Advanced

This topic applies to developers implementing the 2019.1 release of SuiteCommerce Advanced who intend to create themes and extensions.

At this time, you must use the developer tools provided with the SuiteCommerce Extension Management Bundle 2018.2.1 release to create themes and extensions for the 2019.1 release of SuiteCommerce Advanced.

Before doing so, however, you must customize your developer environment as described in this section. The customization you create depends on the developer tools you intend to use (theme or extension developer tools).

This customization alters the whoService() method in the gulp/tasks/local.js file. The whoService() method returns information used by the application’s local.ssp file to know the resources and location that must be loaded. You must edit the url for the css, templates, and js_extensions objects to use the correct tools. The URL you specify depends on the tools you intend to use.

Refer to the following table for port designations based on the developer tools you intend to use:

2018.2.1 Developer Tools

Local Host Port

Theme Developer Tools

7778

Extension Developer Tools

7779

To customize your developer environment for SCA 2019.1:

  1. If you have not yet done so, complete set up of your SCA developer environment. See Download the Source Files and Install Additional Files in the Source Directory for details.

  2. Access your root source directory and open the following file:

    gulp/tasks/local.js

  3. Customize the css object:

    1. Locate the following lines within the whoServices() method:

      var css = { tag: 'link' , resource: 'css' , url: `${protocol}://${host}/css/${app}.css` }
    2. Replace , url: `${protocol}://${host}/css/${app}.css` with the following.

      In the following code, replace [PORT] with the local host port for the tools you intend to use.

      , url: `http://localhost:[PORT]/tmp/css/${app}.css`

      For example, to use the theme developer tools, your code should look like this:

      var css = { tag: 'link' , resource: 'css' , url: `http://localhost:7778/tmp/css/${app}.css` }
  4. Customize the template object:

    1. Locate the following lines within the whoServices() method:

      ,   templates = {
              tag: 'script'
          ,   resource: 'templates'
          ,   url: null
          }
    2. Replace , url: null with the following.

      In the following code, replace [PORT] with the local host port for the tools you intend to use.

      ,   url: `http://localhost:[PORT]/tmp/${app}-templates.js`
  5. If you are using the extension developer tools, customize the js_extensions object:

    1. Locate the following lines within the whoServices() method:

      , js_extensions = { tag: 'script' , resource: 'js_extensions' , url: null };
    2. Replace , url: null with the following.

      , url: 'http://localhost:7779/tmp/extensions/${app}_ext.js'

      Note

      If you are using the theme developer tools, keep the url property set to null.


  6. Find the following lines:

    var response; if(process.is_SCA_devTools) { css.url = null; response = [ css , require_patch , requirejs , templates , js_core , js_extensions ]; }
  7. Comment out the following line:

    css.url = null;

    Your resulting code should look like this snippet:

    var response; if(process.is_SCA_devTools) { //css.url = null; response = [ css , require_patch , requirejs , templates , js_core , js_extensions ]; }
  8. Save the file.

You should now be able to use the 2018.2.1 theme and extension developer tools to create themes and extensions on your SCA site.