fix: #272 Fix webpack dev server config

client/config-overrides.js

@@ -4,21 +4,21 @@ const path = require('path');
 const BASE_URL_PLACEHOLDER = 'BASE_URL_PLACEHOLDER';
 
 const replaceInFile = (file, search, replace) => {
-  fs.readFile(file, 'utf8', (err, data) => {
-    if (err) {
-      throw new Error(`${err}`);
+  fs.readFile(file, 'utf8', (readError, data) => {
+    if (readError) {
+      throw new Error(`${readError}`);
     }
     const res = data.replaceAll(search, replace);
-    fs.writeFile(file, res, 'utf8', (err) => {
-      if (err) {
-        throw new Error(`${err}`);
+    fs.writeFile(file, res, 'utf8', (writeError) => {
+      if (writeError) {
+        throw new Error(`${writeError}`);
       }
     });
   });
 };
 
 const replaceBaseUrl = (compiler) => {
-  compiler.hooks.assetEmitted.tap("Test", (file, info) => {
+  compiler.hooks.assetEmitted.tap('ReplaceBaseUrlPlaceholder', (file, info) => {
     if (info.content.indexOf(BASE_URL_PLACEHOLDER) >= 0) {
       if (/\.css$/.exec(info.targetPath)) {
         // For CSS 'url(...)' import we can use relative import
@@ -26,6 +26,7 @@ const replaceBaseUrl = (compiler) => {
         replaceInFile(info.targetPath, BASE_URL_PLACEHOLDER, `${relPath}/`);
       } else if (/\.js$/.exec(info.targetPath)) {
         // For JS 'import ... from "some-asset"' we can get the variable injected in the window object
+        // eslint-disable-next-line no-template-curly-in-string
         replaceInFile(info.targetPath, `"${BASE_URL_PLACEHOLDER}"`, '`${window.BASE_URL}/`');
       } else if (/index\.html$/.exec(info.targetPath)) {
         // For the main html file, we set a placeholder for sails to inject the correct value as runtime
@@ -36,12 +37,20 @@ const replaceBaseUrl = (compiler) => {
 };
 
 module.exports = function override(config, env) {
-  config.plugins.forEach(plugin => {
-    if (plugin.constructor.name === 'InterpolateHtmlPlugin') {
-      plugin.replacements.PUBLIC_URL = BASE_URL_PLACEHOLDER;
-    }
-  });
-  config.plugins.push({ apply: replaceBaseUrl });
-  config.output.publicPath = BASE_URL_PLACEHOLDER;
+  if (env === 'production') {
+    const plugins = config.plugins.map((plugin) => {
+      if (plugin.constructor.name === 'InterpolateHtmlPlugin') {
+        const newPlugin = plugin;
+        newPlugin.replacements.PUBLIC_URL = BASE_URL_PLACEHOLDER;
+        return newPlugin;
+      }
+      return plugin;
+    });
+    return {
+      ...config,
+      output: { ...config.output, publicPath: BASE_URL_PLACEHOLDER },
+      plugins: [...plugins, { apply: replaceBaseUrl }],
+    };
+  }
   return config;
 };

client/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "build": "react-app-rewired build",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext js,jsx src",
+    "lint": "eslint --ext js,jsx src config-overrides.js",
     "start": "react-app-rewired start",
     "test": "react-app-rewired test"
   },

client/src/api/socket.js

@@ -5,7 +5,7 @@ import Config from '../constants/Config';
 
 const io = sailsIOClient(socketIOClient);
 
-io.sails.url = Config.HOST_NAME;
+io.sails.url = Config.SERVER_HOST_NAME;
 io.sails.autoConnect = false;
 io.sails.reconnection = true;
 io.sails.useCORSRouteToGetCookie = false;

client/src/constants/Config.js

@@ -1,11 +1,12 @@
 const { BASE_URL } = window;
-const HOST_NAME = BASE_URL.replace(/^(.*\/\/[^/?#]*).*$/, '$1');
 const BASE_PATH = BASE_URL.replace(/^.*\/\/[^/]*(.*)[^?#]*.*$/, '$1');
 
 const SERVER_BASE_URL =
   process.env.REACT_APP_SERVER_BASE_URL ||
   (process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:1337');
 
+const SERVER_HOST_NAME = SERVER_BASE_URL.replace(/^(.*\/\/[^/?#]*).*$/, '$1');
+
 const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
 const ACCESS_TOKEN_VERSION = '1';
@@ -14,9 +15,9 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;
 
 export default {
-  HOST_NAME,
   BASE_PATH,
   SERVER_BASE_URL,
+  SERVER_HOST_NAME,
   ACCESS_TOKEN_KEY,
   ACCESS_TOKEN_VERSION_KEY,
   ACCESS_TOKEN_VERSION,