Enable support for custom defined CDN endpoints

[dstaley]

This pull request allows theme creators to define custom CDN endpoints, and use them via the cdn handlebars helper.

When designing themes for BigCommerce, theme designers might want to include large, high resolution image assets as components of their theme. For example on maruccisports.com, each product category includes a 5120x2536 background image, most of which are between 3 and 5 MB. Since sending that much image data down the wire is a poor user experience, we use Imgix to resize and reformat the images depending on the device viewing them. A theme designer might want to use a local version of the image in development, and a version on a CDN like Imgix in production. This pull request allows the designer to define endpoints in their theme's config.json file like this:

{
  "name": "Cornerstone",
  "version": "1.3.2",
  "settings": {
    "homepage_new_products_count": 12,
    "homepage_featured_products_count": 8,
    "cdn": {
      "customcdn": {
        "path": "https://bigcommerce.customcdn.net"
      }
    }
  }
}

After defining an endpoint, the theme designer is then able to use the shortname the same way they currently use the webdav one:

<img src="{{cdn "customcdn:img/image.jpg"}}" />

In development, the previous helper would return the following:

<img src="/assets/cdn/customcdn/img/image.jpg" />

And in production:

<img src="https://bigcommerce.customcdn.net/img/image.jpg" />

Right now, the helper is configured to rewrite local URLs to a cdn folder within assets. This is to circumvent the 50MB bundle size limit by excluding assets/cdn from the bundle created by stencil bundle. In addition to this PR, I've filed one that makes this change against the stencil-cli repo. bigcommerce/stencil-cli#240

[mcampa]

I think this structure is unnecessary, the path is too nested. Can you change the code to be like this?

"settings": {
      cdn: {
        customcdn1: "cdn1.mystore.com",
        customcdn2: "cdn2.mystore.com"
    }
}

usage:

{{cdn "customcdn1:path/to/image.jpg"}}
{{cdn "customcdn2:path/to/image.jpg"}}

Also, if you can, add a test case with two custom cdn urls like the above

[dstaley]

I definitely agree that the additional nesting is unnecessary, but I was thinking it would be better to start out with an object instead of a string in the event additional functionality like different endpoints based on environment. For example, Imgix can resize images based on URL parameters, but if you wanted to test this functionality locally you'd need to run an additional server, and setup something like this

cdn: {
    imgix: {
        path: "https://bc.imgix.net",
        local_path: "http://localhost:8080"
    }
}

However, starting with using strings and then just adding a typecheck in the future if additional functionality is added could be a way around it as well! Just let me know what you'd prefer and I'll make it happen!

I'll also push a few additional tests with multiple endpoints configured.

[mcampa]

I understand your point, but we want to keep the settings very simple and clean. If we want to implement the different environments idea we could do the type check as you said.

[mcampa]

LGTM 👍

need to test it before deploying to production @bc-ranji

[bookernath]

Dude, sweet.

[imagekit-developer]

Does it only work with cdn helper? How to do the same with getImage helper?

[mcampa]

getImage only works with images hosted by BigCommerce so it won't work with custom cdns.

[imagekit-developer]

Is there any possible way so that one can use custom CDN for the URLs generated via getImage?

Maybe some sort of assignment and then replacing in the template. Not sure if that's possible in the handlebar.

[mcampa]

there is a replace helper. But again, getImage is a helper to resize product images hosted by BigCommerce. Images are processed in our servers and hosted in our cdn.