---
title: Custom Backend
description: How to use custom backends with Jaspr.
---

---

In the standard configuration, `jaspr` creates its own http server to handle incoming requests and
render your components. For this it uses the popular `shelf` package.

If you want, you can replace the server handling with your own backend setup.
This allows also the use of your favorite Dart backend framework.

<Info>
Since `jaspr` is built with `shelf`, this works best when the backend framework is also compatible with shelf.
However you can work around this if that is not the case.
</Info>

There are two main functions that enable this:

- `Handler serveApp(AppHandler handler)` bundles everything jaspr does on the server into a custom shelf handler.
  The handler can then be passed to your backend or server implementation.
- `String renderComponent(Component app)` directly renders the provided component into an HTML string.

<Warning>
When using your own backend setup, you can still do `jaspr serve`, however auto-reload won't work
on the server automatically.
</Warning>

## Shelf

[`shelf`](https://pub.dev/packages/shelf) is a widely-used package for building server apps with dart that is
maintained by the Dart team.

> Shelf makes it easy to create and compose web servers and parts of web servers.

Since jaspr used shelf internally, it is pretty straightforward to build a custom backend for jaspr using
shelf.

```dart title="lib/main.server.dart"
void main() async {
  var handler = serveApp((request, render) {
    // Optionally do something with `request`
    print("Request uri is ${request.requestedUri}");
    // Return a server-rendered response by calling `render()` with your root component
    return render(App());
  });

  // provide `handler` to your app, e.g.
  await shelf_io.serve(handler, InternetAddress.anyIPv4, 8080);
}
```

Check out our [backend_shelf example](https://github.com/schultek/jaspr/tree/main/examples/backend_shelf)
to see this in action.

**Make sure** that you set the base path of your app when mounting the `serveApp` handler to
any other route prefix than `/`, otherwise your static resources like `styles.css` or `main.dart.js`
can't be loaded correctly. Add the `<base href="/<route_prefix>/">` tag to the `head` of your
`index.html`, as demonstrated in the example.

## Serverpod

[Serverpod](https://serverpod.dev/) is an open-source, scalable app server, written in Dart for the Flutter community.
You can use Serverpod and Jaspr together using our official [**Serverpod Integration**](https://pub.dev/packages/jaspr_serverpod)
to build robust and scalable fullstack websites leveraging Serverpods builtin webserver and additional components.

To get started with combining Jaspr and Serverpod head over to the [documentation of the integration package](https://pub.dev/packages/jaspr_serverpod)
or check out the [example](https://github.com/schultek/jaspr/tree/main/examples/backend_serverpod).

## Dart Frog

[`dart_frog`](https://dart-frog.dev/) is a minimalistic backend framework for Dart. You
can combine it with jaspr to build powerful fullstack web applications that use dart_frog for managing
the backend api and jaspr for rendering the frontend app.

Check out our [backend_dart_frog example](https://github.com/schultek/jaspr/tree/main/examples/backend_dart_frog)
to see this in action.

With this, a `dart_frog` route that renders a jaspr component can be as simple as:

```dart title="routes/[my_component_path]/index.dart"
Future<Response> onRequest(RequestContext context) {
  return renderJasprComponent(context, MyComponent());
}
```