Global Dependencies

Global dependencies in Elemental CMS are resources that your web application needs across multiple pages. Unlike modern bundling systems that combine everything into massive files, we follow a clean, direct approach where each dependency is a separate, focused file loaded directly without bundling or minification.

Understanding Global Dependencies #

Global dependencies are organized by type in separate folders:

GLOBAL_DEPS_FOLDER/ ├── text_css/ # CSS stylesheets ├── application_javascript/ # Standard JavaScript └── module/ # ES6 modules

Creating Dependencies #

CSS Dependencies

Create a CSS dependency with a clear, direct reference:

# Create the dependency elemental-cms global-deps create -d bootstrap text/css # Edit text_css/bootstrap.json { "_id": ObjectId("..."), "order": 1, "name": "bootstrap", "type": "text/css", "url": "css/bootstrap.css", # Direct file reference "meta": { "crossorigin": "anonymous" } }

JavaScript Dependencies

JavaScript dependencies follow the same direct approach:

# Create the dependency elemental-cms global-deps create -d jquery application/javascript # Edit application_javascript/jquery.json { "name": "jquery", "type": "application/javascript", "url": "js/jquery.js", # Clean, unminified source "meta": { "crossorigin": "anonymous" } }

ES6 Modules

Modern JavaScript modules are handled directly:

# Create module dependency elemental-cms global-deps create -d app-utils module # Edit module/app-utils.json { "name": "app-utils", "type": "module", "url": "js/modules/app-utils.js", # Direct module file "meta": { "type": "module" } }

Managing Dependencies #

Available Commands

# List all dependencies elemental-cms global-deps list # Create new dependency elemental-cms global-deps create -d bootstrap text/css # Push single dependency elemental-cms global-deps push -d bootstrap text/css # Push all dependencies elemental-cms global-deps push --all # Pull dependencies from database elemental-cms global-deps pull --all # Remove a dependency elemental-cms global-deps remove -d bootstrap text/css

Backup System #

When updating existing dependencies, the system automatically creates backups:

GLOBAL_DEPS_FOLDER/ └── text_css/ ├── bootstrap.json # Current version └── .bak/ └── bootstrap-1637875033623.json # Backup with timestamp

Best Practices #

Keep Dependencies Separate

  • One file per dependency
  • No bundling or minification
  • Direct file references

Organize by Purpose

  • Use meaningful file names
  • Group by type (css/js/module)
  • Maintain clear folder structure

Loading Order

  • Use order field for dependencies
  • Load CSS before JavaScript
  • Keep dependencies focused

Examples #

Basic Stylesheet

{ "name": "site-theme", "type": "text/css", "url": "css/theme.css", "order": 1, "meta": {} }

JavaScript Library

{ "name": "data-utils", "type": "application/javascript", "url": "js/data-utils.js", "order": 2, "meta": { "defer": "true" } }

ES6 Module

{ "name": "api-client", "type": "module", "url": "js/modules/api-client.js", "order": 3, "meta": { "type": "module" } }

This approach ensures your application remains maintainable and clear, without unnecessary complexity or build steps. Each resource is loaded directly and serves a specific purpose.

Content