title: i18n load translations from s3bucket
body: <p>I am using the <code>i18n</code> module in my react app which is hosted as an app (which I will refer to as live app) on <code>S3</code> and has <code>cloudfront</code> sitting in front of it.</p>
  <p>I want to store the s3 url in a config file as to avoid having it hardcoded in my app so that I can work against translation files stored locally in the <code>public/locales</code> folder when I'm developing.</p>
  <p>Initially I had my backend options set-up so that it would always try and look up the files in the <code>locales</code> path. And this worked locally but stopped working on S3 although the locales folder was present in the S3 bucket. I also noticed that no request was being sent from the app to retrieve the translation files.</p>
  <pre><code>backend: {
      loadPath: 'locales'
    }
  </code></pre>
  <p>I then decided to upload the translation files to another S3 bucket and host them there to see if this would fix the issue.
  I changed my config to hardcode the s3 bucket path. This worked both locally and on the live app. But this means that I can't use my config file to determine the loadPath option.</p>
  <pre><code> backend: {
      loadPath: '&lt;myhardcoded-s3-bucket-url&gt;/{{lng}}/translation.json',
      crossDomain: true
    }
  </code></pre>
  <p>I then thought I could construct the url in place as so:</p>
  <pre><code>/*global AWS_CONFIG */
  /*eslint no-undef: &quot;error&quot;*/
  ...
  ...
  ...
  backend: {
      loadPath: `${AWS_CONFIG.aws_app_translations_path}/{{lng}}/translation.json`,
      crossDomain: true
    }
  </code></pre>
  <p>Strangely again this worked locally when <code>AWS_CONFIG.aws_app_translations_path</code> was both <code>http://localhost:3000/locales</code> and <code>&lt;myhardcoded-s3-bucket-url&gt;</code>.
  However once I pushed it live, it failed again. This time making a request to <code>https://&lt;my-apps-base-path&gt;/undefined/en-GB/translation.json</code> for example. So it's trying to use the app path and append what I have defined in <code>loadPath</code>.</p>
  <p>I then saw that I could have <code>loadPath</code> as a function to construct my url. This didn't work for the live app either, but again worked locally.</p>
  <pre><code>backend: {
      loadPath: function (lng) {
        return `${AWS_CONFIG.aws_app_translations_path}/${lng}/translation.json`
      },
      crossDomain: true
    }
  </code></pre>
  <p>This is my entire <code>i18n</code> file</p>
  <pre><code>/*global AWS_CONFIG */
  /*eslint no-undef: &quot;error&quot;*/
  import i18n from &quot;i18next&quot;;
  import LanguageDetector from &quot;i18next-browser-languagedetector&quot;;
  import Backend from &quot;i18next-http-backend&quot;;
  import { initReactI18next } from &quot;react-i18next&quot;;
  
  
  const options = {
    order: ['navigator', 'localStorage'],
    caches: ['localStorage'],
    fallbackLng: &quot;en-GB&quot;,
    debug: true,
    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    },
    backend: {
      loadPath: function (lng) {
        return `${AWS_CONFIG.aws_app_translations_path}/${lng}/translation.json`
      },
      crossDomain: true
    }
  }
  
  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(options);
  
  export default i18n;
  </code></pre>
  <p>What could explain this odd behaviour? Am I missing configuration here?</p>