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:

      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:

       

  10. Build the library:

    • Run the build command:

       

  11. Push to ClearBlade system:

    • Push the library to the ClearBlade system with:

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

       

       

       

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