added documentation regarding the static middleware #4518

[BhardwajAditya-github]

Added documentation of static middleware

[netlify]

✅ Deploy Preview for volto ready!

Name	Link
🔨 Latest commit	812ee52
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/6457e811ae3d770008dc96ed
😎 Deploy Preview	https://deploy-preview-4736--volto.netlify.app/recipes/express.html
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[stevepiercy]

Thank you! This looks good.

My suggestions and questions pertain only to English and MyST grammar, formatting, syntax, and style.

A core contributor should also review the content for accuracy.

[stevepiercy]

One sentence per line.

Suggested change

	The `staticMiddleware` is for serving static files (such as stylesheets and client-side JavaScript files) in the `BUILD_DIR/PUBLIC` or `PUBLIC_DIR` directory. It uses the `express.static()` function to serve static files and the `setHeaders()` function to add response headers to the files that it serves.
	The `staticMiddleware` is for serving static files such as style sheets and client-side JavaScript files from the `BUILD_DIR/PUBLIC` or `PUBLIC_DIR` directory.
	It uses the `express.static()` function to serve static files, and the `setHeaders()` function to add response headers to the files that it serves.

For staticMiddleware, is that a setting? Perhaps it should be the following?

To add new middleware, use the `settings. staticMiddleware ` configuration key.
[What are valid values for this key?]

Also a code example would be helpful.

[BhardwajAditya-github]

import { settings as defaultSettings } from '@plone/volto/config';
import express from 'express';

const settings = { ...defaultSettings };

if (__SERVER__) {
    const customStaticMiddleware = express.static('test/static/files');

    function setCustomHeaders(req, res, next) {
        res.setHeader('Cache-Control', 'public, max-age=3600');
        next();
    }

    customStaticMiddleware.setHeaders = setCustomHeaders;
    customStaticMiddleware.id = 'custom-static-middleware';

    settings.expressMiddleware = [
        ...defaultSettings.expressMiddleware,
        customStaticMiddleware,
    ];
}

I am not sure if this is correct. Please confirm

[stevepiercy]

@sneridagh @nileshgulia1 @ksuess or any other qualified person could we get a review of this Express middleware code example?

[sneridagh]

LGTM, maybe we can add this piece of code to the docs too.

[stevepiercy]

This code example should be run through whatever JavaScript linter Volto uses. I think this example would be reformatted.

[stevepiercy]

Thanks for making the changes. I approve the English and MyST syntax and style fixes.

We need a maintainer or other qualified person to review the code example and the rest of the content for accuracy, and then we can merge it.

[stevepiercy]

Oops, this PR needs a towncrier entry. See https://6.docs.plone.org/contributing/index.html#change-log-entry

[sneridagh]

LGTM overall, let's add the code sample to the docs as well and it's mergeable.