A common question many developers ask when getting started on SuiteCommerce Advanced (SCA) is how to integrate third party libraries with the front end application, thankfully the SCA framework has a useful module loader that makes it an easy task. In this blog post we are going to quickly cover the steps required to add your favourite libraries to SCA.

Creating a module folder for your library

At the root directory of every SCA application there is a Modules folder. Within this lies the suitecommerce folder which stores all the core SCA modules and a third_parties folder which stores the third party modules. Its also good practice to add any custom modules to a new folder under a name of your choosing, within 3EN we use a 3EN folder for simplicity:

 Sample Module directory structure

Sample Module directory structure

Since we are adding a third party library i.e a library that we didn't create ourselves we will add this to the third_parties folder. In this example we will add the awesome slick.js carousel library to our application.

Create a folder under third_parties called slick@1.6.0. This is a convention defined by SCA where we name the folder after the library and the version after the @ symbol. Don't forget to add your library files to the folder:

 Slick module directory structure

Slick module directory structure

 

Defining the ns.package.json file

Once we have our basic directory structure defined we need to create an ns.package.json file within our slick@1.6.0 module directory. This file is used by the SCA build process (gulp) to process your module's files based on their type. In our example we have JavaScript and SASS files that need to be picked up by gulp, so our json looks like this:

{
    "gulp": {
        "javascript": [
            "assets/slick.js"
        ],
        "sass": [
            "assets/*.scss"
        ]
    }
}

Updating the distro.json file

Next step is to update the distro.json file to tell gulp to actually deploy this module and where to use it within the application. 

First thing we need to do is to add the reference to our slick module to the modules section close to the top of the file. Since the third party libraries are added at the bottom of the modules object, its best to follow this pattern and add it to the end like so:

...
"modules": {
  ...
  "third_parties/slick":"1.6.0"
}
...

This will add the module to the build process but wont include it in any of the applications. So for example if we want to use slick in the shopping application, search the distro.json file for the "SC.Shopping.Starter" entry point and add slick to the dependencies array:

"javascript": [
    {
        "entryPoint": "SC.Shopping.Starter",
        "exportFile": "shopping.js",
        "dependencies": [
            ...
            "slick"
        ]
        ...
    }
    ...
]  

After you complete all these steps you will be able to use your third party library within the SCA application.

 

Do you have any other topics you want us to cover? Click the contact us button to notify us directly about any subjects that can help you out!

 

Alternatively, let us know in the comments section below if you have any questions our queries about this blog. We are more than happy to help!

 

To stay in the loop for further news, guides, resources and more, sign up to "insight" our flagship weekly NetSuite and Business Software Newsletter, click here.

 

Comment