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.
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.
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.
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.
|Package Name||The name of your package||"lodash"|
|Version||The semantic version.||4.17.20|
|Organization||The name of your GitHub organization.||evolv-ai|
|Repo||The name of the repo.||web-helper-utils|
Enter the name of the branch or a tag you want to use.
These two fields are mutually exclusive - choose one only.
|Gist||The Gist ID.||866cf8b4d0b4e04957c990630aa0fe9a|