Skip to main content

Serving Static Files ๐Ÿ“

Dart Frog supports serving static files including images, text, json, html, and more.

Overview ๐Ÿš€โ€‹

To serve static files, place the files within the public directory at the root of the project.

For example, if you create a file in public/hello.txt which contains the following:

Hello World!

The contents of the file will be available at http://localhost:8080/hello.txt.

The public directory can also contain static files within subdirectories. For example, if you create an image in public/images/unicorn.png, the contents of the file will be available at http://localhost:8080/images/unicorn.png.

When running a development server, static files can be added, removed, and modified without needing to restart the server thanks to hot reload โšก๏ธ.


Static file support requires dart_frog ^0.0.2-dev.7 and dart_frog_cli ^0.0.1-dev.8


The /public folder must be at the root of the project and cannot be renamed. This is the only directory used to serve static files.


In production, only files that are in the /public directory at build time will be served.


Be sure not to have a static file with the same name as a file in the /routes directory as this will result in a conflict.

Using a Custom Directory โœจโ€‹

Even though Dart Frog uses the public directory for serving static files by default, you can also specify a custom directory by creating a custom entrypoint.

Create a main.dart at the root of your project with the following contents:

import 'dart:io';

import 'package:dart_frog/dart_frog.dart';

Future<HttpServer> run(Handler handler, InternetAddress ip, int port) {
const customStaticFilePath = 'api/static';
final cascade = Cascade()
.add(createStaticFileHandler(path: customStaticFilePath))
return serve(cascade.handler, ip, port);

In the above example, we're using api/static as our static file directory but you can specify a path to any directory for Dart Frog to use.