2021-07-06 08:46:56 +00:00
## Steps to add a custom JS library in Appsmith
1. Install the npm library of your choice in the client codebase
```
$ cd app/client
$ yarn install myLibrary
```
2. In the file `app/client/src/utils/DynamicBindingUtils.ts` find the const `extraLibraries` and add details about your library in the codebase
```
import myLibrary from "myLibrary";
...
...
const extraLibraries = [
...
{
accessor: "myLibrary",// The namespace for access
lib: myLibrary, // the javascript module from npm
version: "3.17.5", // version number of the module
docsURL: "https://github.com/NaturalIntelligence/fast-xml-parser",
displayName: "xmlParser", // Display name on the left pane
},
]
```
2022-11-27 06:11:01 +00:00
3. To make this show up in autocomplete of appsmith we will need to add this to the Tern server file `app/client/src/utils/autocomplete/CodemirrorTernService.ts`
2021-07-06 08:46:56 +00:00
- Add a new def file for your library usages [ref ](https://ternjs.net/doc/manual.html#typedef ) under `app/client/src/constants/defs/`
- Import that file in the Tern Server file and add the def in the `DEFS` array right at the top of file
```
const DEFS = [..., myLibraryDef];
```
Notes:
- Step 3 is optional but really helpful to get the hints in autocomplete.
- All JS libraries run in a worker thread with a protected context. Make sure they run as expected during testing
