Merge pull request #531 from justinlampley/Add-LocalesAsStaticFiles

Fetch locales through http requests to the backend server

package.json

@@ -144,7 +144,11 @@
     },
     "extraResources": [
       "./assets/**",
-      "./devices/**"
+      "./devices/**",
+      {
+        "from": "./src/i18n",
+        "to": "i18n"
+      }
     ],
     "publish": {
       "provider": "github",

src/api/index.ts

@@ -180,6 +180,8 @@ export default class ApiServer {
     await this.buildContainer(config, logger);
     this.app = express();
 
+    this.app.use('/locales', express.static(config.localesPath));
+
     this.httpServer = createServer(this.app);
     /*
           I know, crazy. It is 45 minutes, but on slower network connection it might take a while to download

src/api/src/config/index.ts

@@ -18,6 +18,7 @@ export interface IConfig {
   targetsStoragePath: string;
   userDefinesStoragePath: string;
   userDataPath: string;
+  localesPath: string;
 }
 
 export const ConfigToken = new Token<IConfig>('CONFIG_TOKEN');

src/i18n/index.ts

@@ -3,14 +3,19 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector'; // For auto-detecting language
 import Backend from 'i18next-http-backend'; // For loading translations from backend
 
+const searchParams = new URLSearchParams(window.location.search.slice(1));
+const loadPath = `${
+  searchParams.get('base_url') ?? 'http://localhost:3500/'
+}/locales/{{lng}}/translation.json`;
+
 i18n
   .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     fallbackLng: 'en',
     backend: {
-      loadPath: './i18n/locales/{{lng}}/messages.json',
+      loadPath,
     },
     debug:
       process.env.NODE_ENV === 'development' ||

src/main.dev.ts

@@ -308,6 +308,12 @@ const createWindow = async () => {
     ? path.join(process.resourcesPath, 'devices')
     : path.join(__dirname, '../devices');
 
+  const localesPath = app.isPackaged
+    ? path.join(process.resourcesPath, 'i18n')
+    : path.join(__dirname, 'i18n');
+
+  logger.log('localesPath', { localesPath });
+
   logger.log('local api server PATH', {
     PATH,
   });
@@ -332,6 +338,7 @@ const createWindow = async () => {
       targetsStoragePath,
       userDefinesStoragePath,
       userDataPath: app.getPath('userData'),
+      localesPath,
     },
     logger,
     port
@@ -364,10 +371,11 @@ const createWindow = async () => {
     }
   });
 
-  const apiUrl = `http://localhost:${port}/graphql`;
+  const baseUrl = `http://localhost:${port}`;
+  const apiUrl = `${baseUrl}/graphql`;
   const subscriptionsUrl = `ws://localhost:${port}/graphql`;
   mainWindow.loadURL(
-    `file://${__dirname}/index.html?api_url=${apiUrl}&subscriptions_url=${subscriptionsUrl}`
+    `file://${__dirname}/index.html?base_url=${baseUrl}&api_url=${apiUrl}&subscriptions_url=${subscriptionsUrl}`
   );
 
   // TODO: Use 'ready-to-show' event