Awesome
volto-middleware-static
Volto middleware to serve dynamic static resources
Install with mrs-developer (see Volto docs) or simply with:
yarn add volto-middleware-static
Created with voltocli.
Usage
If you need to expose as a static resource a file or directory in your project, you can use this middleware when you want to serve those dynamically or don't have access to the public
folder.
Let's say, for example, that you want to change the project favicon from an addon, so it's configurable and depending on the theme. In your project's configuration, you can add something like:
// webpack loaded resource -> gets you a link
// WARN: if this is a png or jpg, it will be served as base64 string if small
import favicon from '@package/components/layout/favicon.ico';
import { serveStaticResources } from 'volto-middleware-static';
if (__SERVER__) {
config.settings.expressMiddleware = [
...config.settings.expressMiddleware,
serveStaticResources({
'favicon.ico': {
url: favicon,
contentType: 'image/ico',
},
}),
];
}
And then you'll have Volto serving your favicon and you can customize it from your code.
WARNING: if you want to customize something existing in the
public
folder, you'll need to delete that from the static directory and handling that with this method.
So, config.settings.staticFiles
accepts an object with the following structure:
- the
key
is the path of the file or directory to be served, corresponding to its URL - as the
value
you can provide aurl
to the actual resource (from the webpack loader) and acontentType
to specify the content type of the file to set as header for the browser