Prefix path router

Makefile

@@ -296,6 +296,42 @@ multilingual-ci-acceptance-test: ## Run Cypress tests in headless mode for CI fo
 multilingual-ci-acceptance-test-run-all: ## With a single command, run the backend, frontend, and the Cypress tests in headless mode for CI for multilingual tests
 	$(MAKE) -C "./packages/volto/" multilingual-ci-acceptance-test-run-all
 
+######### Prefixed Core Acceptance tests
+
+.PHONY: prefixed-acceptance-frontend-prod-start
+prefixed-acceptance-frontend-prod-start: ## Start the prefixed Core Acceptance Frontend Fixture
+	$(MAKE) -C "./packages/volto/" prefixed-acceptance-frontend-prod-start
+
+.PHONY: prefixed-ci-acceptance-test-run-all
+prefixed-ci-acceptance-test-run-all: ## Runs prefixed Core Full Acceptance Testing in headless mode
+	$(MAKE) -C "./packages/volto/" prefixed-ci-acceptance-test-run-all
+
+.PHONY: prefixed-acceptance-test
+prefixed-acceptance-test: ## Start Prefixed Cypress Acceptance Tests
+	$(MAKE) -C "./packages/volto/" prefixed-acceptance-test
+
+.PHONY: deployment-prefixed-acceptance-web-server-start
+deployment-prefixed-acceptance-web-server-start: ## Start the prefixed webserver
+	$(MAKE) -C "./packages/volto/" deployment-prefixed-acceptance-web-server-start
+
+######### Prefixed Working Copy Acceptance tests
+
+.PHONY: prefixed-working-copy-acceptance-frontend-prod-start
+prefixed-working-copy-acceptance-frontend-prod-start: ## Start acceptance frontend in production mode for prefixed working copy tests
+	$(MAKE) -C "./packages/volto/" prefixed-working-copy-acceptance-frontend-prod-start
+
+.PHONY: prefixed-working-copy-acceptance-test
+prefixed-working-copy-acceptance-test: ## Start Cypress in interactive mode for prefixed working copy tests
+	$(MAKE) -C "./packages/volto/" prefixed-working-copy-acceptance-test
+
+.PHONY: prefixed-prefixed-working-copy-ci-acceptance-test
+prefixed-working-copy-ci-acceptance-test: ## Run Cypress tests in headless mode for CI for prefixed working copy tests
+	$(MAKE) -C "./packages/volto/" prefixed-working-copy-ci-acceptance-test
+
+.PHONY: prefixed-working-copy-ci-acceptance-test-run-all
+prefixed-working-copy-ci-acceptance-test-run-all: ## With a single command, run the backend, frontend, and the Cypress tests in headless mode for CI for prefixed working copy tests
+	$(MAKE) -C "./packages/volto/" prefixed-working-copy-ci-acceptance-test-run-all
+
 ######### Deployment Multilingual Acceptance tests
 
 .PHONY: deployment-multilingual-acceptance-backend-start

docs/source/deploying/index.md

@@ -18,4 +18,5 @@ seamless-mode
 apache
 sentry
 performance
+prefixed-root
 ```

docs/source/deploying/prefixed-root.md

@@ -0,0 +1,58 @@
+---
+myst:
+  html_meta:
+    "description": "Prefixed (non-root) deployment for Volto"
+    "property=og:description": "Prefixed (non-root) deployment for Volto"
+    "property=og:title": "Prefixed (non-root) deployment"
+    "keywords": "Volto, deployment"
+---
+
+# Prefixed (non-root) deployment
+
+If you're integrating a Volto website within another existing website, you may need to run Volto on a virtual path inside that website instead of the root path.
+
+The first step is to set an environment variable `RAZZLE_PREFIX_PATH` to the prefixed path of your Volto.
+For example, if you want Volto's root to be hosted at `http://example.com/my-prefix`, you need to start Volto with:
+
+```shell
+RAZZLE_PREFIX_PATH=/my-prefix yarn start
+```
+
+If you need to debug and understand how the requests are rewritten by the Volto SSR, you can add the following environment variables to the Volto start line:
+
+
+```shell
+DEBUG_HPM=true DEBUG=superagent RAZZLE_PREFIX_PATH=/my-prefix yarn start
+```
+
+The prefix location will be used regardless of how you start Volto, whether in development or production mode.
+When developing, though, if your backend is something other then `http://localhost:8080`, you'll need to provide your own solution for how to handle things.
+
+For a production setup, when hosting Volto behind a proxy HTTP server, you can configure your rewrite rules to something like the following, in this case for Apache.
+
+```apache
+RewriteRule ^/level-1/\+\+api\+\+(.*) http://plone:8080/VirtualHostBase/http/example.com:80/Plone/VirtualHostRoot/_vh_level-1$1 [P,L]
+RewriteRule ^/level-1(.*) http://volto:3000/level-1$1 [P,L]
+```
+
+In case you have a deeper prefix path (for example, `/level1/level2`), you can do the following.
+Notice the multiple `_vh_` segments in the rewrite rule.
+
+```apache
+RewriteRule ^/level-1/level-2/\+\+api\+\+(.*) http://plone:8080/VirtualHostBase/http/example.com:80/Plone/VirtualHostRoot/_vh_level-1/_vh_level-2$1 [P,L]
+RewriteRule ^/level-1/level-2(.*) http://volto:3000/level-1/level-2$1 [P,L]
+```
+
+And start Volto with the following.
+
+```shell
+RAZZLE_PREFIX_PATH=/level1/level2 RAZZLE_API_PATH=http://example.com/level1/level2 yarn start
+```
+
+Note, as you'll be integrating Volto with an existing website, you need to configure `config.settings.externalRoutes` so that the router knows which routes it should consider internal.
+
+Finally, because `RAZZLE_PREFIX_PATH` is also used to configure the location of the static resources in webpack, when you build the static resources bundle, you must use a command such as the following.
+
+```shell
+RAZZLE_PREFIX_PATH=/level1/level2 yarn build
+```

