Koa.js - Static Files

Static files are files that clients download as they are from the server. Create a new directory, public. 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 public. We will store all our static files here. This allows us to keep our server code secure as nothing above this public folder would be accessible to the clients. After you've created a public directory, create a file named hello.txt in it with any content you like. Now add the following to your app.js.

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

app.use(serve('./public'));

app.listen(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 public dir, so all static files you load will be considering public 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('./public'));
app.use(serve('./images'));

app.listen(3000);

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