Prefix path router

.github/workflows/acceptance.yml

@@ -1226,3 +1226,173 @@ jobs:
         with:
           name: cypress-videos
           path: packages/volto/cypress/videos
+
+  prefix:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    name: Prefixed site
+    runs-on: ubuntu-latest
+    timeout-minutes: 35
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+
+      # node setup
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # pnpm install
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Cache Cypress Binary
+        id: cache-cypress-binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: binary-${{ matrix.node-version }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - run: pnpm i
+
+      - name: Install Cypress if not in cache
+        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
+        working-directory: packages/volto
+        run: make cypress-install
+
+      - name: Cypress acceptance tests
+        uses: cypress-io/github-action@v6
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          install: false
+          working-directory: packages/volto
+          browser: chrome
+          spec: cypress/tests/minimal/**/*.js
+          config: baseUrl=http://localhost/foo
+          env: prefixPath=/foo
+          start: |
+            make start-test-acceptance-server
+            make start-test-acceptance-frontend-prefixed
+            make start-test-acceptance-webserver-prefixed
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://127.0.0.1:55001/plone http://127.0.0.1:3000/foo http://localhost/foo'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/volto/cypress/screenshots
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-videos
+          path: packages/volto/cypress/videos
+
+  multilingualprefix:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    name: Multilingual in Prefixed site
+    runs-on: ubuntu-latest
+    timeout-minutes: 35
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+
+      # node setup
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # pnpm install
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Cache Cypress Binary
+        id: cache-cypress-binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: binary-${{ matrix.node-version }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - run: pnpm i
+
+      - name: Install Cypress if not in cache
+        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
+        working-directory: packages/volto
+        run: make cypress-install
+
+      - name: Cypress acceptance tests
+        uses: cypress-io/github-action@v6
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          install: false
+          working-directory: packages/volto
+          browser: chrome
+          spec: cypress/tests/multilingual/**/*.js
+          config: baseUrl=http://localhost/foo
+          env: prefixPath=/foo
+          start: |
+            make start-test-acceptance-server-seamless-multilingual
+            make start-test-acceptance-frontend-prefixed-multilingual
+            make start-test-acceptance-webserver-prefixed
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://127.0.0.1:55001/plone http://127.0.0.1:3000/foo http://localhost/foo'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/volto/cypress/screenshots
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-videos
+          path: packages/volto/cypress/videos

Makefile

@@ -315,6 +315,24 @@ test-acceptance-multilingual-headless: ## Start Multilingual Cypress Acceptance
 full-test-acceptance-multilingual: ## Runs Multilingual Full Acceptance Testing in headless mode
 	$(MAKE) -C "./packages/volto/" full-test-acceptance-multilingual
 
+######### Prefixed Core Acceptance tests
+
+.PHONY: start-test-acceptance-frontend-prefixed
+start-test-acceptance-frontend-prefixed: ## Start the prefixed Core Acceptance Frontend Fixture
+	$(MAKE) -C "./packages/volto/" start-test-acceptance-frontend-prefixed
+
+.PHONY: full-test-acceptance-prefixed
+full-test-acceptance-prefixed: ## Runs prefixed Core Full Acceptance Testing in headless mode
+	$(MAKE) -C "./packages/volto/" full-test-acceptance-prefixed
+
+.PHONY: test-acceptance-prefixed
+test-acceptance-prefixed: ## Start Prefixed Cypress Acceptance Tests
+	$(MAKE) -C "./packages/volto/" test-acceptance-prefixed
+
+.PHONY: start-test-acceptance-webserver-prefixed
+start-test-acceptance-webserver-prefixed: ## Start the prefixed webserver
+	$(MAKE) -C "./packages/volto/" start-test-acceptance-webserver-prefixed
+
 ######### Seamless Multilingual Acceptance tests
 
 .PHONY: start-test-acceptance-server-seamless-multilingual test-acceptance-server-seamless-multilingual

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

@@ -244,6 +244,30 @@ test-acceptance-workingcopy-headless: ## Start WorkingCopy Cypress Acceptance Te
 full-test-acceptance-workingcopy: ## Runs WorkingCopy Full Acceptance Testing in headless mode
 	$(NODEBIN)/start-test "make start-test-acceptance-server-workingcopy" http-get://127.0.0.1:55001/plone "make start-test-acceptance-frontend-workingcopy" http://127.0.0.1:3000 "make test-acceptance-workingcopy-headless"
 
+######### Prefixed Core Acceptance tests
+
+.PHONY: start-test-acceptance-frontend-prefixed
+start-test-acceptance-frontend-prefixed: 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: full-test-acceptance-prefixed
+full-test-acceptance-prefixed: ## Runs prefixed Core Full Acceptance Testing in headless mode
+	$(NODEBIN)/start-test "make start-test-acceptance-server" http-get://localhost:55001/plone "make start-test-acceptance-frontend-prefixed" http://localhost:3000 "make test-acceptance-headless"
+
+.PHONY: test-acceptance-prefixed
+test-acceptance-prefixed: ## Start Prefixed Cypress Acceptance Tests
+	NODE_ENV=production CYPRESS_API=plone $(NODEBIN)/cypress open --config baseUrl='http://localhost/foo'
+
+.PHONY: start-test-acceptance-webserver-prefixed
+start-test-acceptance-webserver-prefixed: ## Start the prefixed webserver
+	cd cypress/docker && docker-compose -f prefixed.yml up
+
+######### Prefixed Multilingual Acceptance tests
+
+.PHONY: start-test-acceptance-frontend-prefixed-multilingual
+start-test-acceptance-frontend-prefixed-multilingual: 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: start-test-acceptance-server-guillotina

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