working i18n when packaged, tried on macos only

app/components/Home.tsx

@@ -9,13 +9,15 @@ import styles from './Home.css';
 
 export default function Home(): JSX.Element {
   const [signalingServerPort, setSignalingServerPort] = useState('0000');
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
+  // const { t, i18n } = useTranslation();
 
   // Example of how to get signaling server port from main process in renderer process
   // following this practice, you can also get local server ip address
   useEffect(() => {
-    ipcRenderer.on('sending-port-from-main', (event, message) => {
+    ipcRenderer.on('sending-port-from-main', (_, message) => {
-      setSignalingServerPort(message);
+      // ipcRenderer.on('sending-port-from-main', (event, message) => {
+      setSignalingServerPort(`${message}`);
     });
     ipcRenderer.invoke('get-signaling-server-port');
   }, []);

app/configs/i18next.config.client.ts

@@ -1,10 +1,13 @@
+import { remote } from 'electron';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import SyncBackend from 'i18next-sync-fs-backend';
+import SyncBackend from 'i18next-node-fs-backend';
 import { join } from 'path';
 import isDev from 'electron-is-dev';
 import config from './app.config';
 
+const appPath = remote.getGlobal('appPath');
+
 const i18nextOptions = {
   interpolation: {
     escapeValue: false,
@@ -13,11 +16,11 @@ const i18nextOptions = {
     // path where resources get loaded from
     loadPath: isDev
       ? join(__dirname, './locales/{{lng}}/{{ns}}.json')
-      : 'locales/{{lng}}/{{ns}}.json',
+      : join(appPath, 'locales/{{lng}}/{{ns}}.json'),
     // path to post missing resources
     addPath: isDev
       ? join(__dirname, './locales/{{lng}}/{{ns}}.missing.json')
-      : 'locales/{{lng}}/{{ns}}.json',
+      : join(appPath, 'locales/{{lng}}/{{ns}}.json'),
     // jsonIndent to use when storing json files
     jsonIndent: 2,
   },
@@ -32,7 +35,6 @@ const i18nextOptions = {
 i18n.use(SyncBackend);
 i18n.use(initReactI18next);
 
-// initialize if not already initialized
 if (!i18n.isInitialized) {
   i18n.init(i18nextOptions);
 }

app/configs/i18next.config.ts

@@ -18,11 +18,11 @@ const i18nextOptions = {
     // path where resources get loaded from
     loadPath: isDev
       ? join(__dirname, '../locales/{{lng}}/{{ns}}.json')
-      : 'locales/{{lng}}/{{ns}}.json',
+      : join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
     // path to post missing resources
     addPath: isDev
       ? join(__dirname, '../locales/{{lng}}/{{ns}}.missing.json')
-      : 'locales/{{lng}}/{{ns}}.json',
+      : join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
     // jsonIndent to use when storing json files
     jsonIndent: 2,
   },
@@ -36,23 +36,9 @@ const i18nextOptions = {
   },
 };
 i18n.use(i18nextBackend);
-// initialize if not already initialized
+
 if (!i18n.isInitialized) {
   i18n.init(i18nextOptions);
-  // i18n.init({
-  //   lng: 'en',
-  //   debug: true,
-  //   resources: {
-  //     en: {
-  //       translation: {
-  //         Language: 'Jjdjjdjd',
-  //       },
-  //     },
-  //   },
-  // });
-  console.log('\n\n\n\n INTITIALIZING I18N ----');
 }
 
-console.log(i18n.t('Language'));
-
 export default i18n;

app/main.dev.ts

@@ -11,7 +11,7 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import path from 'path';
-import { app, BrowserWindow, ipcMain, Menu } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import config from './configs/app.config';
@@ -19,10 +19,10 @@ import i18n from './configs/i18next.config';
 import signalingServer from './server/signalingServer';
 import MenuBuilder from './menu';
 
-signalingServer.start();
+const globalAny: any = global;
+globalAny.appPath = __dirname;
 
-console.log('\n\n\n\n\n APP PATH');
+signalingServer.start();
-console.log(app.getPath('app/locales'));
 
 export default class AppUpdater {
   constructor() {
@@ -104,12 +104,14 @@ const createWindow = async () => {
   menuBuilder = new MenuBuilder(mainWindow, i18n);
   menuBuilder.buildMenu();
 
-  i18n.on('loaded', (loaded) => {
+  // i18n.on('loaded', (loaded) => {
+  i18n.on('loaded', () => {
     i18n.changeLanguage('en');
     i18n.off('loaded');
   });
 
   i18n.on('languageChanged', (lng) => {
+    if (mainWindow === null) return;
     menuBuilder = new MenuBuilder(mainWindow, i18n);
     menuBuilder.buildMenu();
     console.log(`Language changed! ${lng}`);
@@ -145,18 +147,15 @@ app.on('activate', () => {
   if (mainWindow === null) createWindow();
 });
 
-// TODO: get locale of app and load appropriate menu texts and app texts( ISO 3166 COUNTRY CODES )
-console.log('\n\n\n\n\n\n GETTING OS LOCALE: ');
-console.log(app.getLocale());
-
 ipcMain.handle('get-signaling-server-port', () => {
-  console.log('printing port');
+  if (mainWindow === null) return;
-  console.log(signalingServer.port);
   mainWindow.webContents.send('sending-port-from-main', signalingServer.port);
 });
 
-ipcMain.on('get-initial-translations', (event, arg) => {
+// ipcMain.on('get-initial-translations', (event, arg) => {
-  i18n.loadLanguages('en', (err, t) => {
+ipcMain.on('get-initial-translations', (event, _) => {
+  // i18n.loadLanguages('en', (err, t) => {
+  i18n.loadLanguages('en', () => {
     const initial = {
       en: {
         translation: i18n.getResourceBundle('en', config.namespace),

app/menu.ts

@@ -144,6 +144,14 @@ export default class MenuBuilder {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
           },
         },
+        // TODO: remove this toggle dev menu in production!!!!!!!
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: 'Alt+Command+I',
+          click: () => {
+            this.mainWindow.webContents.toggleDevTools();
+          },
+        },
       ],
     };
     const subMenuWindow: DarwinMenuItemConstructorOptions = {
@@ -210,12 +218,9 @@ export default class MenuBuilder {
 
     const languageMenu: MenuItemConstructorOptions = {
       label: this.i18n.t('Language'),
-      submenu: languageSubmenu,
+      submenu: languageSubmenu as MenuItemConstructorOptions[],
     };
 
-    console.log('\n\n\n\n\nprinting stufff!!!!!');
-    console.log(this.i18n.t('Language'));
-
     return [
       subMenuAbout,
       subMenuEdit,

package.json

@@ -61,7 +61,8 @@
       "app.html",
       "main.prod.js",
       "main.prod.js.map",
-      "package.json"
+      "package.json",
+      "locales/"
     ],
     "dmg": {
       "contents": [

tsconfig.json

@@ -8,6 +8,7 @@
     "noEmit": true,
     "jsx": "react",
     "strict": true,
+    // "strictNullChecks": false,
     "pretty": true,
     "sourceMap": true,
     /* Additional Checks */