i18next-electron-fs-backend

This is an i18next library designed to work with secure-electron-template. The library is a rough copy of i18next-node-fs-backend but using IPC (inter-process-communication) to request a file be read or written from the electron's main process. The translation files that are written are written synchronously, but this should not be a problem because you should be creating translation files in development only (translation files should already exist before deploying to production environments).

How to install

Install the package

npm i i18next-electron-fs-backend

Add into your i18next config

Based on documentation for a i18next config, import the backend.

1import i18n from "i18next";
2import {
3  initReactI18next
4} from "react-i18next";
5import backend from "i18next-electron-fs-backend";
6
7i18n
8  .use(backend)
9  .use(initReactI18next)
10  .init({
11    backend: {
12      loadPath: "./app/localization/locales/{{lng}}/{{ns}}.json",
13      addPath: "./app/localization/locales/{{lng}}/{{ns}}.missing.json",
14      contextBridgeApiKey: "api" // needs to match first parameter of contextBridge.exposeInMainWorld in preload file; defaults to "api"
15    },
16
17    // other options you might configure
18    debug: true,
19    saveMissing: true,
20    saveMissingTo: "current",
21    lng: "en"
22  });
23
24export default i18n;

Update your preload.js script

1const {
2    contextBridge,
3    ipcRenderer
4} = require("electron");
5const backend = require("i18next-electron-fs-backend");
6
7contextBridge.exposeInMainWorld(
8    "api", {
9        i18nextElectronBackend: backend.preloadBindings(ipcRenderer, process)
10    }
11);

Update your main.js script

1const {
2  app,
3  BrowserWindow,
4  session,
5  ipcMain
6} = require("electron");
7const backend = require("i18next-electron-fs-backend");
8const fs = require("fs");
9
10let win;
11
12async function createWindow() {  
13  win = new BrowserWindow({
14    width: 800,
15    height: 600,
16    webPreferences: {
17      contextIsolation: true,
18      preload: path.join(__dirname, "preload.js")
19    }
20  });
21
22  backend.mainBindings(ipcMain, win, fs); // <- configures the backend
23  
24  // ...
25}
26
27app.on("ready", createWindow);
28
29app.on("window-all-closed", () => {
30  // On macOS it is common for applications and their menu bar
31  // to stay active until the user quits explicitly with Cmd + Q
32  if (process.platform !== "darwin") {
33    app.quit();
34  } else {
35    i18nextBackend.clearMainBindings(ipcMain);
36  }
37});

Options

These are options that are configurable, all values below are defaults.

1{
2    debug: false, // If you'd like to show diagnostic messages
3    loadPath: "/locales/{{lng}}/{{ns}}.json", // Where the translation files get loaded from
4    addPath: "/locales/{{lng}}/{{ns}}.missing.json" // Where the missing translation files get generated    
5}