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):

   • Have the latest version installed.

   • GitHub Repository: ClearBlade/cb-cli

2. cb-dev-kit:

   • Have the latest version installed.

   • GitHub Repository: ClearBlade/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.

     

   • The transpiled NPM package will replace this placeholder library.
     

3. Pull the library:

   • Pull the library into your local workspace using:

     CODE

     cb-cli pull -library MomentTimezone

4. Open the workspace in IDE:

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

     

5. Initialize cb-dev-kit:

   • In the same local workspace folder, run:

     CODE

     cb-dev-kit init

6. Install the node module:

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

     CODE

     npm i --save moment-timezone

7. Create transpiled library:

   • Run the following command to create the transpiled library:

     CODE

     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.
     

     

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

     CODE

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

10. Build the library:

    • Run the build command:

      CODE

      npm run build:library -library=MomentTimezone

11. Push to ClearBlade system:

    • Push the library to the ClearBlade system with:

      CODE

      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:

      CODE

      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");
      }

      

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