Skip to main content

@zoovu/exd-scripts

The @zoovu/exd-scripts package includes build scripts and development tools for working with extensions in Experience Designer. Use it to serve your extension during development, create production builds, and manage versioning.

Installation​

The package is usually included in your extension project as a development dependency. You can find it in the devDependencies section of package.json:

"devDependencies": {
  "@zoovu/exd-scripts": "2.1.0"
}

INFO: Make sure you are using Node.js version 20.

Usage​

The package provides a command-line tool called zoovu-experience-designer-scripts. It's typically used through yarn or npm scripts in your project.

Example scripts section in package.json:

"scripts": {
  "dev": "zoovu-experience-designer-scripts remote-component dev",
  "bump-version": "zoovu-experience-designer-scripts remote-component bump-version",
  "build": "zoovu-experience-designer-scripts remote-component build"
}

You can run these scripts using:

yarn dev
yarn build
yarn bump-version

Available commands​

Start development server​

zoovu-experience-designer-scripts remote-component dev

This starts a local development server that:

  • compiles your extension
  • watches for changes and reloads automatically
  • makes the extension available for testing in Experience Designer for developers

Go to https://orca-experience.zoovu.com/developer to test the extension. Refresh the page at least once after running the script.

Create a production build​

zoovu-experience-designer-scripts remote-component build

Creates an optimized version of your extension for production. This includes:

  • minified JavaScript and CSS
  • optimized assets
  • a build directory with everything needed for upload
  • a .zip archive that you can drag and drop into Experience Designer

After running the script, check the build folder for:

  • bundled files
  • component.zip archive
  • manifest JSON with metadata

Bump extension version​

zoovu-experience-designer-scripts remote-component bump-version

Increments the version number in your package.json. Use this when you're uploading a new version of the extension to Experience Designer.