Fresh logo

Server configuration

In this page we discuss how the server can be configured during startup.

The signature of the primary method looks like this:

main.ts 
export async function start(routes: Manifest, opts: StartOptions = {});

Options

Manifest comes from fresh.gen.ts, so nothing to do there. opts is where things get interesting. StartOptions looks like this:

export type StartOptions = ServeInit & FreshOptions;

The good stuff is really in…

export interface FreshOptions {
  render?: RenderFunction;
  plugins?: Plugin[];
  staticDir?: string;
  router?: RouterOptions;
}

And for brevity here are the remaining two types:

export type RenderFunction = (
  ctx: RenderContext,
  render: InnerRenderFunction,
) => void | Promise<void>;

export interface RouterOptions {
  /**
   *  @default {false}
   */
  trailingSlash?: boolean;
}

Plugins

See the docs on this topic for more detail. But for completion, you can do something like this to load plugins:

main.ts 
await start(manifest, { plugins: [twindPlugin(twindConfig)] });

StaticDir

This allows you to specify the location where your site’s static assets are stored. Here’s an example:

main.ts 
await start(manifest, { staticDir: "./custom_static" });

Render

This is by far the most complicated option currently available. It allows you to configure how your components get rendered.

A detailed, concrete example of this is changing the language of the <html> tag. See the documentation here.

RouterOptions

TrailingSlash

By default Fresh uses URLs like https://www.example.com/about. If you’d like, you can configure this to https://www.example.com/about/ by using the trailingSlash setting.

main.ts 
await start(manifest, { router: { trailingSlash: true } });
← PreviousConcepts: Updating FreshNext →Integrations