Serving Django API on Heroku and single-page app on Amazon S3 on the same domain

Question

I want to build a web app where frontend (static) and backend (API) are, except for sharing the same domain, completely seperated. Usually I would consider this to be no problem, but I have some special requirements:

• the API runs on Heroku (using Django & TastyPie)
• all the static content, including the html files will be hosted on Amazon S3

The frontend app will be a single page Javascript application (with a base template, lets call it index.html) and populate the content from the API via AJAX. Since I don't want to implement CORS for the API yet and would like to follow the same-origin policy I want that both, the API and the files on S3 (the bucket), are sharing the same domain in some way. I also don't want to the Django's flatpages app or render the index.html through Django at all.

I scanned Google and stackoverflow, but couldn't find a adequate solution so far. As far as I read the naive way (pointing domain to the Heroku app and the S3 bucket somehow) is not possible. Some solutions I have in mind but didn't find sources to:

• if possible pointing the domain name to the API on Heroku and the S3 bucket
• passing some options to Heroku to render html which is hosted on S3 (ProcFile?), using Django and libraries for S3 to get the other static assets
• maybe doing something with boto to achieve this
• other completely different suggestions?

Did anybody tried something like this before and can point me in the right direction?

One addition: Later on I want to use something lile PhantomJS to make the single-page app crawlable. This output for crawlers should ideally be hosted in the S3 storage as well.

Answer 1

That is not possible with your current stack.

Your Heroku application and your S3 bucket are actually served through two different domains. The benefit of having two different domains is that you can offload your server from all static assets requests.

A convoluted way to achieve what you want would be to appropriately proxy the requests through one unique domain. Luckily for you neither Heroku nor Amazon will let you do that:

• Nginx could proxy a static folder to your-api.herokuapp.com but you cannot configure nginx on Heroku, that would defeat the purpose of using a PaaS in the first place.

• S3 can host your website and redirect an api folder to your-api.herokuapp.com but only with 301 redirects that don't solve CORS issues. Just tried it if you're curious:

  <RoutingRules>
    <RoutingRule>
      <Condition>
        <KeyPrefixEquals>api/</KeyPrefixEquals>
      </Condition>
      <Redirect>
        <HostName>your-api.herokuapp.com</HostName>
      </Redirect>
    </RoutingRule>
  </RoutingRules>
  

At that point the easy solution is to implement a Django middleware for cross-domain sharing.