How to use the react-scripts/config/paths.servedPath function in react-scripts

const paths = require('react-scripts/config/paths');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const baseConfig = require('./overrides-config.base');

// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
const cssFilename = 'static/css/[name].[contenthash:8].css';
const extractTextPluginOptions = shouldUseRelativeAssetPaths
  ? // Making sure that the publicPath goes back to to build folder.
    { publicPath: Array(cssFilename.split('/').length).join('../') }
  : {};

module.exports = function(config) {
  // Define the root path alias
  let alias = config.resolve.alias;
  alias["@"] = baseConfig.rootPath;

  // Use your ESLint 
  /*let eslintLoader = config.module.rules[0];

process.env.NODE_ENV = "production";
process.env.BABEL_ENV = "production";

require("react-scripts/config/env");

const fs = require("fs-extra");
const path = require("path");
const paths = require("react-scripts/config/paths");

paths.appBuild = path.join(__dirname, "../ui_build");
paths.servedPath = "./";

const webpack = require("webpack");
const config = require("react-scripts/config/webpack.config.js")("production");

// removes react-dev-utils/webpackHotDevClient.js at first in the array
// config.entry.shift();

const webpackConfigured = webpack(config);

function callback(err, stats) {
  if (err) {
    // eslint-disable-next-line no-console
    console.error(err);
  } else {
    copyPublicFolder();
  }

export const addLessLoader = (loaderOptions = {}) => config => {
  const mode = process.env.NODE_ENV === "development" ? "dev" : "prod";

  // Need these for production mode, which are copied from react-scripts
  const publicPath = require("react-scripts/config/paths").servedPath;
  const shouldUseRelativeAssetPaths = publicPath === "./";
  const shouldUseSourceMap =
    mode === "prod" && process.env.GENERATE_SOURCEMAP !== "false";
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  const localIdentName =
    loaderOptions.localIdentName || "[path][name]__[local]--[hash:base64:5]";

  const getLessLoader = cssOptions => {
    return [
      mode === "dev"
        ? require.resolve("style-loader")
        : {
            loader: require("mini-css-extract-plugin").loader,
            options: Object.assign(
              {},

/* eslint-disable */
const {
  override,
  fixBabelImports,
  addLessLoader,
  // addBundleVisualizer ,
} = require('customize-cra');
const paths = require('react-scripts/config/paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

paths.appIndexJs = `${paths.appSrc}/pages/index.js`;
// paths.appLoginJs = `${paths.appSrc}/pages/login.js`;
paths.servedPath = './';

const getEntryConfig = env => {
  const arr = 'development' === env ? [require.resolve('react-dev-utils/webpackHotDevClient')] : [];
  return entry => {
    return [...arr, `${paths.appSrc}/pages/${entry}.js`];
  };
};

const removePlugin = (plugins, name) => {
  const list = plugins.filter(it => !(it.constructor && it.constructor.name && name === it.constructor.name));
  if (list.length === plugins.length) {
    throw new Error(`Can not found plugin: ${name}.`);
  }
  return list;
};

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const paths = require('react-scripts/config/paths');
const getClientEnvironment = require('react-scripts/config/env');

// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
const publicPath = paths.servedPath;
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = publicPath.slice(0, -1);
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);

// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
  throw new Error('Production builds must have NODE_ENV=production.');

return ensureSlash(servedUrl, true)
}

paths.dotenv = existsSync(appDotEnv) ? appDotEnv : paths.dotenv
paths.appPath = appRootPath + '/'
paths.appPublic = appPublic
paths.appHtml = appPublic + '/index.html'
paths.appBuild = appBuild
paths.appPackageJson = appPackage
paths.yarnLockFile = appRootPath + '/yarn.lock'
paths.appSrc = appSrc
paths.appIndexJs = appSrc + '/index.js'
paths.proxySetup = appSrc + '/setupProxy.js'
paths.testsSetup = appSrc + '/setupTests'
paths.appNodeModules = appNodeModules
paths.servedPath = homepage ? getServedPath(homepage) : '/'
paths.publicUrl = homepage || ''

module.exports = paths