A project dependency is a code package that’s accessible anywhere in a project. In this article, you’ll learn how to add project dependencies via the Web Editor.
Where possible, we recommend using an Integration to run environment-level code.
The project dependency feature makes it easier to import external code modules into the Web Editor. Users can import code for a project from four sources.
- NPM
- GitHub
- Gist
- Local File System (not recommended)
These imported modules are available for use within the JavaScript variants of a project and will execute before the metamodel is evaluated against the context.
You can use project dependencies to establish the working context before Evolv applies variants for the first time. This allows for passing specific data to Evolv that we would otherwise have no way of knowing about, such as audience info, variables managed by other integrations, etc. The system can use the data for targeting and other reporting analysis.
Project dependencies also help with the more basic use case of copying and pasting shared code across multiple variants and providing helper functions like those in Lodash or jQuery.
How to add a dependency to your Evolv project
Whatever the source of the import, the required format is standard NPM. Make sure the module you want to import follows NPM conventions. You can refer to the CommonJS standards for the content of the package itself.
- To load the external module into your Web Editor project, open Project Settings and select “Add Dependency”.
-
Select the package source from the drop-down, fill in the required fields and press save.
-
On the project settings screen, press save.
-
Your dependency has now been added to the project.
-
Validating your new dependencies
You can verify the package is included and loaded correctly by saving the project and inspecting the .yml file.
At the top of the file is a list of your dependencies.
Scroll to the bottom of the .yml file and find the included modules.
NPM
If you are importing a publicly available library from NPM, we recommend specifying a single server version, rather than a tag like “latest”, which may become updated in a way that breaks your code.
| Field Name | Description | Example |
| Package Name | The name of your package | "lodash" |
| Version | The semantic version. | 4.17.20 |
| Alias | The alias can be anything. Use the alias to refer to the module in your variant JavaScript. | - |
GitHub
Your GitHub package must be public before you can add it as a dependency.
| Field Name | Description | Example |
| Organization | The name of your GitHub organization. | evolv-ai |
| Repo | The name of the repo. | web-helper-utils |
| Branch |
Enter the name of the branch or a tag you want to use. These two fields are mutually exclusive - choose one only. Avoid using a tag like 'latest' as it could inadvertently break your experiment. |
main |
| Tag | ||
| Alias | The alias can be anything. Use the alias to refer to the module in your variant JavaScript. | helperUtils |
Gist
A Gist can be Secret or Public. Learn more about making Gists.
| Field Name | Description | Example |
| Gist | The Gist ID. | 866cf8b4d0b4e04957c990630aa0fe9a |
| Revision | Not required. | |
| Alias | The alias can be anything. Use the alias to refer to the module in your context or variant JavaScript. | myVariable |
Local File System
We don't recommend using this option because it can break the dependency if multiple people are working on the same project.