packages/volto-slate/news/4290.feature

@@ -0,0 +1 @@
+added support for prefixPath. @giuliaghisini @cekk @pnicolli @mamico @nileshgulia1 @wesleybl

packages/volto-slate/src/editor/plugins/Image/render.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelected, useFocused } from 'slate-react';
+import { Image } from '@plone/volto/components';
 
 export const ImageElement = (props) => {
   const { attributes, children, element } = props;
@@ -16,7 +17,7 @@ export const ImageElement = (props) => {
   return (
     <span {...attributes} style={{ display: 'inline-block' }}>
       {children}
-      <img alt="" src={element.url} style={style} />
+      <Image alt="" src={element.url} style={style} />
     </span>
   );
 };

packages/volto/Makefile

@@ -266,6 +266,51 @@ working-copy-ci-acceptance-test: ## Run Cypress tests in headless mode for CI fo
 working-copy-ci-acceptance-test-run-all: ## With a single command, run the backend, frontend, and the Cypress tests in headless mode for CI for working copy tests
 	$(NODEBIN)/start-test "make working-copy-acceptance-backend-start" http-get://127.0.0.1:55001/plone "make working-copy-acceptance-frontend-prod-start" http://127.0.0.1:3000 "make working-copy-ci-acceptance-test"
 
+######### Prefixed Core Acceptance tests
+
+.PHONY: prefixed-acceptance-frontend-prod-start
+prefixed-acceptance-frontend-prod-start: build-deps ## Start the prefixed Core Acceptance Frontend Fixture
+	RAZZLE_PREFIX_PATH=/foo RAZZLE_API_PATH=http://localhost/foo pnpm build && pnpm start:prod
+
+.PHONY: prefixed-ci-acceptance-test-run-all
+prefixed-ci-acceptance-test-run-all: ## Runs prefixed Core Full Acceptance Testing in headless mode
+	$(NODEBIN)/start-test "make ci-acceptance-backend-start" http-get://localhost:55001/plone "make prefixed-acceptance-frontend-prod-start" http://localhost:3000 "make ci-acceptance-test"
+
+.PHONY: prefixed-acceptance-test
+prefixed-acceptance-test: ## Start Prefixed Cypress Acceptance Tests
+	NODE_ENV=production CYPRESS_API=plone $(NODEBIN)/cypress open --config baseUrl='http://localhost/foo' --env prefixPath="/foo"
+
+.PHONY: deployment-prefixed-acceptance-web-server-start
+deployment-prefixed-acceptance-web-server-start: ## Start the prefixed webserver
+	cd cypress/docker && docker compose -f prefixed.yml up
+
+######### Prefixed Working Copy Acceptance tests
+
+.PHONY: prefixed-working-copy-acceptance-frontend-prod-start
+prefixed-working-copy-acceptance-frontend-prod-start: build-deps ## Start acceptance frontend in production mode for prefixed working copy tests
+	RAZZLE_PREFIX_PATH=/foo ADDONS=@plone/volto-coresandbox:workingCopyFixture RAZZLE_API_PATH=http://localhost/foo pnpm build && pnpm start:prod
+
+.PHONY: prefixed-working-copy-acceptance-test
+prefixed-working-copy-acceptance-test: ## Start Cypress in interactive mode for prefixed working copy tests
+	NODE_ENV=production CYPRESS_API=plone $(NODEBIN)/cypress open --config specPattern='cypress/tests/workingCopy/**/*.{js,jsx,ts,tsx}' --config baseUrl='http://localhost/foo' --env prefixPath='/foo'
+
+.PHONY: prefixed-working-copy-ci-acceptance-test
+prefixed-working-copy-ci-acceptance-test: ## Run Cypress tests in headless mode for CI for prefixed working copy tests
+	NODE_ENV=production CYPRESS_API=plone $(NODEBIN)/cypress run --config specPattern='cypress/tests/workingCopy/**/*.{js,jsx,ts,tsx}' --config baseUrl='http://localhost/foo' --env prefixPath='/foo'
+
+.PHONY: prefixed-working-copy-ci-acceptance-test-run-all
+prefixed-working-copy-ci-acceptance-test-run-all: ## With a single command, run the backend, frontend, and the Cypress tests in headless mode for CI for prefixed working copy tests
+	$(NODEBIN)/start-test \
+		"make working-copy-acceptance-backend-start & make prefixed-working-copy-acceptance-frontend-prod-start & make deployment-prefixed-acceptance-web-server-start" \
+		http://localhost/foo \
+		"make prefixed-working-copy-ci-acceptance-test"
+
+######### Prefixed Multilingual Acceptance tests
+
+.PHONY: prefixed-multilingual-acceptance-frontend-prod-start
+prefixed-multilingual-acceptance-frontend-prod-start: build-deps ## Start the prefixed Core Acceptance Frontend Fixture
+	ADDONS=@plone/volto-coresandbox:multilingualFixture RAZZLE_PREFIX_PATH=/foo RAZZLE_API_PATH=http://localhost/foo pnpm build && pnpm start:prod
+
 ######### Guillotina Acceptance tests
 
 .PHONY: guillotina-acceptance-backend-start

packages/volto/cypress/docker/prefixed-rules.yml

@@ -0,0 +1,27 @@
+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"
+

packages/volto/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

packages/volto/cypress/helpers/index.js

@@ -11,3 +11,36 @@ export function getIfExists(
     }
   });
 }
