ClearBlade IoT Enterprise and Edge
ClearBlade IoT Enterprise and Edge
Breadcrumbs

NPM import tutorial

To effectively manage ClearBlade libraries, you will use the ClearBlade Command Line Tool and the cb-dev-kit tool for local development and transpiling NPM packages. Below is a step-by-step guide to achieve this, using the moment-timezone NPM package as an example. You can change the instructions for other NPMs accordingly.

Prerequisites

  1. ClearBlade Command Line Tool (cb-cli):

  2. cb-dev-kit:

Steps to import NPM packages

  1. Initialize ClearBlade workspace:

    • Choose a folder on your local machine, either blank or a Git/source-control workspace.

    • Run cb-cli init in the chosen folder.

    • Follow the initialization steps, referring to the ClearBlade system where the transpiled code will run.

  2. Create a dummy library:

    • Use the ClearBlade console to create a dummy library named MomentTimezonein the system.

      image-20241219-182315.png


    • The transpiled NPM package will replace this placeholder library.

  3. Pull the library:

    • Pull the library into your local workspace using:

      cb-cli pull -library MomentTimezone

  4. Open the workspace in IDE:

    • Open the local workspace in your preferred IDE (e.g., Visual Studio Code).

      image-20241219-182751.png


  5. Initialize cb-dev-kit:

    • In the same local workspace folder, run:

      cb-dev-kit init


  6. Install the node module:

    • Install the moment-timezone NPM module with the following command:

      npm i --save moment-timezone


  7. Create transpiled library:

    • Run the following command to create the transpiled library:

      cb-dev-kit create -l MomentTimezone -t ts

      NOTE: -t means type and can be ts for TypeScript or js for JavaScript.

      You may see component name undefined returned to your terminal. Ignore this.

  8. Locate the new folder:

    • After successful execution, a new folder will appear in the src directory.

  9. Modify the JavaScript or TypeScript file:

    • Look at the NPM documentation to find the main object to import. For moment-timezone it is moment.

      image-20241219-194536.png


    • In the new JS or TS file within the src folder, add the following lines at the top and delete any other lines:

      import moment from 'moment-timezone'; 
global.moment = moment;


  10. Build the library:

    • Run the build command:

      npm run build:library -library=MomentTimezone


  11. Push to ClearBlade system:

    • Push the library to the ClearBlade system with:

      cb-cli push -library MomentTimezone

    • This will upload the library, making it available in the ClearBlade system.

    • Create a test code-service in the system to test the library. Make sure to add the library as a dependency.

      For example:

      function test_moment_timezone(req,resp){
    // These are parameters passed into the code service
    // var params = req.params;
    // var moment = moment_timezone_lib().moment_timezone();
    var june = moment("2014-06-01T12:00:00Z");
    log(june.tz('America/Los_Angeles').format('ha z')); // 5am PDT
    log(june.tz('America/New_York').format('ha z'));    // 8am EDT
    log(june.tz('Asia/Tokyo').format('ha z'));          // 9pm JST
    log(june.tz('Australia/Sydney').format('ha z'));    // 10pm EST

    var dec = moment("2014-12-01T12:00:00Z");
    log(dec.tz('America/Los_Angeles').format('ha z'));  // 4am PST
    log(dec.tz('America/New_York').format('ha z'));     // 7am EST
    log(dec.tz('Asia/Tokyo').format('ha z'));           // 9pm JST
    log(dec.tz('Australia/Sydney').format('ha z'));     // 11pm EST
    
    resp.success("Done");
}



      image-20241219-204251.png


By following these steps, developers can import and manage NPM packages as ClearBlade libraries.