NPM import tutorial

Owned by Jeff Slavin (Unlicensed)
Jun 10, 2024
2 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 crypto-js NPM package as an example.

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:

    • In the ClearBlade console, create a dummy library named CryptoJS.

    • The transpiled NPM package will replace this placeholder library.

  3. Pull the system:

    • Pull the system into your local workspace using:

      cb-cli pull -library CryptoJS

  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:

      cb-dev-kit init

  6. Install the node module:

    • Install the crypto-js module with the following command:

      npm i --save crypto-js

  7. Create transpiled library:

    • Run the following command to create the transpiled library:

  8. Locate the new folder:

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

  9. Modify the JavaScript file:

    • In the new JS 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. You can use the provided test service to see how to call functions from the library.

By following these steps, developers can efficiently import and manage NPM packages as ClearBlade libraries, ensuring seamless integration into their ClearBlade projects.