Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

CDN proposal using CORS #680

Closed
juliandescottes opened this Issue · 7 comments

4 participants

Julian Descottes Benoit Charbonnier Fabio Crisci jakub-g
Julian Descottes

Hi,

I think I got an Aria Templates "CDN" working.
You can see it in action here : http://plnkr.co/edit/BtIHoo

Instead of relying on the old XDR + crossdomain.xml approach, I am using CORS. With XDR, I managed to have something "working", but it was really unreliable.

The CDN itself is running on Google APP Engine (http://ariatemplatestcdn.appspot.com/). More details about that below.

How to use it

Load aria templates from the CDN :

<script src="http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/aria/ariatemplates-1.4.4.js"></script>

Load the skin from the CDN (if you want to use widgets) :

<script src="http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/aria/css/atskin-1.4.4.js"></script>

Declare a root map :

aria.core.DownloadMgr.updateRootMap({
    "aria" : "http://ariatemplatestcdn.appspot.com/cdn/1.4.4/min/",
    "*" : ""
});

Then you can load both aria templates classes and your own classes.
(you can refer to the plunker for a live example).

Aria Templates impacts

On aria templates side, I am serving a slightly custom version, which is using aria.core.transport.XHR instead of aria.core.transport.XDR, even for cross-domain requests.

In aria.core.IO, line 215 was changed to :
this.__crossDomain = "aria.core.transport.XHR";

CDN

Other than that the CDN itself is a simple google appengine application, which allows GET and OPTIONS requests from any origin. (code below)

import os, mimetypes, logging

from google.appengine.ext import webapp
from google.appengine.ext.webapp import util

mimetypes.init()

class MainHandler(webapp.RequestHandler):
  def options(self, path):
    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    self.response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Requested-With'
    self.response.headers['Content-Type'] = mimetypes.guess_type(path)[0]
  def get(self, path):
    path = os.path.normcase(os.path.join(os.path.split(__file__)[0], "cdn/", path))
    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Content-Type'] = mimetypes.guess_type(path)[0]
    self.response.out.write(open(path, 'r').read())

def main():
  application = webapp.WSGIApplication([
      ('/cdn/(.*)', MainHandler)
  ], debug=True)
  util.run_wsgi_app(application)

if __name__ == '__main__':
    main()
Benoit Charbonnier
Owner

Good game !! Well done.
Let's do the same on cdn.ariatemplates.com

Fabio Crisci

:thumbsup:

btw this.__crossDomain can be set with aria.core.IO.updateTransport, no need to change anything in the code.

Julian Descottes

Cool, I'll try using updateTransport.

Julian Descottes

updateTransports works fine, thanks !

I just tried an alternative : https://github.com/jpillora/xdomain . Purely client side, no need to set anything on the server. You only have to drop a simple html file on your CDN and that's it.

I did this on my atcdn repository (https://github.com/juliandescottes/atcdn/tree/gh-pages) , and it's working !
That's cheaper to implement than CORS and apparently more supported.

Below is the basic HTML file you need to use this new approach :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AT CDN bootstrap</title>
    <script src="http://jpillora.com/xdomain/dist/xdomain.min.js" slave="http://juliandescottes.github.io/atcdn/proxy.html"></script>
    <script src="http://juliandescottes.github.io/atcdn/1.4.4/min/aria/ariatemplates-1.4.4.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        aria.core.IO.updateTransports({
            'crossDomain' : 'aria.core.transport.XHR'
        });
        aria.core.DownloadMgr.updateRootMap({
          "aria" : "http://juliandescottes.github.io/atcdn/1.4.4/min/",
          "*" : ""
        });
    </script>
    </body>
</html>
Benoit Charbonnier
Owner

I just tried an alternative : https://github.com/jpillora/xdomain . Purely client side, no need to set anything on the server. You only have to drop a simple html file on your CDN and that's it.

This lib is just pure awesomeness! Super simple, but what a clever trick !!

jakub-g
Collaborator

The CDN is there on http://cdn.ariatemplates.com/
Let's continue the discussions on http://ariatemplates.com/forum/showthread.php?tid=94
Closing this item for now. @juliandescottes thanks for inspiration :)

jakub-g jakub-g closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.