How to Serve Static Files in Oak Framework for Deno

To serve static files in Oak for Deno, use the send function from oak inside a middleware to serve files from a directory. This middleware checks the request path and returns the matching static file, enabling you to serve assets like images or stylesheets easily.

Syntax

Use the send function from Oak inside a middleware to serve static files. The key parts are:

• ctx: The context object representing the request and response.
• next: The next middleware function to call if no static file matches.
• root: The folder path where your static files are stored.
• index: Optional, the default file to serve for directory requests (like index.html).

typescript

import { send } from "https://deno.land/x/oak@v12.5.0/mod.ts";

async function staticFiles(ctx, next) {
  await send(ctx, ctx.request.url.pathname, {
    root: `${Deno.cwd()}/public`,
    index: "index.html",
  });
  await next();
}

Example

This example shows a complete Oak server that serves static files from a public folder. When you visit http://localhost:8000/, it serves index.html from public. Other static files like CSS or images in public are also served automatically.

typescript

import { Application, send } from "https://deno.land/x/oak@v12.5.0/mod.ts";

const app = new Application();

app.use(async (ctx, next) => {
  try {
    await send(ctx, ctx.request.url.pathname, {
      root: `${Deno.cwd()}/public`,
      index: "index.html",
    });
  } catch {
    await next();
  }
});

app.use((ctx) => {
  ctx.response.status = 404;
  ctx.response.body = "404 - Not Found";
});

console.log("Server running on http://localhost:8000");
await app.listen({ port: 8000 });

Output

Server running on http://localhost:8000

Common Pitfalls

Common mistakes when serving static files in Oak:

• Not using await with send, causing files not to be served properly.
• Not calling next() after send, which can block other middlewares.
• Incorrect root path, so files are not found.
• Not handling errors from send, which can crash the server.

Always wrap send in a try-catch and call next() to avoid these issues.

typescript

import { Application, send } from "https://deno.land/x/oak@v12.5.0/mod.ts";

const app = new Application();

// Wrong: missing await and no error handling
app.use((ctx) => {
  send(ctx, ctx.request.url.pathname, { root: `${Deno.cwd()}/public` });
});

// Right: with await, try-catch, and next
app.use(async (ctx, next) => {
  try {
    await send(ctx, ctx.request.url.pathname, { root: `${Deno.cwd()}/public` });
  } catch {
    await next();
  }
});

Quick Reference

Tips for serving static files in Oak:

• Use send(ctx, path, { root }) inside async middleware.
• Set root to your static folder path.
• Use index: "index.html" to serve default files.
• Wrap send in try-catch and call next() to handle missing files gracefully.
• Test your static folder structure and URLs carefully.

Key Takeaways

Use Oak's send function inside async middleware to serve static files.

Always await send and handle errors with try-catch to avoid server crashes.

Set the root option to your static files folder and optionally use index for default files.

Call next() after send to allow other middleware to run if file not found.

Test your static file URLs and folder structure to ensure correct serving.