@plone/volto 19.0.0-alpha.8 → 19.0.0-alpha.9

package/CHANGELOG.md

@@ -17,6 +17,20 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.0.0-alpha.9 (2025-10-22)
+
+### Feature
+
+- Add Cypress for a subpath. @wesleybl [#6976](https://github.com/plone/volto/issues/6976)
+- Serve API requests from a subpath. @davisagli [#7326](https://github.com/plone/volto/issues/7326)
+- Add option to serve a Volto site on a subpath using the `RAZZLE_SUBPATH_PREFIX` environment variable. @nileshgulia1, @wesleybl, @davisagli 
+
+### Internal
+
+- Expires the cache if the root `package.json` is changed. @wesleybl [#7536](https://github.com/plone/volto/issues/7536)
+- Move to `dependencies` some bad categorized dependencies in `devDependencies`. @sneridagh 
+- Run Cookieplone acceptance test with Node 24. @davisagli 
+
 ## 19.0.0-alpha.8 (2025-10-22)
 
 ### Internal

package/cypress/docker/prefixed-rules.yml

@@ -0,0 +1,26 @@
+http:
+  routers:
+    frontend:
+      rule: "Host(`localhost`) && PathPrefix(`/foo`)"
+      service: frontend
+    backend:
+      rule: "Host(`localhost`) && PathPrefix(`/foo/++api++`)"
+      service: backend
+      middlewares:
+        - backend
+
+  middlewares:
+    backend:
+      replacePathRegex:
+        regex: "^/foo/\\+\\+api\\+\\+($|/.*)"
+        replacement: "/VirtualHostBase/http/localhost/plone/++api++/VirtualHostRoot/_vh_foo$1"
+
+  services:
+    frontend:
+      loadBalancer:
+        servers:
+          - url: "http://host.docker.internal:3000"
+    backend:
+      loadBalancer:
+        servers:
+          - url: "http://host.docker.internal:55001"

package/cypress/docker/prefixed.yml

@@ -0,0 +1,24 @@
+version: "3.7"
+
+services:
+
+  proxy:
+    image: traefik:v2.8
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      # - "--providers.docker.exposedbydefault=false"
+      - "--providers.file=true"
+      - "--providers.file.filename=/etc/traefik/rules.yml"
+      - "--entrypoints.web.address=:80"
+      - "--api.insecure=true"
+      # - "--accesslog=true"
+      # - "--log.level=DEBUG"
+    ports:
+      - 80:80
+      - "8888:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./prefixed-rules.yml:/etc/traefik/rules.yml
+    extra_hosts:
+      - host.docker.internal:host-gateway

package/locales/ca/LC_MESSAGES/volto.po

@@ -2474,7 +2474,7 @@ msgstr ""
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr ""

package/locales/de/LC_MESSAGES/volto.po

@@ -2473,7 +2473,7 @@ msgstr "Keine Add-ons installiert."
 msgid "No broken relations found."
 msgstr "Alle Relationen sind OK."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Keine Verbindung zum Server"

package/locales/en/LC_MESSAGES/volto.po

@@ -2468,7 +2468,7 @@ msgstr ""
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr ""

package/locales/es/LC_MESSAGES/volto.po

@@ -2475,7 +2475,7 @@ msgstr "No se han encontrado complementos"
 msgid "No broken relations found."
 msgstr "No se encontraron relaciones rotas."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "No hay conexión con el servidor"

package/locales/eu/LC_MESSAGES/volto.po

@@ -2475,7 +2475,7 @@ msgstr "Ez da gehigarririk aurkitu"
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Ez dago konexiorik zerbitzariarekin"

package/locales/fi/LC_MESSAGES/volto.po

@@ -2473,7 +2473,7 @@ msgstr "Lisäosia ei löytynyt"
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Ei yhteyttä palvelimeen"

package/locales/fr/LC_MESSAGES/volto.po

@@ -2475,7 +2475,7 @@ msgstr "Aucun module trouvé"
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Aucune connexion avec le serveur"

package/locales/hi/LC_MESSAGES/volto.po

@@ -2468,7 +2468,7 @@ msgstr "कोई ऐड-ऑन नहीं मिला"
 msgid "No broken relations found."
 msgstr "कोई टूटी हुई संबंध नहीं मिला।"
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "सर्वर से कोई कनेक्शन नहीं है"

package/locales/it/LC_MESSAGES/volto.po

@@ -2468,7 +2468,7 @@ msgstr "Nessun addon trovato"
 msgid "No broken relations found."
 msgstr "Nessuna relazione corrotta trovata."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Non c'è connessione con il server, a causa di un timeout o di problemi di connessione di rete del tuo dispositivo."

package/locales/ja/LC_MESSAGES/volto.po

@@ -2473,7 +2473,7 @@ msgstr ""
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr ""

package/locales/nl/LC_MESSAGES/volto.po

@@ -2472,7 +2472,7 @@ msgstr "Geen modules gevonden"
 msgid "No broken relations found."
 msgstr "Geen gebroken relaties gevonden."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Er is geen verbinding naar de server, wegens een timeout of geen netwerkverbinding."

package/locales/pt/LC_MESSAGES/volto.po

@@ -2473,7 +2473,7 @@ msgstr ""
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr ""

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -2474,7 +2474,7 @@ msgstr "Nenhum complemento encontrado"
 msgid "No broken relations found."
 msgstr "Nenhum relacionamento rompido foi encontrado"
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Sem conexão ao servidor"

package/locales/ro/LC_MESSAGES/volto.po

@@ -2474,7 +2474,7 @@ msgstr "Nu s-au găsit addons"
 msgid "No broken relations found."
 msgstr "Nu s-au găsit relații rupte."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Nu există conexiunea la server, din cauza unui timeout sau a unei conexiuni întrerupte."

package/locales/ru/LC_MESSAGES/volto.po

@@ -2473,7 +2473,7 @@ msgstr "Дополнения не найдены"
 msgid "No broken relations found."
 msgstr "Нарушенные связи не выявлены."
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "Нет соединения с сервером"

package/locales/volto.pot

@@ -2470,7 +2470,7 @@ msgstr ""
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr ""

package/locales/zh_CN/LC_MESSAGES/volto.po

@@ -2474,7 +2474,7 @@ msgstr "没有找到附件"
 msgid "No broken relations found."
 msgstr ""
 
-#. Default: "There is no connection to the server, due to a timeout o no network connection."
+#. Default: "There is no connection to the server, due to a timeout or no network connection."
 #: components/theme/RequestTimeout/RequestTimeout
 msgid "No connection to the server"
 msgstr "与服务器无连接"

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.8",
+  "version": "19.0.0-alpha.9",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -147,6 +147,9 @@
     "node": "^22 || ^24"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/utilities": "3.2.2",
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@redux-devtools/extension": "^3.3.0",
@@ -159,6 +162,7 @@
     "diff": "3.5.0",
     "express": "4.19.2",
     "filesize": "6",
+    "full-icu": "1.4.0",
     "github-slugger": "1.4.0",
     "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
@@ -236,9 +240,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/registry": "3.0.0-alpha.6",
+    "@plone/scripts": "4.0.0-alpha.3",
     "@plone/volto-slate": "19.0.0-alpha.6",
-    "@plone/scripts": "4.0.0-alpha.3"
+    "@plone/registry": "3.0.0-alpha.6"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -251,9 +255,6 @@
     "@babel/plugin-syntax-export-namespace-from": "7.8.3",
     "@babel/runtime": "7.20.6",
     "@babel/types": "7.20.5",
-    "@dnd-kit/core": "6.0.8",
-    "@dnd-kit/sortable": "7.0.2",
-    "@dnd-kit/utilities": "3.2.2",
     "@fiverr/afterbuild-webpack-plugin": "^1.0.0",
     "@jest/globals": "^29.7.0",
     "@loadable/babel-plugin": "5.13.2",
@@ -314,7 +315,6 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "full-icu": "1.4.0",
     "html-webpack-plugin": "5.5.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",

package/razzle.config.js

@@ -414,6 +414,22 @@ const defaultModify = ({
         ]
       : [];
 
+  // If Volto is served under a subpath,
+  // we have to adjust where Webpack assets are served too.
+  const subpathPrefix = process.env.RAZZLE_SUBPATH_PREFIX || '';
+  if (subpathPrefix) {
+    if (target === 'web' && dev) {
+      if (config.devServer.devMiddleware) {
+        config.devServer.devMiddleware.publicPath = subpathPrefix;
+      } else {
+        config.devServer.publicPath += `${subpathPrefix.slice(1)}/`;
+      }
+    }
+    const publicPath = config.output.publicPath;
+    if (publicPath.indexOf(subpathPrefix) === -1) {
+      config.output.publicPath = `${publicPath}${subpathPrefix.slice(1)}/`;
+    }
+  }
   return config;
 };
 

package/src/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import { Button } from 'semantic-ui-react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import {
+  addSubpathPrefix,
+  flattenToAppURL,
+} from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import galleryLeftSVG from '@plone/volto/icons/left-key.svg';
@@ -81,10 +83,10 @@ const ImageGalleryTemplate = ({ items }) => {
   );
   const imagesInfo = renderItems.map((item) => {
     return {
-      original: `${flattenToAppURL(item['@id'])}/@@images/${
+      original: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/large`,
-      thumbnail: `${flattenToAppURL(item['@id'])}/@@images/${
+      thumbnail: `${addSubpathPrefix(flattenToAppURL(item['@id']))}/@@images/${
         item.image_field
       }/thumb`,
     };

package/src/components/manage/Contents/ContentsBreadcrumbs.jsx

@@ -44,11 +44,11 @@ const ContentsBreadcrumbs = (props) => {
           </Link>
           <Breadcrumb.Divider />
           <Link
-            to={`${navroot['@id']}/contents`}
+            to={`${navroot?.['@id']}/contents`}
             className="section"
-            title={navroot.title}
+            title={navroot?.title}
           >
-            {navroot.title}
+            {navroot?.title}
           </Link>
         </>
       )}

package/src/components/theme/Image/Image.jsx

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL, flattenScales } from '@plone/volto/helpers/Url/Url';
+import {
+  flattenToAppURL,
+  flattenScales,
+  addSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 /**
  * Image component
@@ -30,7 +34,7 @@ export default function Image({
   attrs.className = cx(className, { responsive }) || undefined;
 
   if (!item && src) {
-    attrs.src = src;
+    attrs.src = addSubpathPrefix(src);
   } else {
     const isFromRealObject = !item.image_scales;
     const imageFieldWithDefault = imageField || item.image_field || 'image';
@@ -46,9 +50,11 @@ export default function Image({
 
     const isSvg = image['content-type'] === 'image/svg+xml';
     // In case `base_path` is present (`preview_image_link`) use it as base path
-    const basePath = image.base_path || item['@id'];
+    const basePath = addSubpathPrefix(
+      flattenToAppURL(image.base_path || item['@id']),
+    );
+    attrs.src = `${basePath}/${image.download}`;
 
-    attrs.src = `${flattenToAppURL(basePath)}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
 
@@ -67,10 +73,7 @@ export default function Image({
       });
 
       attrs.srcSet = sortedScales
-        .map(
-          (scale) =>
-            `${flattenToAppURL(basePath)}/${scale.download} ${scale.width}w`,
-        )
+        .map((scale) => `${basePath}/${scale.download} ${scale.width}w`)
         .join(', ');
     }
   }

package/src/components/theme/RequestTimeout/RequestTimeout.jsx

@@ -29,7 +29,7 @@ const RequestTimeout = () => (
         <h1 style={{ textAlign: 'center', lineHeight: '40px' }}>
           <FormattedMessage
             id="No connection to the server"
-            defaultMessage="There is no connection to the server, due to a timeout o no network connection."
+            defaultMessage="There is no connection to the server, due to a timeout or no network connection."
           />
           <br />
           <a href={config.settings.apiPath}>{config.settings.apiPath}</a>

package/src/config/index.js

@@ -30,10 +30,6 @@ import languages from '@plone/volto/constants/Languages.cjs';
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
 
-const apiPath =
-  process.env.RAZZLE_API_PATH ||
-  (__DEVELOPMENT__ ? `http://${host}:${port}` : '');
-
 const getServerURL = (url) => {
   if (!url) return;
   const apiPathURL = parseUrl(url);
@@ -46,12 +42,14 @@ const getServerURL = (url) => {
 // if RAZZLE_PUBLIC_URL is present, use it
 // if in DEV, use the host/port combination by default
 // if in PROD, assume it's RAZZLE_API_PATH server name (no /api or alikes) or fallback
-// to DEV settings if RAZZLE_API_PATH is not present
+// to DEV settings if RAZZLE_API_PATH is not present.
+// Finally, add the subpath, if there is one.
 const publicURL =
-  process.env.RAZZLE_PUBLIC_URL ||
-  (__DEVELOPMENT__
-    ? `http://${host}:${port}`
-    : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`);
+  (process.env.RAZZLE_PUBLIC_URL ||
+    (__DEVELOPMENT__
+      ? `http://${host}:${port}`
+      : getServerURL(process.env.RAZZLE_API_PATH) ||
+        `http://${host}:${port}`)) + (process.env.RAZZLE_SUBPATH_PREFIX || '');
 
 const serverConfig =
   typeof __SERVER__ !== 'undefined' && __SERVER__
@@ -65,7 +63,10 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     okRoute: '/ok',
-    apiPath,
+    // Base URL for API requests from the browser.
+    // If not explicitly set, use the publicURL (seamless mode) --
+    // but in that case it will be updated in server.jsx for each request.
+    apiPath: process.env.RAZZLE_API_PATH || publicURL,
     apiExpanders: [
       // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
@@ -99,6 +100,7 @@ let config = {
     // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8081/db/web', // for guillotina
     actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'],
     internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
+    subpathPrefix: process.env.RAZZLE_SUBPATH_PREFIX || '',
     websockets: process.env.RAZZLE_WEBSOCKETS || false,
     // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,

package/src/config/server.js

@@ -1,7 +1,6 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
-import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -12,7 +11,6 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
-    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/express-middleware/devproxy.js

@@ -13,7 +13,10 @@ const filter = function (pathname, req) {
   // Check if pathname is defined, there are some corner cases that pathname is null
   if (pathname) {
     // This is the proxy to the API in case the accept header is 'application/json'
-    return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+    return (
+      config.settings.devProxyToApiPath &&
+      pathname.startsWith(`${config.settings.subpathPrefix}/++api++`)
+    );
   } else {
     return false;
   }
@@ -78,17 +81,24 @@ export default function devProxyMiddleware() {
     },
     pathRewrite: (path, req) => {
       const { apiPathURL, instancePath } = getEnv();
+      const vhSubpath = config.settings.subpathPrefix
+        ? config.settings.subpathPrefix
+            .split('/')
+            .filter(Boolean)
+            .map((part) => '/_vh_' + part)
+            .join('')
+        : '';
       const target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
 
-      return `${target}${path.replace('/++api++', '')}`;
+      return `${target}${path.replace(`${config.settings.subpathPrefix}/++api++`, '')}`;
     },
+    changeOrigin: true,
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
     ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
-      changeOrigin: true,
       secure: false,
     }),
   });

package/src/helpers/Api/APIResourceWithAuth.js

@@ -6,6 +6,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers
@@ -16,9 +17,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
-
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     let apiPath = '';
+
     if (settings.internalApiPath && __SERVER__) {
       apiPath = settings.internalApiPath;
     } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
@@ -26,8 +27,12 @@ export const getAPIResourceWithAuth = (req) =>
     } else {
       apiPath = settings.apiPath;
     }
+
+    //strip subpath if any
+    const contentPath = stripSubpathPrefix(req.path);
+
     const request = superagent
-      .get(`${apiPath}${__DEVELOPMENT__ ? '' : APISUFIX}${req.path}`)
+      .get(`${apiPath}${__DEVELOPMENT__ ? '' : apiSuffix}${contentPath}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
     const authToken = req.universalCookies.get('auth_token');

package/src/helpers/Api/Api.js

@@ -7,7 +7,10 @@ import superagent from 'superagent';
 import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripQuerystring } from '@plone/volto/helpers/Url/Url';
+import {
+  stripQuerystring,
+  stripSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
 
@@ -19,11 +22,10 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 export function formatUrl(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
 
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 
-  const adjustedPath = path[0] !== '/' ? `/${path}` : path;
   let apiPath = '';
   if (settings.internalApiPath && __SERVER__) {
     apiPath = settings.internalApiPath;
@@ -31,7 +33,8 @@ export function formatUrl(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  const contentPath = stripSubpathPrefix(path[0] !== '/' ? `/${path}` : path);
+  return `${apiPath}${apiSuffix}${contentPath}`;
 }
 
 /**

package/src/helpers/AsyncConnect/ssr.js

@@ -1,6 +1,7 @@
 import { matchRoutes } from 'react-router-config';
 import { mapSeries, isPromise } from './utils';
 import { endGlobalLoad } from '@plone/volto/actions/asyncConnect/asyncConnect';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 export function filterComponents(branch) {
   return branch.reduce((result, { route, match }) => {
@@ -18,7 +19,9 @@ export function loadAsyncConnect({
   filter = () => true,
   ...rest
 }) {
-  const layered = filterComponents(matchRoutes(routes, location.pathname));
+  const layered = filterComponents(
+    matchRoutes(routes, stripSubpathPrefix(location.pathname)),
+  );
 
   if (layered.length === 0) {
     return Promise.resolve();

package/src/helpers/Html/Html.jsx

@@ -9,6 +9,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
 import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { addSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
 
@@ -126,14 +127,22 @@ class Html extends Component {
             }}
           />
 
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/favicon.ico')}
+            sizes="any"
+          />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/icon.svg')}
+            type="image/svg+xml"
+          />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="/apple-touch-icon.png"
+            href={addSubpathPrefix('/apple-touch-icon.png')}
           />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href={addSubpathPrefix('/site.webmanifest')} />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="mobile-web-app-capable" content="yes" />

package/src/helpers/Sitemap/Sitemap.js

@@ -22,10 +22,10 @@ export const SITEMAP_BATCH_SIZE = 5000;
 export const generateSitemap = (_req, start = 0, size = undefined) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_start=${start}&b_size=${
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_start=${start}&b_size=${
         size !== undefined ? size : 100000000
       }&use_site_search_settings=1`,
     );
@@ -64,10 +64,10 @@ export const generateSitemap = (_req, start = 0, size = undefined) =>
 export const generateSitemapIndex = (_req, gzip = false) =>
   new Promise((resolve) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     const apiPath = settings.internalApiPath ?? settings.apiPath;
     const request = superagent.get(
-      `${apiPath}${APISUFIX}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
+      `${apiPath}${apiSuffix}/@search?metadata_fields=modified&b_size=0&use_site_search_settings=1`,
     );
     request.set('Accept', 'application/json');
     const authToken = _req.universalCookies.get('auth_token');

package/src/helpers/Url/Url.js

@@ -193,7 +193,7 @@ export function addAppURL(url) {
  */
 export function expandToBackendURL(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
   let adjustedPath;
   if (path.startsWith('http://') || path.startsWith('https://')) {
     // flattenToAppURL first if we get a full URL
@@ -210,7 +210,7 @@ export function expandToBackendURL(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  return `${apiPath}${apiSuffix}${adjustedPath}`;
 }
 
 /**
@@ -258,6 +258,36 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (isInternalURL(src) && subpathPrefix && !src.startsWith(subpathPrefix)) {
+    url = subpathPrefix + src; //add subpathPrefix to src if it's an internal url and not a static resource.
+  }
+  return url;
+}
+
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src) {
+  let url = src;
+  const { subpathPrefix } = config.settings;
+  if (subpathPrefix && src.match(new RegExp(`^${subpathPrefix}(/|$)`))) {
+    url = src.slice(subpathPrefix.length);
+  }
+  return url;
+}
+
 /**
  * Get field url
  * @method getFieldURL

package/src/helpers/Url/Url.test.js

@@ -19,6 +19,8 @@ import {
   normaliseMail,
   normalizeTelephone,
   flattenScales,
+  addSubpathPrefix,
+  stripSubpathPrefix,
 } from './Url';
 
 beforeEach(() => {
@@ -533,4 +535,64 @@ describe('Url', () => {
       });
     });
   });
+
+  describe('Subpath tests', () => {
+    beforeEach(() => {
+      settings.subpathPrefix = '/site';
+    });
+    describe('addSubpathPrefix', () => {
+      it('adds subpath prefix to internal URLs', () => {
+        expect(addSubpathPrefix('/some-page')).toBe('/site/some-page');
+        expect(addSubpathPrefix('/news/article')).toBe('/site/news/article');
+      });
+
+      it('does not add subpath prefix to URLs that already have it', () => {
+        expect(addSubpathPrefix('/site/some-page')).toBe('/site/some-page');
+      });
+
+      it('does not add subpath prefix to external URLs', () => {
+        expect(addSubpathPrefix('https://example.com/page')).toBe(
+          'https://example.com/page',
+        );
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(addSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+
+    describe('stripSubpathPrefix', () => {
+      beforeEach(() => {
+        settings.subpathPrefix = '/site';
+      });
+      it('removes subpath prefix from URLs that have it', () => {
+        expect(stripSubpathPrefix('/site/some-page')).toBe('/some-page');
+        expect(stripSubpathPrefix('/site/news/article')).toBe('/news/article');
+      });
+
+      it('leaves URLs unchanged if they do not have the prefix', () => {
+        expect(stripSubpathPrefix('/other/some-page')).toBe('/other/some-page');
+      });
+
+      it('handles the case where URL is exactly the subpath prefix', () => {
+        expect(stripSubpathPrefix('/site')).toBe('');
+      });
+
+      it('handles empty subpath prefix', () => {
+        settings.subpathPrefix = '';
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+
+      it('handles undefined subpath prefix', () => {
+        settings.subpathPrefix = undefined;
+        expect(stripSubpathPrefix('/some-page')).toBe('/some-page');
+      });
+    });
+  });
 });

package/src/server.jsx

@@ -18,8 +18,9 @@ import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 
-import routes from '@root/routes';
+import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import Html from '@plone/volto/helpers/Html/Html';
@@ -39,7 +40,10 @@ import ErrorPage from '@plone/volto/error';
 import languages from '@plone/volto/constants/Languages.cjs';
 
 import configureStore from '@plone/volto/store';
-import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
 
 let locales = {};
 
@@ -69,10 +73,30 @@ const server = express()
   })
   .use(cookiesMiddleware());
 
+// If Volto is being served under a subpath,
+// make sure the static files are available there too.
+// (The static middleware loads too early to access the config.)
+if (config.settings.subpathPrefix) {
+  server.use(
+    config.settings.subpathPrefix,
+    express.static(
+      process.env.BUILD_DIR
+        ? path.join(process.env.BUILD_DIR, 'public')
+        : process.env.RAZZLE_PUBLIC_DIR,
+      {
+        redirect: false, // Avoid /my-prefix from being redirected to /my-prefix/
+      },
+    ),
+  );
+}
+
 const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
 
 server.all('*', setupServer);
-if (middleware.length) server.use('/', middleware);
+if (middleware.length) {
+  server.use(config.settings.subpathPrefix || '/', middleware);
+}
+server.use('/', okMiddleware());
 
 server.use(function (err, req, res, next) {
   if (err) {
@@ -160,8 +184,10 @@ function setupServer(req, res, next) {
     res.locals.detectedHost = `${
       req.headers['x-forwarded-proto'] || req.protocol
     }://${req.headers.host}`;
-    config.settings.apiPath = res.locals.detectedHost;
-    config.settings.publicURL = res.locals.detectedHost;
+    config.settings.apiPath =
+      res.locals.detectedHost + config.settings.subpathPrefix;
+    config.settings.publicURL =
+      res.locals.detectedHost + config.settings.subpathPrefix;
   }
 
   res.locals = {
@@ -253,7 +279,11 @@ server.get('/*', (req, res) => {
         <ChunkExtractorManager extractor={extractor}>
           <CookiesProvider cookies={req.universalCookies}>
             <Provider store={store} onError={reactIntlErrorHandler}>
-              <StaticRouter context={context} location={req.url}>
+              <StaticRouter
+                context={context}
+                location={req.url}
+                basename={config.settings.subpathPrefix}
+              >
                 <ReduxAsyncConnect routes={routes} helpers={api} />
               </StaticRouter>
             </Provider>
@@ -290,8 +320,8 @@ server.get('/*', (req, res) => {
             markup={markup}
             store={store}
             criticalCss={readCriticalCss(req)}
-            apiPath={res.locals.detectedHost || config.settings.apiPath}
-            publicURL={res.locals.detectedHost || config.settings.publicURL}
+            apiPath={config.settings.apiPath}
+            publicURL={config.settings.publicURL}
           />,
         )}
       `,
@@ -334,6 +364,8 @@ export const defaultReadCriticalCss = () => {
 
 // Exposed for the console bootstrap info messages
 server.apiPath = config.settings.apiPath;
+server.internalApiPath = config.settings.internalApiPath;
+server.subpathPrefix = config.settings.subpathPrefix;
 server.devProxyToApiPath = config.settings.devProxyToApiPath;
 server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
 server.publicURL = config.settings.publicURL;

package/src/start-client.jsx

@@ -18,8 +18,6 @@ import Api from '@plone/volto/helpers/Api/Api';
 import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 
-export const history = createBrowserHistory();
-
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
@@ -27,6 +25,15 @@ function reactIntlErrorHandler(error) {
 export default function client() {
   const api = new Api();
 
+  if (window.env.RAZZLE_SUBPATH_PREFIX) {
+    config.settings.subpathPrefix = window.env.RAZZLE_SUBPATH_PREFIX;
+  }
+  const history = createBrowserHistory({
+    basename: config.settings.subpathPrefix
+      ? config.settings.subpathPrefix
+      : '/',
+  });
+
   const store = configureStore(window.__data, history, api);
   persistAuthToken(store);
 

package/src/start-server.js

@@ -18,14 +18,20 @@ export default function server() {
 
   server
     .listen(port, bind_address, () => {
-      console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
-
-      if (app.devProxyToApiPath)
+      console.log(
+        `The Volto server will make API requests to: ${app.internalApiPath || app.apiPath}/++api++`,
+      );
+      console.log(
+        `The Volto client will make API requests to: ${app.apiPath}/++api++`,
+      );
+
+      if (app.devProxyToApiPath) {
         console.log(
           `Proxying API requests from ${app.publicURL}/++api++ to ${
             app.devProxyToApiPath
           }${app.proxyRewriteTarget || ''}`,
         );
+      }
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 
       if (!process.env.RAZZLE_PUBLIC_URL)

package/types/helpers/Url/Url.d.ts

@@ -78,6 +78,20 @@ export function isInternalURL(url: string): boolean;
  * @returns {boolean} True if is a valid url
  */
 export function isUrl(url: string): boolean;
+/**
+ * Add subpath path if set in settings
+ * @method addSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} prefixed subpath pathname
+ */
+export function addSubpathPrefix(src: string): string;
+/**
+ * strip subpath path particulary from api calls
+ * @method stripSubpathPrefix
+ * @param {string} src pathname
+ * @returns {string} pathname
+ */
+export function stripSubpathPrefix(src: string): string;
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl

package/types/start-client.d.ts

@@ -1,2 +1 @@
 export default function client(): void;
-export const history: import("history").History<unknown>;