/
NPM import tutorial

NPM import tutorial

Owned by Jeff Slavin (Unlicensed)
Last updated: Dec 19, 2024 by Akash Sharma
3 min read

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.