+
+export function getTextNode(el, match) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  const nodes = [];
+  let node;
+  while ((node = walk.nextNode())) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+export function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}
+
+export function createHtmlPasteEvent(htmlContent) {
+  return Object.assign(
+    new Event('paste', { bubbles: true, cancelable: true }),
+    {
+      clipboardData: {
+        getData: () => htmlContent,
+        types: ['text/html'],
+      },
+    },
+  );
+}

packages/volto/cypress/support/commands.js

@@ -1,6 +1,11 @@
+import {
+  getIfExists,
+  getTextNode,
+  setBaseAndExtent,
+  createHtmlPasteEvent,
+} from '../helpers';
 /* eslint-disable no-console */
 import '@testing-library/cypress/add-commands';
-import { getIfExists } from '../helpers';
 import { ploneAuth } from './constants';
 
 const HOSTNAME = Cypress.env('BACKEND_HOST') || '127.0.0.1';
@@ -841,38 +846,14 @@ Cypress.Commands.add('clickSlateButton', (button, timeout = 1000) => {
   }).click({ force: true }); // force click is needed to ensure the button in visible in view.
 });
 
-// Helper functions
-function getTextNode(el, match) {
-  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
-  if (!match) {
-    return walk.nextNode();
-  }
-
-  let node;
-  while ((node = walk.nextNode())) {
-    if (node.wholeText.includes(match)) {
-      return node;
-    }
-  }
-}
-
-function setBaseAndExtent(...args) {
-  const document = args[0].ownerDocument;
-  document.getSelection().removeAllRanges();
-  document.getSelection().setBaseAndExtent(...args);
-}
-
-function createHtmlPasteEvent(htmlContent) {
-  return Object.assign(
-    new Event('paste', { bubbles: true, cancelable: true }),
-    {
-      clipboardData: {
-        getData: () => htmlContent,
-        types: ['text/html'],
-      },
-    },
-  );
-}
+/* add prefixPath from Cypress.env to supplied path
+ * designed for CI only
+ * for local, add prefixPath to Cypress.env
+ */
+Cypress.Commands.add('addBaseUrl', (url) => {
+  const prefixPath = Cypress.env('prefixPath');
+  return prefixPath ? prefixPath + url : url;
+});
 
 Cypress.Commands.add('addNewBlock', (blockName, createNewSlate = false) => {
   let block;

packages/volto/cypress/tests/core/basic/actions.js

@@ -1,4 +1,5 @@
 describe('actions Tests', () => {
+  let prefixPath;
   beforeEach(() => {
     cy.autologin();
     cy.createContent({
@@ -8,6 +9,7 @@ describe('actions Tests', () => {
       allow_discussion: true,
     });
     cy.visit('/contents');
+    prefixPath = Cypress.env('prefixPath') || '';
   });
   it('copy', function () {
     cy.get('tr[aria-label="/my-page-1"]').within(() => {
@@ -20,7 +22,7 @@ describe('actions Tests', () => {
       cy.get('a[class="icon-align-name"]').should(
         'have.attr',
         'href',
-        '/copy_of_my-page-1/contents',
+        `${prefixPath}/copy_of_my-page-1/contents`,
       );
     });
   });
@@ -44,7 +46,7 @@ describe('actions Tests', () => {
       cy.get('a[class="icon-align-name"]').should(
         'have.attr',
         'href',
-        '/my-page-1/contents',
+        `${prefixPath}/my-page-1/contents`,
       );
     });
   });
@@ -62,7 +64,7 @@ describe('actions Tests', () => {
       cy.get('a[class="icon-align-name"]').should(
         'have.attr',
         'href',
-        '/my-page-rename/contents',
+        `${prefixPath}/my-page-rename/contents`,
       );
     });
   });