Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable support for custom defined CDN endpoints #97

Merged
merged 3 commits into from Sep 28, 2016

Conversation

@dstaley
Copy link
Contributor

@dstaley dstaley commented Sep 12, 2016

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

@@ -17,22 +17,29 @@ describe('cdn helper', function () {
theme_version_id: '123',
theme_config_id: '3245',
};
var themeSettings = {
cdn: {
customcdn: {

This comment has been minimized.

@mcampa

mcampa Sep 27, 2016
Contributor

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

This comment has been minimized.

@dstaley

dstaley Sep 27, 2016
Author Contributor

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.

This comment has been minimized.

@mcampa

mcampa Sep 27, 2016
Contributor

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.

also adds additional tests for when multiple CDN endpoints are
configured
@mcampa
Copy link
Contributor

@mcampa mcampa commented Sep 28, 2016

LGTM 👍

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

@mcampa mcampa merged commit e8cbfcf into bigcommerce:master Sep 28, 2016
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@bookernath
Copy link
Contributor

@bookernath bookernath commented Sep 29, 2016

Dude, sweet.

@ghost
Copy link

@ghost ghost commented Sep 15, 2017

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

@mcampa
Copy link
Contributor

@mcampa mcampa commented Sep 15, 2017

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

@ghost
Copy link

@ghost ghost commented Sep 16, 2017

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
Copy link
Contributor

@mcampa mcampa commented Sep 20, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants
You can’t perform that action at this time.