Skip to content

Serve static content

Small amounts of static content can be served from a VIP WordPress environment by adapting the methods described in Set up the ads.txt file. This method allows the static content to be served from the same domain as the WordPress application.

Larger amounts of static content can be served from a Node.js environment. Static content served from a Node.js environment has faster response times compared to the WordPress method, and less custom code is required. With this method, the static content is served from the same domain as the Node.js environment.

Example method for serving static files using Express

A code example demonstrating a method for serving static files from a Node.js environment is included for reference in the vip-go-node-skeleton repository. This code example uses Express, a web framework for Node.js. The Express built-in static middleware makes it possible to serve the static content and satisfies the requirements of the VIP platform

Importing the Express middleware

Express must be imported and the middleware created. To do this, define the app constant to reference an instance of Express, and identify the port to use (this defaults to 3000 in local development).

Location of this code snippet in the example repository.

const express = require( 'express' );
const path = require( 'path' );

const app = express();

const PORT = process.env.PORT || 3000;
const BASEURL = process.env.BASEURL || 'http://localhost';

Handling the cache healthcheck endpoint

All Node.js applications must implement the cache health check endpoint using application code.

Location of this code snippet in the example repository.

app.get( '/cache-healthcheck', function (req, res) {
	res.status( 200 ).send( 'Ok' );
});

A Node.js environment can handle a mixture of static content and dynamic routes. Each URL is processed in the order defined in the code, so the example code above will respond to /cache-healthcheck? with an “Ok” even if there’s a matching file in the public directory, which is essential to ensure that the cache healthcheck functionality is always working.

Serving the static content

The directory from which to serve static assets must be specified. For this example, static assets should be placed in the public directory, and they will be accessed with a URL relative to a root path.

Location of this code snippet in the example repository.

app.use( '/', express.static( path.join( __dirname, 'public') ) );

The app.use statement can be wrapped with a conditional. For example, a conditional that enables a switch between two different sets of static content based on the time and date, that “lifts the curtain” on a microsite on demand.

Express should serve a 404 for any invalid static URLs. This behavior, and others, can be customized.

For more information about static assets directories, refer to the Express project website.

Defining the port

app.listen is a standard requirement for the app to handle all incoming requests by listening on the defined PORT.

Location of this code snippet in the example repository.

app.listen( PORT, () => {
	console.log( `Static example listening on ${BASEURL}:${PORT}` );
})

Defining build and start

Including the build and start commands in the package.json file are a requirement for a Node.js app to run on VIP’s infrastructure.

Location of this code snippet in the example repository.

"scripts": {
    "test": "npx @automattic/vip-go-preflight-checks --verbose --wait=2000",
    "build": "echo 'No build script step configured, skipping build. For further information, refer to our documentation at https://docs.wpvip.com/technical-references/node-js/#h-requirement-2-production-dependencies-and-npm-scripts'",
    "start": "node ./src/index.js"
  },

Last updated: April 06, 2022