Serve static middleware
npm install @sap-ux/serve-static-middleware 
@sap-ux/serve-static-middlewareThe @sap-ux/serve-static-middleware is a Custom UI5 Server Middleware for serving any static resources locally from your machine.
It can be used either with the ui5 serve or the fiori run commands.
| Option | Type | Description |
|-------------------------------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| paths | array | List of mount paths and local paths that should be handled by the serve static middleware. |
| paths.[serve-static option] | string \| number \| boolean | You can use any configuration options of serve-static. Excluding setHeaders! Alternatively you can add each option on a specific path |
| paths.path | string | specific path |
| paths.src | string | specific src |
| paths.keepCacheBusterInUrl | boolean | (optional) By default the cache buster part of the URL (e.g. /~6D08668CD2688B304F0130340DE601EA~5/) is being ignored. This property can be used to keep it part of the serve static path. |
Executing ui5 serve in your project with the configuration below in a ui5.yaml file would serve the UI5 sources from your machine. Any request starting with the path parameter will be forwarded to the local path provided in the src parameter.
``YAML`
server:
customMiddleware:
- name: serve-static-middleware
afterMiddleware: compression
configuration:
paths:
- path: /resources
src: "Path/To/SAPUI5-SDK"
- path: /test-resources
src: "Path/To/SAPUI5-SDK"
#### Serving any type of resources locally
Executing npx fiori run in your project with the configuration below in a ui5.yaml file would serve resources from your machine. Any request starting with the path parameter will be forwarded to the local path provided in the src parameter.
`YAML`
server:
customMiddleware:
- name: serve-static-middleware
afterMiddleware: compression
configuration:
paths:
- path: /images
src: "Path/To/images"
- path: /libs
src: "Path/To/libs"
#### Mocking the User API Service from @sap/approuter
If you are using the User API Service from @sap/approuter in your application, then you can mock by providing the following configuration.
`YAML`
server:
customMiddleware:
- name: serve-static-middleware
afterMiddleware: compression
configuration:
paths:
- path: /userapi/currentUser
src: "Path/To/UserJson/user.json"
index: false
fallthrough: false
redirect: falseuser.json
whereas the can look like this e.g.
``
{
"firstname": "John",
"lastname": "Doe",
"email": "john.doe@example.com",
"name": "john.doe@example.com",
"displayName": "John Doe (john.doe@example.com)",
"scopes": "openid,user_attributes,uaa.user"
}
!) of the serve-static middleware.E.g. you can set
fallthrough: false, which will cause the middleware to return 404 error, when it can't find a file on the local system:`YAML
server:
customMiddleware:
- name: serve-static-middleware
afterMiddleware: compression
configuration:
paths:
- path: /resources
src: "Path/To/SAPUI5-SDK"
- path: /test-resources
src: "Path/To/SAPUI5-SDK"
fallthrough: false
`Alternatively you can set e.g.
fallthrough: false only for specific requests:`YAML
server:
customMiddleware:
- name: serve-static-middleware
afterMiddleware: compression
configuration:
paths:
- path: /resources
src: "Path/To/SAPUI5-SDK"
fallthrough: false
- path: /test-resources
src: "Path/To/SAPUI5-SDK"
`Programmatic Usage
Alternatively you can only use the underlying middleware function, e.g. for the case when you want to use the serve-static-middleware functionality in your express server.``Typescript`
import { serveStaticMiddleware } from '@sap-ux/serve-static-middleware';
const serveStaticFn = serveStaticMiddleware(root, config);serve-static-middleware` configuration
- root - project root directory
- config - the