feat(webpack-config): add PUBLIC_URL for sets the public URL or path …

…for production environment
pplancq · Dec 9, 2024 · e13e338 · e13e338
1 parent 8ee050e
commit e13e338
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/packages/react-template/.env b/packages/react-template/.env
@@ -37,6 +37,10 @@ ESLINT_CONFIG_TYPE='flat'
 # Default is false
 #DISABLE_SOURCE_MAP=false
 
+# Sets the public URL or path for production environment.
+# Default is 'http://localhost'
+#PUBLIC_URL='http://localhost'
+
 # Sets the prefix for environment variables that will be passed to the frontend.
 # Access environment variables using import.meta.env.FRONT_FOO in the code.
 # Default is FRONT_

diff --git a/packages/webpack-config/README.md b/packages/webpack-config/README.md
@@ -131,15 +131,16 @@ Real system environment variables take precedence over .env files.
 
 ### Default environment variables
 
-| Variable                 | Default  | Description                                                                                                                                                                                                |
-| ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| BROWSER                  | false    | Enables/disables launching the browser when npm start is run.                                                                                                                                              |
-| PORT                     | 3000     | Sets the port for the development web server.                                                                                                                                                              |
-| DISABLE_STYLELINT_PLUGIN | false    | Allows you to deactivate the stylelint plugin                                                                                                                                                              |
-| DISABLE_ESLINT_PLUGIN    | false    | Allows you to deactivate the eslint plugin                                                                                                                                                                 |
-| ESLINT_CONFIG_TYPE       | eslintrc | Specify the type of configuration to use with ESLint.<br/>- 'eslintrc' is the classic configuration format available in most ESLint versions.<br/> - 'flat' is the new format introduced in ESLint 8.21.0. |
-| DISABLE_SOURCE_MAP       | false    | Allows you to deactivate the sourcemap                                                                                                                                                                     |
-| ENV_PREFIX               | FRONT\_  | Sets the prefix for environment variables that will be passed to the frontend.<br/>Access environment variables using import.meta.env.FRONT_FOO in the code.                                               |
+| Variable                 | Default           | Description                                                                                                                                                                                                |
+| ------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| BROWSER                  | false             | Enables/disables launching the browser when npm start is run.                                                                                                                                              |
+| PORT                     | 3000              | Sets the port for the development web server.                                                                                                                                                              |
+| DISABLE_STYLELINT_PLUGIN | false             | Allows you to deactivate the stylelint plugin                                                                                                                                                              |
+| DISABLE_ESLINT_PLUGIN    | false             | Allows you to deactivate the eslint plugin                                                                                                                                                                 |
+| ESLINT_CONFIG_TYPE       | eslintrc          | Specify the type of configuration to use with ESLint.<br/>- 'eslintrc' is the classic configuration format available in most ESLint versions.<br/> - 'flat' is the new format introduced in ESLint 8.21.0. |
+| DISABLE_SOURCE_MAP       | false             | Allows you to deactivate the sourcemap                                                                                                                                                                     |
+| PUBLIC_URL               | http://localhost/ | Sets the public URL or path for production environment.                                                                                                                                                    |
+| ENV_PREFIX               | FRONT\_           | Sets the prefix for environment variables that will be passed to the frontend.<br/>Access environment variables using import.meta.env.FRONT_FOO in the code.                                               |
 
 ### Caution with Environment Variables
 

diff --git a/packages/webpack-config/template/.env b/packages/webpack-config/template/.env
@@ -37,6 +37,10 @@
 # Default is 'eslintrc'
 #ESLINT_CONFIG_TYPE='eslintrc'
 
+# Sets the public URL or path for production environment.
+# Default is 'http://localhost'
+#PUBLIC_URL='http://localhost'
+
 # Sets the prefix for environment variables that will be passed to the frontend.
 # Access environment variables using import.meta.env.FRONT_FOO in the code.
 # Default is FRONT_

diff --git a/packages/webpack-config/webpack/webpack.config.js b/packages/webpack-config/webpack/webpack.config.js
@@ -16,6 +16,9 @@ module.exports = (env, { mode = 'development' }) => {
   const metaEnv = generateMetaEnv(mode, env);
 
   const disableSourceMap = (process.env.DISABLE_SOURCE_MAP ?? 'false') === 'true' ? false : 'source-map';
+  const publicPath = isEnvDevelopment
+    ? '/'
+    : new URL(process.env.PUBLIC_URL ?? packageJson.homepage ?? '/', 'http://localhost').pathname;
 
   return {
     extends: [
@@ -31,7 +34,7 @@ module.exports = (env, { mode = 'development' }) => {
     output: {
       path: paths.build,
       pathinfo: isEnvDevelopment,
-      publicPath: '/',
+      publicPath,
       devtoolModuleFilenameTemplate: isEnvProduction
         ? ({ absoluteResourcePath }) => relative(paths.src, absoluteResourcePath).replace(/\\/g, '/')
         : ({ absoluteResourcePath }) => resolve(absoluteResourcePath).replace(/\\/g, '/'),