# Dependencies

Dependencies in BCMS are external packages (e.g., axios, lodash) that can be used within [BCMS Functions](https://www.thebcms.com/docs/extending/functions.md). The Dependencies panel gives you full control over managing these packages per instance.

### How to access

1. Open your BCMS instance dashboard

2. Go to Settings

3. Click on the Dependencies tab in the settings navigation

![Image](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/686bbbb5d584eab8e2effa7f/bin2/CleanShot%202025-07-07%20at%2014.20.25%402x.jpg?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23)

---

### Interface overview

#### Left panel - Dependency list

- Displays all added dependencies

- Shows empty state: “No dependencies” if none exist

- Highlights the selected dependency

- Each dependency has an Edit button

#### Right panel – Detail view

- Dynamically changes between dependency form and detail display

- Controlled by router state

- Used for both editing and creating dependencies

---

### Managing dependencies

#### Adding a dependency

1. Click Add new dependency

2. Fill in the form:Name: Package name (e.g., axios)

3. Version: Constraint (e.g., ^1.7.5, ~2.0.0)

4. Validation rules:Name is required and must be unique

5. Version is required and must follow semantic versioning

6. Click Add dependency

7. Success will redirect you to the detail view

#### Editing a dependency

- Select a dependency from the list

- Update the name or version

- Validation rules remain the same

- Click Update dependency to save, or Cancel to discard

#### Deleting a dependency

- Select the dependency

- Click Delete

- Confirm the irreversible action in the dialog

- You'll return to the main list

---

### Navigation & UX details

- Clicking a dependency shows its detail view

- Clicking the same active dependency again will deselect it

- Use the X or Cancel to go back to the list

- Real-time updates via WebSockets: all users instantly see changes

- Responsive two-column layout, max width 1100 px for readability

---

### Use cases

#### Development workflow

- Quickly reference packages used in Functions

- Share visible dependency context with your team

- Audit dependencies per instance

---

### Technical details

#### Data structure

Each dependency includes:

- id: Unique ID

- name: npm package name

- version: Semver constraint

- instanceId: Associated BCMS instance

- userId: Creator

- createdAt / updatedAt

#### Validation

- Name: Required, unique

- Version: Required, semver format

- Format: Follows npm naming conventions

#### Permissions

- Only Admins can manage dependencies (create, edit, delete)

- Dependencies are instance-scoped

---

### Best practices

#### Naming

- Use standard npm naming

- Be consistent across environments

#### Versioning

- Use semver constraints like ^, ~, or pinned versions

- Document changes when bumping major versions

#### Organization

- Keep your list clean and up to date

- Group related packages logically

- Remove unused entries to reduce clutter

#### UX and error handling

- Duplicate name protection

- Clear validation messages for incorrect input

- Success and error notifications for all actions

- Graceful fallback for network issues

---

This feature streamlines how you manage packages needed for BCMS Functions. It keeps dependency tracking centralized, visible, and maintainable for your team.