Koa.js - Static Files

Static files are files that cpents download as they are from the server. Create a new directory, pubpc. Express, by default doesn t allow you to serve static files.

We need a middleware to serve this purpose. Go ahead and install koa-serve −

$ npm install --save koa-static

Now we need to use this middleware. Before that create a directory called pubpc. We will store all our static files here. This allows us to keep our server code secure as nothing above this pubpc folder would be accessible to the cpents. After you ve created a pubpc directory, create a file named hello.txt in it with any content you pke. Now add the following to your app.js.

var serve = require( koa-static );
var koa = require( koa );
var app = koa();

app.use(serve( ./pubpc ));

app.psten(3000);

Note − Koa looks up the files relative to the static directory, so the name of the static directory is not part of the URL. The root route is now set to your pubpc dir, so all static files you load will be considering pubpc as the root. To test that this is working fine, run your app and visit https://localhost:3000/hello.txt

You should get the following output. Note that this is not a HTML document or Pug view, rather it is a simple txt file.

Multiple Static Dirs

We can also set multiple static assets directories using −

var serve = require( koa-static );
var koa = require( koa );
var app = koa();

app.use(serve( ./pubpc ));
app.use(serve( ./images ));

app.psten(3000);

Now when we request a file, Koa will search these directories and send us the matching file.