javascriptfonts

Self-hosted default fonts for IMG.LY Creative Editor SDK are served from wrong url

I am using the Creative Editor of IMG.LY and want to serve the fonts from my application instead of the IMG.LY CDN. My default asset sources configurations looks like this:

instance.addDefaultAssetSources({
  baseURL: '/public/cesdk/assets/',
});

Expected Behavior

I expect the font to be applied directly from the URL specified in addDefaultAssetSources when selected.

Actual Behavior

The font loads from a URL that is appended to the base URL defined in the CreativeEditorSDK configuration.

Steps to Reproduce

If I change the typeface of a text element, all the fonts shown in the selector are loaded from the expected URL:

http://localhost:9000/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_abril_fatface_regular.ttf

However, when I click on a font to apply it to the text element, the font is loaded from:

http://localhost:9000/public/cesdk/engine/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_bungee_inline.ttf

It appears that the base URL of the default asset sources is being appended to the base URL specified in the CreativeEditorSDK config.

An example to reproduce the issue is available here: https://github.com/rtm-celum/imgly-hosted-fonts

Details

I followed these guides

IMG.LY Setup:

import CreativeEditorSDK from '../node_modules/@cesdk/cesdk-js/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  // Serve assets from IMG.LY cdn or locally
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.35.1/assets',
  baseURL: '/public/cesdk/engine',
  locale: 'en',
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  await instance.addDefaultAssetSources({
    baseURL: '/public/cesdk/assets/',
    excludeAssetSourceIds: [
      'ly.img.vectorpath',
      'ly.img.filter.duotone',
      'ly.img.filter.lut',
      'ly.img.sticker',
      'ly.img.image',
      'ly.img.colors.defaultPalette',
      'ly.img.effect',
      'ly.img.blur',
    ],
  });

  const engine = instance.engine;
  const scene = engine.scene.create();
  const page = engine.block.create('page');
  engine.block.appendChild(scene, page);
});

Screenshots

Font Selector

Font Selector

Font Selector - Network Trace

Font Selector - Network Trace

Applying the Font

Applying the Font

Applying the Font - Network Trace

Applying the Font - Network Trace

Solution

  • The root cause of the issue was that I was using a relative URL for the baseURL. The Creative Editor SDK expects the baseURL to be an absolute URL.

    So instead of

    instance.addDefaultAssetSources({
    baseURL: '/public/cesdk/assets/',
});

    I needed to use an absolute URL like:

    instance.addDefaultAssetSources({
    baseURL: 'https://mywebsite.com/public/cesdk/assets/',
});

    More information about serving assets is in this guide: https://img.ly/docs/cesdk/engine/guides/assets-served-from-your-own-servers/