i18n translations files not packed

When try to pack solution with npm run dist-windows inside folder: dist/win-unpacked not exsist folder: app/localization/locales with subfolder and file translation but if I open application (selected english language for example) and show page that present a traslation string, file: dist/win-unpacked/app/localization/locales/en/translation.missing.json has been created with key and value.

Which best way to include app/localization/locales folder inside dist/win-unpacked (for example in windows build)?

[reZach]

Thanks @pczyzyk and @dotexe0. This new release has these values in the template now, thanks for making this template better for all who use it. I tested this both in dev mode and after packaging the app in Windows & Mac and both changed the language (header/page) successfully.

i18n.config.js

const i18n = require("i18next").default;
const reactI18Next = require("react-i18next");
const i18nBackend = require("i18next-electron-fs-backend").default;
const whitelist = require("./whitelist");

// On Mac, the folder for resources isn't
// in the same directory as Linux/Windows;
// https://www.electron.build/configuration/contents#extrafiles
const isMac = window.api.i18nextElectronBackend.clientOptions.platform === "darwin";
const isDev = window.api.i18nextElectronBackend.clientOptions.environment === "development";
const prependPath = isMac && !isDev ? window.api.i18nextElectronBackend.clientOptions.resourcesPath : ".";

i18n
  .use(i18nBackend)
  .use(reactI18Next.initReactI18next)
  .init({
    backend: {
      loadPath: prependPath + "/app/localization/locales/{{lng}}/{{ns}}.json",
      addPath: prependPath + "/app/localization/locales/{{lng}}/{{ns}}.missing.json",
      ipcRenderer: window.api.i18nextElectronBackend
    },
    debug: false,
    namespace: "translation",
    saveMissing: true,
    saveMissingTo: "current",
    lng: "en",
    fallbackLng: false, // set to false when generating translation files locally
    whitelist: whitelist.langs
  });

window.api.i18nextElectronBackend.onLanguageChange((args) => {
  i18n.changeLanguage(args.lng, (error, t) => {
    if (error) {
      console.error(error);
    }
  });
});

module.exports = i18n;

preload.js

const { contextBridge, ipcRenderer } = require("electron");
const i18nextBackend = require("i18next-electron-fs-backend");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld("api", {
  i18nextElectronBackend: i18nextBackend.preloadBindings(ipcRenderer, process),
});

[pczyzyk]

@dotexe0 's solution is fine, but I needed to use some more platform specific paths all over the app, so I used electron-cfg module and set three parameters in main.js:

const cfg = require('electron-cfg')
async function createWindow() {
(...)
  cfg.file('app.json')
  cfg.set('appPath', app.getAppPath().replace('/Resources/app.asar', ''))
  cfg.set('appExecPath', process.execPath)
  cfg.set('appExtraFilesPath', path.join(process.resourcesPath, '..'))
(...)
}

Then I’m setting a window.api.app variable in preload.js like this:

const appCfg = JSON.parse(fs.readFileSync(pathApp, 'utf8'))
contextBridge.exposeInMainWorld('api', {
  i18nextElectronBackend: i18nextBackend.preloadBindings(ipcRenderer),
  store: store.preloadBindings(ipcRenderer, fs),
  contextMenu: ContextMenu.preloadBindings(ipcRenderer),
  app: appCfg,
  platform: process.platform,
})

I’m not sure if that is the most efficient way to do that, but it enables me to access appPath appExecPath and appExtraFilesPath throughout the app and at the same time dump values to config file.