Add References and Set a License - NodeJS and TypeScript

This tutorial shows how to get started with the LEADTOOLS SDK in a NodeJS NPM project using TypeScript.

Required Knowledge

This tutorial uses a text editor such as Visual Studio Code to create and modify the necessary script files.

In addition, ensure that NodeJS is installed. This tutorial makes use of http-server, a console command for running a static file server. Below are their corresponding download links:

• https://nodejs.org/en/download/
• https://www.npmjs.com/package/http-server

Execute commands in this tutorial using PowerShell/CommandPrompt (if using Windows) or a terminal window (if using a Unix-based system).

Note

If you download the sample project above, the required dependencies need to be installed. To do so, run the following code to install the node modules: npm install

Create the Project and Add Dev Dependencies

Navigate to the directory location where the project is to be created and create a JSON file, and name it package.json. This is the NPM project's main configuration file which holds the project's metadata.

This tutorial uses the values below for the package.json file:

{ 
   "name": "lt-set-license", 
   "version": "1.0.0", 
   "author": { 
      "name": "LEAD Technologies, Inc.", 
      "url": "http://www.leadtools.com/" 
   }, 
   "license": "UNLICENSED", 
   "private": true, 
   "scripts": { 
      "build": "tsc --project ./ts/tsconfig.json", 
      "start": "http-server ./site -o -a localhost -p 20107 --cors --silent" 
   } 
} 

For the scripts value, the build script transpiles TypeScript into JavaScript in the output site folder. The start script will run the http-server which will host the contents of the site folder locally.

Once created, install the http-server and tsc packages as dev dependencies by executing the following commands:

• http-server: npm install –save-dev http-server

• TypeScript: npm install –save-dev typescript

Add the license files

Create a site folder in the project's root folder. This folder holds the files that will be hosted by the http-server.

Make a site\LEADTOOLS sub-folder. Copy and paste the LEADTOOLS.lic.txt and LEADTOOLS.lic.key.txt license files into the lic folder. Note that the licenses ending in .txt are for JavaScript. The license files that do not end in .txt are for server and desktop applications. The license files can be found in the following directory: <INSTALL_DIR>\LEADTOOLS22\Support\Common\License

Initialize the TypeScript Configuration File

Create a ts folder in the project's root folder. This folder will hold the TypeScript script files.

Navigate to the ts path and run the following command to initialize the tsconfig.json file: npx tsc --init

Open the tsconfig.json file in a text editor and use the following code:

{ 
   "compilerOptions": { 
      "target": "es5", 
      "module": "none", 
      "outDir": "../site", 
      "types": [ 
         "../leadtools_modules/@types/Leadtools" 
      ] 
   } 
} 

The outDir value sets the directory that TypeScript will transpile the output JS file. The types value adds the type definition files for the LEADTOOLS objects in the project.

Navigate to the project's root directory and create the folders for leadtools_modules/@types and add the Leadtools.d.ts type definition script file. The TS type definition files can be found in the following directory: <INSTALL_DIR>\LEADTOOLS22\Bin\JS

Add The Set License Code

Create a TS file in the ts folder created in the above step, and name it Index.ts. Open this file in a text-editor and add the code below:

document.addEventListener("DOMContentLoaded", () => { 
   (new lt.MyModule.SetLicense()).run(); 
}); 

For the app's code, create the sub-folder ts\App and create a TS file named SetLicense.ts. This file is where the LEADTOOLS set license call will be added. Open this file in a text-editor, such as Visual Studio Code, and add the appropriate code block from the two options below.

Development License

If you have a JS license (LEADTOOLS.LIC.TXT) and key file (LEADTOOLS.LIC.KEY.TXT), use the code below to set your license:

module lt.MyModule { 
   export class SetLicense { 
      public run(): void { 
         var licenseUrl = "LEADTOOLS/LEADTOOLS.lic.txt"; 
         var developerKey = "ADD THE CONTENTS OF YOUR LEADTOOLS.lic.key.txt FILE"; 
 
         lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
            // Check the status of the license   
            if (setLicenseResult.result) { 
               console.log("LEADTOOLS client license set successfully"); 
            } else { 
               var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
               console.log(msg); 
               alert(msg); 
            } 
         }); 
      } 
   } 
} 

Note

Make sure to replace the value of the developerKey string with the contents of the license Key text file.

Evaluation License

If you are evaluating and do not have a JS license or key file, you can use the code below to set your license:

module lt.MyModule { 
   export class SetLicense { 
      public run(): void { 
         var licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; 
         var developerKey = "EVAL"; 
 
         lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
            // Check the status of the license   
            if (setLicenseResult.result) { 
               console.log("LEADTOOLS client license set successfully"); 
            } else { 
               var msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
               console.log(msg); 
               alert(msg); 
            } 
         }); 
      } 
   } 
} 

Add LEADTOOLS Dependencies

Navigate to the site folder in the project's root path and create a Common folder. This folder holds the LEADTOOLS dependency JS files.

Copy the Leadtools.js file to this folder.

The JS files can be found in the following directory: <INSTALL_DIR>\LEADTOOLS22\Bin\JS

Import the LEADTOOLS Logic and Dependencies

Navigate to the site folder in the project's root path and create an index.html file, this is the main entry point for the hosted site.

Use the following code in this file:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <title>Setting a LEADTOOLS License</title> 
 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <link rel="icon" href="data:;base64,iVBORw0KGgo="> 
  
   <!-- Leadtools .js files --> 
   <script src="Common/Leadtools.js"></script> 
  
   <!-- SetLicense .js fies --> 
   <script src="App/SetLicense.js"></script> 
   <script src="Index.js"></script> 
  </head> 
  <body></body> 
</html> 

Run the Project

Execute the build script to transpile the TS scripts to the output site folder:

Once done, execute the start script to start the server and automatically open the hosted site in the default browser.

The following message is displayed in the Developer's Console (F12) to inform that the license has been set successfully.

Wrap-up

This tutorial showed how to set a client-side LEADTOOLS license in an ASP.NET Core web application using TypeScript.

See Also

• LEADTOOLS SetLicenseUri Documentation
• LEADTOOLS SDK Download
• LEADTOOLS Licensing Documentation