Prefix path setup

[nileshgulia1]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Nilesh Gulia @nileshgulia1

Seconder:

Abstract

Allows a Volto project to be published under relative-path. For eg: www.mysite.com/foo,

Motivation

We came across projects that manifest the need to have multiple sites published under one domain. For eg: https://water.europa.eu/ is the static webpage that links to two "subsites". The page is static with two sites hosted inside their own folders. For eg: /Plone/marine and /freshwater.

There is a need to replace the build path every time, eg for freshwater, we are using PUBLIC_PATH https://github.com/eea/freshwater-frontend/blob/master/entrypoint-prod.sh#L16

We might want a more robust solution that can handle the prefixing of build files at runtime under one env var. So something like RAZZLE_PREFIX_PATH="/foo" will ensure that plone site root is at /foo.

Assumptions

Proposal & Implementation

This has been nicely already put on top of the table by red turtle folks @giuliaghisini @cekk @pnicolli in the form of #3592.

Based on basename react-router prop which adds an initial entry to browser "history" stack and allows all links to be prefixed with basename by react-router. The static assets like images need to be explicitly prefixed. @nileshgulia1 amended an express-middleware which re-directs to app base path on initial load.

When we use basename in react-router, we basically have two situations where we need to manually prefix:

1. When we use the a tag.
2. When we use the img tag

About the a tag, it is best to avoid it and use the Link component of react-router-dom or the UniversalLink component of Volto. This way, the prefix will be added automatically. There is a situation where the Link component will not work, which is for downloading files. In this situation, the best thing to do is to use the UniversalLink component and manually prefix the a tag in this component, in the case of downloads. This way, the prefix will be centered.

About the img tag, the proposal is to replace all uses of it with the Image component of Volto and prefix in the component.

There is another approach in #3190 PR, which uses a store enhancer middleware to prefix all the router paths(amending history accordingly) and modified flattenToAppUrl method.

Deliverables

• ./foo as plone site root
• serve build assets from RAZZLE_PREFIX_PATH
• prefix all Images with RAZZLE_PREFIX_PATH
• Url links to be prefixed as well.
• Need to take care of flattenToAppUrl. Shouldn't add multiple prefixes.
• Since /foo is at root, strip out the path from API requests?
• Nginx config for deployments
• Documentation
• Cypress tests (Add cypress to prefix path router #3719)

Risks

• Since the site root is at /foo, what are the considerations when prefixing internal links?

Participants

These are the people involved:
Original PR by @giuliaghisini

• @cekk
• @pnicolli
• @tiberiuichim Another react-router middleware based approach(Relative (prefixed root) path #3190)
• @sneridagh Created the cypress architecture in CI (Add cypress to prefix path router #3719)
• @nileshgulia1

I would be happy to coordinate the efforts, any help on the deployment section would be greatly appreciated.

[FarooqAlaulddin]

Any temporary solution/recommendation in the meantime?