chore(config): harmonize configuration options (#5166)

* chore(config): harmonize configuration options * move prefix back
2025-03-28 20:43:09 +01:00
parent 00c6afe869
commit 2bcd3ca5b6
12 changed files with 235 additions and 137 deletions
--- a/.changeset/nasty-experts-bow.md
+++ b/.changeset/nasty-experts-bow.md
@@ -0,0 +1,8 @@
+---
+'@verdaccio/server': patch
+'@verdaccio/types': patch
+'@verdaccio/middleware': patch
+'@verdaccio/ui-components': patch
+---
+
+chore(config): harmonize configuration options
--- a/packages/config/src/conf/default.yaml
+++ b/packages/config/src/conf/default.yaml
@@ -4,34 +4,38 @@
 # improve security.
 #
 # Look here for more config file examples:
-# https://github.com/verdaccio/verdaccio/tree/5.x/packages/config/src/conf/default.yaml
+# https://github.com/verdaccio/verdaccio/blob/master/docker-examples/README.md
 #
 # Read about the best practices
 # https://verdaccio.org/docs/best

-# path to a directory with all packages
+# Path to a directory with all packages
 storage: ./storage
-# path to a directory with plugins to include, the plugins folder has the higher priority for loading plugins
-# disable this folder to avoid warnings if is not used
+
+# Path to a directory with plugins to include, the plugins folder has the higher priority for loading plugins
+# Disable this folder to avoid warnings if is not used
 # plugins: ./plugins

+# Web UI settings
 # https://verdaccio.org/docs/webui
 web:
  title: Verdaccio
-  # custom colors for header background and font
+  # Disable complete web UI
+  # enabled: false
+  # Custom colors for header background and font
  # primaryColor: "#4b5e40"
-  # custom logos and favicon
+  # Custom logos and favicon
  # logo: ./path/to/logo.png
  # logoDark: ./path/to/logoDark.png
  # favicon: ./path/to/favicon.ico
-  # comment out to disable gravatar support
+  # Disable gravatar support
  # gravatar: false
-  # by default packages are ordercer ascendant (asc|desc)
-  # sort_packages: asc
-  # convert your UI to the dark side
+  # By default, packages are ordered ascending
+  # sort_packages: asc | desc
+  # Convert your UI to the dark side
  # darkMode: true
  # html_cache: true
-  # by default all features are displayed
+  # By default, all features are displayed
  # login: true
  # showInfo: true
  # showSettings: true
@@ -42,20 +46,25 @@ web:
  # showRaw: true
  # showDownloadTarball: true
  # showUplinks: true
-  #  HTML tags injected after manifest <scripts/>
+  #
+  # HTML tags injected before ends </head>
+  # metaScripts:
+  #   - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
+  #   - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
+  #   - '<meta name="robots" content="noindex">'
+  #
+  # HTML tags injected as first child in <body>
+  # scriptsBodyBefore:
+  #   - '<div id="myId">html before webpack scripts</div>'
+  #
+  # HTML tags injected as last child in </body>
  # scriptsBodyAfter:
-  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
-  #  HTML tags injected before ends </head>
-  #  metaScripts:
-  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
-  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
-  #    - '<meta name="robots" content="noindex" />'
-  #  HTML tags injected first child at <body/>
-  #  bodyBefore:
-  #    - '<div id="myId">html before webpack scripts</div>'
-  #  Public path for template manifest scripts (only manifest)
-  #  publicPath: http://somedomain.org/
+  #   - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
+  #
+  # Public path for template manifest scripts (only manifest)
+  # publicPath: http://somedomain.org/

+# Settings for authentication plugin
 # https://verdaccio.org/docs/configuration#authentication
 auth:
  htpasswd:
@@ -64,8 +73,8 @@ auth:
    # You can set this to -1 to disable registration.
    # max_users: 1000

+# A list of other known repositories we can talk to
 # https://verdaccio.org/docs/configuration#uplinks
-# a list of other known repositories we can talk to
 uplinks:
  npmjs:
    url: https://registry.npmjs.org/
@@ -97,7 +106,7 @@ packages:
    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

-# To improve your security configuration and  avoid dependency confusion
+# To improve your security configuration and avoid dependency confusion
 # consider removing the proxy property for private packages
 # https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages

@@ -107,14 +116,14 @@ packages:
 # WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
 server:
  keepAliveTimeout: 60
-  # The pluginPrefix replaces the default plugins prefix which is `verdaccio`, please don't include `-`. If `something` is provided
-  # the resolve package will be `something-xxxx`.
+  # The pluginPrefix replaces the default plugins prefix which is `verdaccio`. Please don't include `-`. If `something` is provided
+  # the resolved package will be `something-xxxx`.
  # pluginPrefix: something
  # A regex for the password validation /.{3}$/ (3 characters min)
  # An example to limit to 10 characters minimum
  # passwordValidationRegex: /.{10}$/
  # Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer
-  # See: https://expressjs.com/en/guide/behind-proxies.html
+  # https://expressjs.com/en/guide/behind-proxies.html
  # trustProxy: '127.0.0.1'

 # https://verdaccio.org/docs/configuration#offline-publish
@@ -123,18 +132,24 @@ server:
 #   check_owners: false
 #   keep_readmes: 'latest' | 'tagged' | 'all'

+# Define public URL of registry in combination with VERDACCIO_PUBLIC_URL environment variable
 # https://verdaccio.org/docs/configuration#url-prefix
 # url_prefix: /verdaccio/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+#
+# Examples:
+# VERDACCIO_PUBLIC_URL='https://somedomain.org'
 # url_prefix: '/my_prefix'
 # // url -> https://somedomain.org/my_prefix/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+#
+# VERDACCIO_PUBLIC_URL='https://somedomain.org'
 # url_prefix: '/'
 # // url -> https://somedomain.org/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
+#
+# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix'
 # url_prefix: '/second_prefix'
-# // url -> https://somedomain.org/second_prefix/'
+# // url -> https://somedomain.org/second_prefix/

+# Security settings
 # https://verdaccio.org/docs/configuration#security
 # security:
 #   api:
@@ -160,12 +175,12 @@ server:

 # https://verdaccio.org/docs/configuration#listen-port
 # listen:
-# - localhost:4873            # default value
-# - http://localhost:4873     # same thing
-# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
-# - https://example.org:4873  # if you want to use https
-# - "[::1]:4873"                # ipv6
-# - unix:/tmp/verdaccio.sock    # unix socket
+#   - localhost:4873            # default value
+#   - http://localhost:4873     # same thing
+#   - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
+#   - https://example.org:4873  # if you want to use https
+#   - "[::1]:4873"              # ipv6
+#   - unix:/tmp/verdaccio.sock  # unix socket

 # The HTTPS configuration is useful if you do not consider use a HTTP Proxy
 # https://verdaccio.org/docs/configuration#https
@@ -177,36 +192,46 @@ server:
 # https://verdaccio.org/docs/configuration#proxy
 # http_proxy: http://something.local/
 # https_proxy: https://something.local/
+# no_proxy: localhost,127.0.0.1,server.local

 # https://verdaccio.org/docs/configuration#notifications
 # notify:
-#   method: POST
-#   headers: [{ "Content-Type": "application/json" }]
-#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
+#   method: 'POST'
+#   headers: '[{ "Content-Type": "application/json" }]'
+#   endpoint: 'https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken'
 #   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

+# Settings for middleware plugins
+# https://verdaccio.org/docs/plugins#middleware-configuration
 middlewares:
  audit:
    enabled: true
    # timeout: 10000

+# Log settings
 # https://verdaccio.org/docs/logger
-# log settings
 log: { type: stdout, format: pretty, level: http }
-#experiments:
-#  # support for npm token command
+
+# Feature flags (experimental settings that can be changed or removed in the future)
+# https://verdaccio.org/docs/configuration#experiments
+# experiments:
+#  # Support for npm token command
 #  token: false
-#  # disable writing body size to logs, read more on ticket 1912
-#  bytesin_off: false
-#  # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
+#  # Enable tarball URL redirect for hosting tarball with a different server.
+#  # The tarball_url_redirect can be a template string
 #  tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
-#  # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
+#  # The tarball_url_redirect can be a function, takes packageName and filename and returns the url,
+#  # when working with a js configuration file
 #  tarball_url_redirect(packageName, filename) {
 #    const signedUrl = // generate a signed url
 #    return signedUrl;
 #  }
+# Renamed from "experiments" to "flags" in next major release
+# flags:
+#  changePassword: true
+#  searchRemote: true

-# translate your registry, api i18n not available yet
+# Translate your registry, API and web UI
+# List of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
 i18n:
-  # list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
  web: en-US
--- a/packages/config/src/conf/docker.yaml
+++ b/packages/config/src/conf/docker.yaml
@@ -1,75 +1,80 @@
 #
-# This is the default configuration file. As it allows all users to do anything,
-# please read carefully the documentation and best practices to improve security.
-#
-# Do not configure host and port under `listen` in this file
-# as it will be ignored when using docker.
-# see https://verdaccio.org/docs/en/docker#docker-and-custom-port-configuration
+# This is the default configuration file. It allows all users to do anything,
+# please read carefully the documentation and best practices to
+# improve security.
 #
 # Look here for more config file examples:
-# https://github.com/verdaccio/verdaccio/tree/5.x/packages/config/src/conf/docker.yaml
+# https://github.com/verdaccio/verdaccio/blob/master/docker-examples/README.md
 #
 # Read about the best practices
 # https://verdaccio.org/docs/best

-# path to a directory with all packages
+# Path to a directory with all packages
 storage: /verdaccio/storage/data
-# path to a directory with plugins to include, the plugins folder has the higher priority for loading plugins
-# disable this folder to avoid warnings if is not used
+
+# Path to a directory with plugins to include, the plugins folder has the higher priority for loading plugins
+# Disable this folder to avoid warnings if is not used
 plugins: /verdaccio/plugins

+# Web UI settings
 # https://verdaccio.org/docs/webui
 web:
  title: Verdaccio
-  # custom colors for header background and font
+  # Disable complete web UI
+  # enabled: false
+  # Custom colors for header background and font
  # primaryColor: "#4b5e40"
-  # custom logos and favicon
+  # Custom logos and favicon
  # logo: ./path/to/logo.png
  # logoDark: ./path/to/logoDark.png
  # favicon: ./path/to/favicon.ico
-  # Comment out to disable gravatar support
+  # Disable gravatar support
  # gravatar: false
-  # By default packages are ordered ascendant (asc|desc)
-  # sort_packages: asc
+  # By default, packages are ordered ascending
+  # sort_packages: asc | desc
  # Convert your UI to the dark side
  # darkMode: true
  # html_cache: true
-  # By default all features are displayed
+  # By default, all features are displayed
  # login: true
  # showInfo: true
  # showSettings: true
-  # In combination with darkMode you can force a specific theme
+  # In combination with darkMode you can force specific theme
  # showThemeSwitch: true
  # showFooter: true
  # showSearch: true
  # showRaw: true
  # showDownloadTarball: true
  # showUplinks: true
-  #  HTML tags injected after manifest <scripts/>
+  #
+  # HTML tags injected before ends </head>
+  # metaScripts:
+  #   - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
+  #   - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
+  #   - '<meta name="robots" content="noindex">'
+  #
+  # HTML tags injected as first child in <body>
+  # scriptsBodyBefore:
+  #   - '<div id="myId">html before webpack scripts</div>'
+  #
+  # HTML tags injected as last child in </body>
  # scriptsBodyAfter:
-  #    - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
-  #  HTML tags injected before end </head>
-  #  metaScripts:
-  #    - '<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>'
-  #    - '<script type="text/javascript" src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js"></script>'
-  #    - '<meta name="robots" content="noindex" />'
-  #  HTML tags injected as first child at <body/>
-  #  bodyBefore:
-  #    - '<div id="myId">html before webpack scripts</div>'
-  #  Public path for template manifest scripts (only manifest)
-  #  publicPath: http://somedomain.org/
+  #   - '<script type="text/javascript" src="https://my.company.com/customJS.min.js"></script>'
+  #
+  # Public path for template manifest scripts (only manifest)
+  # publicPath: http://somedomain.org/

+# Settings for authentication plugin
 # https://verdaccio.org/docs/configuration#authentication
-
 auth:
  htpasswd:
    file: /verdaccio/storage/htpasswd
-    # Maximum amount of users allowed to register, defaults to "+infinity".
+    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    # max_users: 1000

-# https://verdaccio.org/docs/configuration#uplinks
 # A list of other known repositories we can talk to
+# https://verdaccio.org/docs/configuration#uplinks
 uplinks:
  npmjs:
    url: https://registry.npmjs.org/
@@ -86,14 +91,14 @@ packages:
    proxy: npmjs

  '**':
-    # Allow all users (including non-authenticated users) to read and
+    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
-    # You can specify usernames/groupnames (depending on your auth plugin)
+    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

-    # Allow all known users to publish/unpublish packages
+    # allow all known users to publish/unpublish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated
@@ -106,21 +111,19 @@ packages:
 # https://verdaccio.org/docs/best#remove-proxy-to-increase-security-at-private-packages

 # https://verdaccio.org/docs/configuration#server
-# You can specify the HTTP/1.1 server keep alive timeout in seconds for incoming connections.
-# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a
-# keep-alive timeout.
-# WORKAROUND: Through given configuration you can work around the following issue:
-# https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
+# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
+# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
+# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
 server:
  keepAliveTimeout: 60
-  # The pluginPrefix replaces the default plugins prefix which is `verdaccio`, please don't include `-`. If `something` is provided
-  # the resolve package will be `something-xxxx`.
+  # The pluginPrefix replaces the default plugins prefix which is `verdaccio`. Please don't include `-`. If `something` is provided
+  # the resolved package will be `something-xxxx`.
  # pluginPrefix: something
  # A regex for the password validation /.{3}$/ (3 characters min)
  # An example to limit to 10 characters minimum
  # passwordValidationRegex: /.{10}$/
  # Allow `req.ip` to resolve properly when Verdaccio is behind a proxy or load-balancer
-  # See: https://expressjs.com/en/guide/behind-proxies.html
+  # https://expressjs.com/en/guide/behind-proxies.html
  # trustProxy: '127.0.0.1'

 # https://verdaccio.org/docs/configuration#offline-publish
@@ -129,18 +132,24 @@ server:
 #   check_owners: false
 #   keep_readmes: 'latest' | 'tagged' | 'all'

+# Define public URL of registry in combination with VERDACCIO_PUBLIC_URL environment variable
 # https://verdaccio.org/docs/configuration#url-prefix
 # url_prefix: /verdaccio/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+#
+# Examples:
+# VERDACCIO_PUBLIC_URL='https://somedomain.org'
 # url_prefix: '/my_prefix'
 # // url -> https://somedomain.org/my_prefix/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org';
+#
+# VERDACCIO_PUBLIC_URL='https://somedomain.org'
 # url_prefix: '/'
 # // url -> https://somedomain.org/
-# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix';
+#
+# VERDACCIO_PUBLIC_URL='https://somedomain.org/first_prefix'
 # url_prefix: '/second_prefix'
-# // url -> https://somedomain.org/second_prefix/'
+# // url -> https://somedomain.org/second_prefix/

+# Security settings
 # https://verdaccio.org/docs/configuration#security
 # security:
 #   api:
@@ -166,14 +175,14 @@ server:

 # https://verdaccio.org/docs/configuration#listen-port
 # listen:
-# - localhost:4873            # default value
-# - http://localhost:4873     # same thing
-# - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
-# - https://example.org:4873  # if you want to use https
-# - "[::1]:4873"                # ipv6
-# - unix:/tmp/verdaccio.sock    # unix socket
+#   - localhost:4873            # default value
+#   - http://localhost:4873     # same thing
+#   - 0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
+#   - https://example.org:4873  # if you want to use https
+#   - "[::1]:4873"              # ipv6
+#   - unix:/tmp/verdaccio.sock  # unix socket

-# The HTTPS configuration is useful if you do not consider using an HTTP Proxy
+# The HTTPS configuration is useful if you do not consider use a HTTP Proxy
 # https://verdaccio.org/docs/configuration#https
 # https:
 #   key: ./path/verdaccio-key.pem
@@ -183,23 +192,29 @@ server:
 # https://verdaccio.org/docs/configuration#proxy
 # http_proxy: http://something.local/
 # https_proxy: https://something.local/
+# no_proxy: localhost,127.0.0.1,server.local

 # https://verdaccio.org/docs/configuration#notifications
 # notify:
-#   method: POST
-#   headers: [{ "Content-Type": "application/json" }]
-#   endpoint: https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken
+#   method: 'POST'
+#   headers: '[{ "Content-Type": "application/json" }]'
+#   endpoint: 'https://usagge.hipchat.com/v2/room/3729485/notification?auth_token=mySecretToken'
 #   content: '{"color":"green","message":"New package published: * {{ name }}*","notify":true,"message_format":"text"}'

+# Settings for middleware plugins
+# https://verdaccio.org/docs/plugins#middleware-configuration
 middlewares:
  audit:
    enabled: true
    # timeout: 10000

+# Log settings
 # https://verdaccio.org/docs/logger
-# log settings
 log: { type: stdout, format: pretty, level: http }
-#experiments:
+
+# Feature flags (experimental settings that can be changed or removed in the future)
+# https://verdaccio.org/docs/configuration#experiments
+# experiments:
 #  # Support for npm token command
 #  token: false
 #  # Enable tarball URL redirect for hosting tarball with a different server.
@@ -211,8 +226,12 @@ log: { type: stdout, format: pretty, level: http }
 #    const signedUrl = // generate a signed url
 #    return signedUrl;
 #  }
+# Renamed from "experiments" to "flags" in next major release
+# flags:
+#  changePassword: true
+#  searchRemote: true

-# Translate your registry, api i18n not available yet
-# i18n:
-# list of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
-#   web: en-US
+# Translate your registry, API and web UI
+# List of the available translations https://github.com/verdaccio/verdaccio/blob/master/packages/plugins/ui-theme/src/i18n/ABOUT_TRANSLATIONS.md
+i18n:
+  web: en-US
--- a/packages/core/types/src/configuration.ts
+++ b/packages/core/types/src/configuration.ts
@@ -77,7 +77,7 @@ export type FlagsConfig = {
  changePassword?: boolean;
 };

-export type PackageManagers = 'pnpm' | 'yarn' | 'npm';
+export type PackageManagers = 'pnpm' | 'yarn' | 'npm' | string;

 // FUTURE: WebConf and TemplateUIOptions should be merged .
 export type CommonWebConf = {
@@ -101,7 +101,7 @@ export type CommonWebConf = {
  showDownloadTarball?: boolean;
  showUplinks?: boolean;
  hideDeprecatedVersions?: boolean;
-  primaryColor: string;
+  primaryColor?: string;
  showRaw?: boolean;
 };

@@ -116,7 +116,7 @@ export type TemplateUIOptions = {
  basename?: string;
  base: string;
  version?: string;
-  flags: FlagsConfig;
+  flags?: FlagsConfig;
 } & CommonWebConf;

 /**
@@ -126,10 +126,14 @@ export type WebConf = {
  // @deprecated use primaryColor
  primary_color?: string;
  primaryColor?: string;
+  // @deprecated use enabled
  enable?: boolean;
+  enabled?: boolean;
  scriptsHead?: string[];
  scriptsBodyAfter?: string[];
+  // @deprecated use scriptsBodyBefore
  scriptsbodyBefore?: string[];
+  scriptsBodyBefore?: string[];
  metaScripts?: string[];
  bodyBefore?: string[];
  bodyAfter?: string[];
--- a/packages/middleware/src/middlewares/web/utils/renderHTML.ts
+++ b/packages/middleware/src/middlewares/web/utils/renderHTML.ts
@@ -80,7 +80,7 @@ export default function renderHTML(
  const {
    scriptsBodyAfter,
    metaScripts,
-    scriptsbodyBefore,
+    scriptsbodyBefore, // deprecated
    showInfo,
    showSettings,
    showThemeSwitch,
@@ -98,6 +98,11 @@ export default function renderHTML(
    },
    config?.web
  );
+  // Fallback
+  let scriptsBodyBefore = config?.web?.scriptsBodyBefore;
+  if (scriptsbodyBefore && !scriptsBodyBefore) {
+    scriptsBodyBefore = scriptsbodyBefore;
+  }
  const options: TemplateUIOptions = {
    showInfo,
    showSettings,
@@ -136,7 +141,7 @@ export default function renderHTML(
          options,
          scriptsBodyAfter,
          metaScripts,
-          scriptsbodyBefore,
+          scriptsBodyBefore,
        },
        manifest
      );
--- a/packages/middleware/src/middlewares/web/utils/template.ts
+++ b/packages/middleware/src/middlewares/web/utils/template.ts
@@ -11,7 +11,7 @@ export type Template = {
  options: TemplateUIOptions;
  metaScripts?: string[];
  scriptsBodyAfter?: string[];
-  scriptsbodyBefore?: string[];
+  scriptsBodyBefore?: string[];
 };

 // the outcome of the Webpack Manifest Plugin
@@ -30,15 +30,15 @@ export default function renderTemplate(template: Template, manifest: WebpackMani
        <meta charset="utf-8">
        <base href="${template?.options.base}">
        <title>${template?.options?.title ?? ''}</title>
-        <link rel="icon" href="${template?.options.base}-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="${template?.options.base}-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS=${JSON.stringify(template.options)}
        </script>
        ${template?.metaScripts ? template.metaScripts.join('') : ''}
      </head>
      <body class="body">
-        ${template?.scriptsbodyBefore ? template.scriptsbodyBefore.join('') : ''}
+        ${template?.scriptsBodyBefore ? template.scriptsBodyBefore.join('') : ''}
        <div id="root"></div>
        ${getManifestValue(template.manifest.js, manifest, template?.options.base)
          .map((item) => `<script defer="defer" src="${item}"></script>`)
--- a/packages/middleware/test/snapshots/template.test.ts.snap
+++ b/packages/middleware/test/snapshots/template.test.ts.snap
@@ -8,8 +8,8 @@ exports[`template > custom body after 1`] = `
        <meta charset="utf-8">
        <base href="http://domain.com/">
        <title></title>
-        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
        </script>
@@ -34,8 +34,8 @@ exports[`template > custom body before 1`] = `
        <meta charset="utf-8">
        <base href="http://domain.com/">
        <title></title>
-        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
        </script>
@@ -60,8 +60,8 @@ exports[`template > custom render 1`] = `
        <meta charset="utf-8">
        <base href="http://domain.com/">
        <title></title>
-        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
        </script>
@@ -86,8 +86,8 @@ exports[`template > custom title 1`] = `
        <meta charset="utf-8">
        <base href="http://domain.com/">
        <title>foo title</title>
-        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/","title":"foo title"}
        </script>
@@ -112,8 +112,8 @@ exports[`template > meta scripts 1`] = `
        <meta charset="utf-8">
        <base href="http://domain.com/">
        <title></title>
-        <link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="http://domain.com/-/static/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
        </script>
--- a/packages/middleware/test/template.test.ts
+++ b/packages/middleware/test/template.test.ts
@@ -61,7 +61,7 @@ describe('template', () => {
      template(
        {
          options: { base: 'http://domain.com/' },
-          scriptsbodyBefore: [`<script src="fooBefore"/>`, `<script src="barBefore"/>`],
+          scriptsBodyBefore: [`<script src="fooBefore"/>`, `<script src="barBefore"/>`],
          manifest: exampleManifest,
        },
        manifest
--- a/packages/server/express/src/server.ts
+++ b/packages/server/express/src/server.ts
@@ -98,7 +98,7 @@ const defineAPI = async function (config: IConfig, storage: Storage): Promise<Ex
  app.use(apiEndpoint(config, auth, storage, logger));

  // For WebUI & WebUI API
-  if (_.get(config, 'web.enable', true)) {
+  if (_.get(config, 'web.enabled', _.get(config, 'web.enable', true))) {
    app.use((_req, res, next) => {
      res.locals.app_version = version ?? '';
      next();
--- a/packages/server/express/test/config/web-enabled.yaml
+++ b/packages/server/express/test/config/web-enabled.yaml
@@ -0,0 +1,28 @@
+# storage: this is generated on _helper file
+
+auth:
+  htpasswd:
+    file: ./htpasswd-package
+
+# Use enabled instead of enable which is deprecated
+web:
+  enabled: true
+
+publish:
+  allow_offline: false
+
+uplinks:
+
+log: { type: stdout, format: pretty, level: trace }
+
+packages:
+  '@*/*':
+    access: $all
+    publish: $all
+    unpublish: none
+  '**':
+    access: $all
+    publish: $all
+    unpublish: none
+
+_debug: true
--- a/packages/server/express/test/server.spec.ts
+++ b/packages/server/express/test/server.spec.ts
@@ -99,6 +99,15 @@ describe('server api', () => {
    expect(response.body.error).toEqual(API_ERROR.WEB_DISABLED);
  });

+  test('should return homepage if web is enabled', async () => {
+    const app = await initializeServer('web-enabled.yaml');
+    const response = await supertest(app)
+      .get('/')
+      .expect(HEADER_TYPE.CONTENT_TYPE, HEADERS.TEXT_HTML_UTF8)
+      .expect(HTTP_STATUS.OK);
+    expect(response.text).toContain('<title>verdaccio</title>');
+  });
+
  test('should not display debug hook disabled by default', async () => {
    const app = await initializeServer('no_debug.yaml');
    await supertest(app)
--- a/packages/ui-components/src/Theme/theme.ts
+++ b/packages/ui-components/src/Theme/theme.ts
@@ -42,9 +42,9 @@ const themeModes = {
  },
 };

-function applyPrimaryColor(mode: ThemeMode, primaryColor: string): any {
+function applyPrimaryColor(mode: ThemeMode, primaryColor?: string): any {
  if (mode === 'light') {
-    themeModes['light'].primary = primaryColor;
+    themeModes['light'].primary = primaryColor || PRIMARY_COLOR;
  }

  return themeModes[mode];
@@ -100,7 +100,7 @@ export interface CustomTheme {

 export type Theme = MuiTheme & CustomTheme;

-export const getTheme = (themeMode: ThemeMode, primaryColor: string): Theme => {
+export const getTheme = (themeMode: ThemeMode, primaryColor?: string): Theme => {
  const palette = applyPrimaryColor(themeMode, primaryColor);
  return createTheme({
    typography: {