Skip to main content
Version: Next

Static variants

Variants of type static define a folder from which to serve static assets.

Options

The options property in a variant of type static must be an object containing next properties:

  • path (String): Path to the folder to be served. It can be a relative path from process.cwd, or an absolute path.
  • headers (Object): Object containing headers to set in the response of all static assets. Optional.
  • options (Object): Object containing any of the available express.static method options. Some of them are:
    • index (Boolean|String): Sends the specified directory index file. Set to false to disable directory indexing.
    • maxAge (Number) : Set the max-age property of the Cache-Control header in milliseconds or a string in ms format.
    • redirect (Boolean) : Redirect to trailing / when the pathname is a directory.
    • ... : Any of the other options supported by the express.static method.

For example, use the following route to serve HTML files, images, CSS files, and JavaScript files in a directory named public in the mocks folder:

module.exports = [
{
id: "public",
url: "/web",
variants: [
{
id: "available",
type: "static",
options: {
path: "mocks/public", // path of the folder to be served
headers: { // response headers to send in every asset request
"x-custom-header": "foo-header-value",
},
options: { // options for the express.static method
maxAge: 500
}
},
}
]
}
];
tip

Yo can still use the variant delay option in variants of type static. So, you can simulate static assets being served slowly.

Route method

Note that the static assets Variant Handler is implemented using an Express router instead of an Express middleware, so, it has no sense to define the method in a route which will contain only variants of type static. When defined, if the current variant is of type static the route method will be ignored and the router will handle all HTTP methods (until you have defined a previous route handling some specific methods of the same url). For further info about the internal details, read the Variant Handlers development chapter.

info

When the variant is of type static, the route method will be ignored and it will handle all HTTP methods.

Examples

Slow assets

You can still use the delay property of routes and variants to simulate that your static assets are server slowly.

module.exports = [
{
id: "public",
url: "/web",
variants: [
{
id: "available",
type: "static",
options: {
path: "mocks/public",
},
},
{
id: "slow",
delay: 1000,
type: "static",
options: {
path: "mocks/public",
},

}
]
}
];
info

Using the global delay setting will also affect to static variants.

Simulating errors on requests to assets

Using multiple routes, it is possible to serve static assets and still simulate some errors on requests to some of them (or all of them).

In the next example, you can see that there is a route handling the requests to the /web/intro.html url with two variants: The first one is disabled, and the second one returns a JSON error. After this route, there is another one serving all static files in the mocks/public folder under the /web url.

module.exports = [
{
id: "web-intro",
url: "/web/intro.html",
variants: [
{
id: "disabled",
disabled: true, // Disables the route
},
{
id: "error",
type: "json", // Sends a JSON response
options: {
status: 500,
body: {
message: "There was an error",
},
},
},
]
},
{
id: "web",
url: "/web",
variants: [
{
id: "available",
type: "static", // Static variant
options: {
path: "mocks/public", // Path of the folder to be served
},
}
]
}
];

Then, in the collections.json file, two collections are created: The first one disables the first route, and the second one uses the variant producing the error.

module.exports = [
{
id: "web-success",
routes: ["web-intro:disabled", "web:available"]
},
{
id: "web-partial-error",
from: "web-success",
routes: ["web-intro:error"]
},
];

So, when the first collection is selected, the first route is ignored because its current variant is disabled, and all static assets are served. But when the second collection is selected, the route handling the /web/intro.html route is enabled and returns an error, so that specific route returns an error, but all of the rest of static assets are served normally.

await core.mock.collections.select("web-success"); // All static assets are served

await core.mock.collections.select("web-partial-error"); // Only `/web/intro.html` returns an error
tip

You can also simulate errors on groups of static assets or even all assets using this same example, but changing the url of the web-intro route. For example, changing it to /web/** would produce all routes to return the error response, and changing it to /web/img/** would produce to return an error on requesting any asset in the img subfolder.