Add References and Set a License - React JS

This tutorial shows how to add the LEADTOOLS references and set the runtime license in React.JS. Before any functionality from the SDK can be leveraged, a valid runtime license will have to be set. For instructions on how to obtain a runtime license refer to Obtaining a License.

Overview  
Summary This tutorial demonstrates how to set up a React.JS project and use the LEADTOOLS SDK to set a Runtime License.
Completion Time 15 minutes
Visual Studio Project Download tutorial project (206 KB)
Platform React JS Web Application
IDE Visual Studio Code - Client
Development License Download LEADTOOLS

Required Knowledge

The tutorial will be covering how to create a ReactJS application, add LEADTOOLS dependencies, and set a license file in order to use LEADTOOLS functionality. To follow this tutorial, a text editor such as Visual Studio Code is needed as well as Node.js.

Create the Project

If working on Windows, then open PowerShell or CommandPrompt. If working on a Unix based system, then open a new Terminal. Change the directory using cd to the location where the project is to be created. Run the following command to create a new ReactJS application:

npx create-react-app leadtools-getting-started

Add the license files

Navigate into the public folder inside the newly-created leadtools-getting-started folder, and create a LEADTOOLS folder. This folder will hold the 2 JavaScript license files that were sent via email LEADTOOLS.lic.txt and LEADTOOLS.lic.key.txt.

Add LEADTOOLS Dependencies

In order to utilize the LEADTOOLS components, the LEADTOOLS JavaScript libraries need to be added to the application. To do that, in the public folder create a new folder named Common.

Navigate to the JS library path in the SDK installation <InstallDir>\Bin\JS\ and copy Leadtools.js to the Common folder.

Add The Set License Code

Create a JS file in the Common folder created in the above step, and name it app.js. This 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 following code.

window.onload = function () { 
  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); 
    } 
  }); 
} 

Important Note:

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

Import LEADTOOLS Dependencies

Open index.html in the public folder. Add the below necessary script tags inside the <head> to import LEADTOOLS dependencies.

Also import the JS file we created.

XML
<script src="/common/Leadtools.js"></script> 
<script src="/common/app.js"></script> 
Dependencies script tags

Run the project

Open the Command line application used to create the ReactJS application in the root of the ReactJS project and run npm start.

This will build the ReactJS application, then open the developers console with F12 and see that the LEADTOOLS license has been set.

Success result

Wrap-Up

This tutorial showed how to set a client-side LEADTOOLS license in a ReactJS application.

See Also

Help Version 21.0.2020.9.15
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.