improve code config

- use @svgr version 6
- use constants env
- mock route for testing
- edit setting files loader and copy plugin

Author: thaind97git

config/env.js

@@ -30,7 +30,7 @@ const dotenvFiles = [
   // since normally you expect tests to produce the same
   // results for everyone
   // NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
+  `${paths.dotenv}`,
   // paths.dotenv,
 ].filter(Boolean);
 

config/jest/routeMock.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('../paths');
+
+const { appSrc } = path;
+const featuresDir = `${appSrc}/features`;
+
+const routeFileName = 'route.ts';
+
+const RouteModules = [];
+function readFolder(dir) {
+  const files = fs.readdirSync(dir);
+  files.forEach(file => {
+    const filePath = `${dir}/${file}`;
+    const stat = fs.statSync(filePath);
+    if (stat.isDirectory()) {
+      readFolder(filePath);
+    } else {
+      if (file === routeFileName) {
+        const route = require(filePath);
+        RouteModules.push(route);
+      }
+    }
+  });
+}
+
+readFolder(featuresDir);
+
+const appRoutes = RouteModules.reduce((prev, module) => {
+  prev.push(...module.default);
+  return prev;
+}, []);
+
+module.exports = appRoutes;

package.json

@@ -41,7 +41,7 @@
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.9",
     "@babel/preset-react": "^7.12.13",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^12.0.0",
     "@types/enzyme": "^3.10.9",

src/constants/env.ts

@@ -0,0 +1,7 @@
+const { NODE_ENV, API_SERVER_URL, PORT } = process.env;
+
+export default {
+  NodeEnv: NODE_ENV,
+  ApiServerUrl: API_SERVER_URL,
+  Port: PORT,
+};

src/jest.config.js

@@ -17,6 +17,7 @@ const config = {
     '^.+\\.(css|less|scss)$': '<rootDir>/config/jest/cssMock.js',
     '^@/static/(.*)$': '<rootDir>/public/static/$1',
     '^@/(.*)$': '<rootDir>/src/$1',
+    '^.+\\/features/\\*\\*/route.ts$': '<rootDir>/config/jest/routeMock.js',
   },
 };
 

src/locales/i18n.ts

@@ -1,8 +1,9 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import env from '@/constants/env';
 
 import resources, { langs } from './resources';
-const isProduction = process.env.NODE_ENV === 'production';
+const isProduction = env.NodeEnv === 'production';
 
 i18n.use(initReactI18next).init({
   resources,

src/services/axios-base.ts

@@ -1,10 +1,11 @@
+import env from '@/constants/env';
 import { getHeaders } from '@/utils';
 
 import axios from 'axios';
 // Make an 'instance' of axios
 const instance = axios.create({
   // .. where we make our configurations
-  baseURL: process.env.API_SERVER_URL,
+  baseURL: env.ApiServerUrl,
 });
 
 // Where you would set stuff like your 'Authorization' header, etc ...

webpack/webpack.common.js

@@ -52,6 +52,7 @@ module.exports = {
       },
       {
         test: /\.svg$/,
+        issuer: /\.[jt]sx?$/,
         use: ['@svgr/webpack'],
       },
       {
@@ -69,10 +70,23 @@ module.exports = {
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
+        generator: {
+          filename: 'static/fonts/[hash][ext][query]',
+        },
+      },
+      {
+        test: /\.(png|jpg|jpeg)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/images/[hash][ext][query]',
+        },
       },
       {
-        test: /\.(png|jpg|jpeg|gif)$/i,
+        test: /\.(gif)$/i,
         type: 'asset/resource',
+        generator: {
+          filename: 'static/gifs/[hash][ext][query]',
+        },
       },
     ],
   },

webpack/webpack.prod.js

@@ -13,6 +13,7 @@ const ImageminWebpack = require('image-minimizer-webpack-plugin');
 const paths = require('../config/paths');
 const { appBuild, appPublic, appHtml } = paths;
 
+const imageTypeIgnoreCopy = ['.png', '.jpg', '.jpeg', '.gif', '.svg'];
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 
 module.exports = merge(common, {
@@ -29,6 +30,12 @@ module.exports = merge(common, {
         {
           from: path.resolve(appPublic, 'static'),
           to: path.resolve(appBuild, 'static'),
+          globOptions: {
+            ignore: [
+              ...imageTypeIgnoreCopy.map(ext => `**/images/*/*${ext}`),
+              '**/fonts/**',
+            ],
+          },
           toType: 'dir',
         },
       ],
@@ -67,6 +74,7 @@ module.exports = merge(common, {
     filename: 'static/js/[name].[chunkhash].js',
     // There are also additional JS chunk files if you use code splitting.
     chunkFilename: 'static/js/[name].[chunkhash].chunk.js',
+    clean: true,
   },
   optimization: {
     nodeEnv: 'production',