I have an instance of i18next running as it should if I include the translations inside the init:

i18next.use(httpAPI).init({
    lng: language,
    resources: {
      en: {
        translation: {
          "html1": "foo! ",
          "html2":"bar",
        }
      },
      de: {
        translation: {
          "html1": "de-foo",
          "html2":"de-bar",
    
        }
      }
  }
})

However, I expect to be expanding my translations, and placing them in the init would become unwieldy. So I would like to split them into multiple files. I have read about using i18next.http-backend. So when I re-write my init to include the backend my init looks like this:

i18next.use(httpAPI).init({
    lng: language,
    backend:{ loadPath: '/locales/de-DE/translate.json'}
})

the translate.json file looks like this:

{"translation": {
  "html1": "backend-de-foo",
  "html2": "backend-de-bar",
}}

My main script where I am calling the i18next is in the parent directory along with my locale folder.

It does not appear to be reading from the backend loadpath, as I am not getting any translations from it. Am I missing something from i18next or is my translate file not structured properly?