How to use i18next with github pages

Question

I developed react application with internationalization using react-i18next library. I have usual config for that (as in the lib's readme):

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    }
  });

  export default i18n;

And my translation files are put to public/locales/de/translation.json (and other than de folders), the same as in docs.

It works in dev mode. I deployed the app to heroku, it also works just fine there. But I need it to work in github pages site and my jsons (translation.json files) are not loaded there and I get these errors (from browser console):

Failed to load http://hereIsMyUsername.github.io/locales/en/translation.json resource: the server responded with a status of 404 ()

After building react app I have the following structure of my build folder:

build
- locales
- static
  - css
  - js
  - media

So generally my app works fine in github pages except it can't load jsons. I read in docs that it because github pages tries to load these jsons from root directory and can't find them there, because they are stored in locales/{lang}/translation.json. So recommended way is to put all json and other files to root. But as I have lots of different translation.json files it's not the way to manage it.

So my question is how to make github pages work with it? Or how to configure my i18n to work for github pages?

adrai adrai · Accepted Answer · 2020-01-11T21:09:13

For gh-pages you need to adapt the loadPath in the backend options: https://github.com/i18next/i18next-xhr-backend/blob/master/README.md#backend-options

Because your gh-pages are served on a sub-path (usually the repo name)

How to use i18next with github pages

1 Answers