External Libraries Guide

Overview

Although the ReAPI web application fully supports all script components, we recognize that modern developers require the full power of their IDEs and AI assistants to streamline their workflow. That’s why ReAPI allows you to write and register all scripts externally via libraries—eliminating the need for writing code directly within the web app.

With external libraries, developers can create, manage, and maintain their scripts in a familiar environment while benefiting from powerful tooling.

Benefits of Using External Libraries

By leveraging external libraries, developers can enjoy:

Full IDE Support – Write scripts using familiar tools like VS Code with AI assistance and advanced refactoring.
Robust Testing – Validate scripts locally with unit testing frameworks before deployment.
Version Control – Manage script versions effectively with Git and CI/CD integration.
Dependency Management – Utilize NPM packages for extended functionality and structured dependency control.
Collaboration & Scaling – Improve teamwork by maintaining scripts in shared repositories.
Enhanced Security – Keep sensitive logic within internal repositories for compliance.

Get Started with the Template

To quickly set up your external library, use our official template repository:

ReAPI External Library Template

This repository is written in TypeScript and contains comprehensive documentation to guide you through the setup process.

Key Takeaways

Registration Guidelines

Consistent Rules – All script component rules, such as parameter limits, apply equally whether scripts are written in the web editor or local IDE.
Structured Exporting – All utilities, functions, and API hooks must be exposed through src/index.ts using fixed constant names (e.g., $$AssertionFunctions for assertion functions). Refer to the source code for details.
Read the Documentation – Carefully read the repository README before cloning and making any edits to ensure proper setup and compliance.
Pre-configured Build – The provided template uses UMD format and includes TypeScript type declarations, ensuring compatibility and enhanced developer experience.

Script Component Flags

When registering script components, you must declare the following flags:

enabled – Determines if the component is available in the test engine and no-code UI.
deprecated – Allows the component to remain in the engine but removes it from the UI.
tested – A self-declared flag ensuring the component has been properly tested before being enabled.

Deployment and Registration

Once you have added your functions, tested them, and built your library, the next step is to deploy the dist folder to a location where the test engine can load it. You have two main deployment options:

1. Deploy to NPM

Publishing your external library to NPM is straightforward and follows the same process as any other package. An added benefit of using NPM is that various CDN services can proxy your deployment, making it accessible worldwide within seconds.

Steps to Deploy to NPM:

Ensure your package.json file is properly configured.
Run the following command to publish your package:
```
npm publish --access public
```
Once published, your package can be accessed via CDN services like unpkg.

Example:

Once published to NPM, you can access your library via the following URLs:

UMD build: https://unpkg.com/YOUR_PACKAGE_NAME@VERSION/dist/build.umd.js
Type definitions: https://unpkg.com/YOUR_PACKAGE_NAME@VERSION/dist/build.d.ts

2. Upload to Private Server

If you prefer more control, you can upload the dist folder to your private server. However, please note that access control features are not yet supported, meaning the URL must be publicly accessible for the test engine to load the scripts.

Example:

Once uploaded to your private server, you can access your library via the following URLs:

UMD build: https://yourserver.com/path/to/dist/build.umd.js
Type definitions: https://yourserver.com/path/to/dist/build.d.ts

Coming Soon: Authentication and access control for private deployments.

Registering on WebApp

Once your library is deployed, follow these steps to register it in the ReAPI web application:

1. Create a New External Library Component

Navigate to the external library section in the UI.
Provide a meaningful title and description.

2. Fill in the Required Fields

Enter the JavaScript file URL (e.g., https://unpkg.com/YOUR_PACKAGE_NAME@VERSION/dist/build.umd.js).
Enter the TypeScript declaration file URL (e.g., https://unpkg.com/YOUR_PACKAGE_NAME@VERSION/dist/build.d.ts).

3. Scan Components Before Saving

Click the Scan Components button before saving.
This step is crucial to ensure your registered functions are indexed and available for use.
If you skip this step, no components will be available.

4. Enable the Library

Once the components are indexed, turn on the enabled switch.
Your functions are now available to use in the no-code UI and test engine.

Best Practices

When testing your external library, you can use latest in your version reference. This approach allows each deployment to take effect without requiring an update to the registered component in the ReAPI web app.

However, once the library is enabled for production use, it is recommended to stick to a specific version number. With each new release, manually update the registry to ensure stability and prevent unexpected changes.

Example:

For development/testing: https://unpkg.com/YOUR_PACKAGE_NAME@latest/dist/build.umd.js
For production: https://unpkg.com/YOUR_PACKAGE_NAME@1.0.0/dist/build.umd.js

By following this practice, you ensure flexibility during development and stability in production environments.

Conclusion

External libraries provide a powerful way to extend ReAPI while completely isolating developers from the test platform. This allows developers to focus solely on business logic using their preferred development environments, resulting in enhanced efficiency and productivity.

The provided template contains many details to check, but once familiarized, it takes just about 10 minutes to write a function with the help of AI-powered tools. This streamlined workflow enables teams to maintain high standards of quality and efficiency.

Global Script ReAPI API