Webpack config in dev and prod include copywebpack for static translations.json

Change in i18n to serve the translations from a different path

Author: oruburos

client/i18n.js

@@ -7,7 +7,7 @@ const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
 
 const options = {
-  loadPath: '/translations/{{lng}}/translations.json',
+  loadPath: 'locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
     mode: 'no-cors'
   },

package.json

@@ -154,6 +154,7 @@
     "connect-mongo": "^1.3.2",
     "console-feed": "^2.8.11",
     "cookie-parser": "^1.4.3",
+    "copy-webpack-plugin": "^6.0.3",
     "cors": "^2.8.5",
     "cross-env": "^5.2.1",
     "csslint": "^1.0.5",

server/server.js

@@ -75,11 +75,11 @@ app.use(corsMiddleware);
 app.options('*', corsMiddleware);
 
 // Body parser, cookie parser, sessions, serve public assets
-
+app.use('/translations', Express.static('translations/locales/'));
 app.use(Express.static(path.resolve(__dirname, '../dist/static'), {
   maxAge: process.env.STATIC_MAX_AGE || (process.env.NODE_ENV === 'production' ? '1d' : '0')
 }));
-app.use('/translations', Express.static('translations/locales/'));
+
 app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
 app.use(bodyParser.json({ limit: '50mb' }));
 app.use(cookieParser());

webpack/config.dev.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 if (process.env.NODE_ENV === 'development') {
   require('dotenv').config();
@@ -40,7 +41,13 @@ module.exports = {
       'process.env': {
         NODE_ENV: JSON.stringify('development')
       }
-    })
+    }),
+    new CopyWebpackPlugin({
+        patterns: [
+          {from: path.resolve(__dirname, '../translations/locales') , to: path.resolve(__dirname, 'locales')}
+        ]
+      }
+    )
   ],
   module: {
     rules: [

webpack/config.prod.js

@@ -8,6 +8,7 @@ const cssnext = require('postcss-cssnext');
 const postcssFocus = require('postcss-focus');
 const postcssReporter = require('postcss-reporter');
 const cssnano = require('cssnano');
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 if (process.env.NODE_ENV === "development") {
   require('dotenv').config();
 }
@@ -144,7 +145,13 @@ module.exports = [{
     }),
     new MiniCssExtractPlugin({
       filename: 'app.[hash].css',
-    })
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {from: path.resolve(__dirname, '../translations/locales') , to: path.resolve(__dirname, '../dist/static/locales')}
+      ]
+      }
+    )
   ]
 },
 {