Serving Flutter Apps and Dart APIs with Shelf

Help Backend & Database Integration
,
1

Hey all,

I was wondering if anyone has had any experience with using Shelf to not only serve the static assets associated with a Flutter web application but also to implement an API in the same server.

What I’m hoping to achieve is to use shelf_static for all the Flutter files and shelf_router to build out a set of server side API routes say anything where the path starts with /api/ for example.

What I’m a bit confused about at the moment is how to configure everything so that my Flutter app continues to have working client side routing but it defers to my server for those API routes.

Does anyone have any experience with this at all or some pointers on how I should think about this.

Normally I’d use a different subdomain for the API but in this particular case that isn’t an option for me so any help would be appreciated.

I also feel like this setup could actually be a helpful template for the samples repo in the future as a self contained full stack flutter app example and was wondering if anyone else had an interest in that kind of a setup?

2

Using shelf to both serve static content and API end points is its bread & butter.

There seem to be any number of examples on how to do this online, here is just one of the first articles that came up that covers exactly what you are asking for:

But I’m not sure I understand why you are bringing up routing with a Flutter app? These are 2 very different things, even if the Flutter app is the only client for your REST API and static content.

3

I think maybe I didn’t do a good job of explaining myself here perhaps because while that link seems to explain how to serve both static files and server side routes with Shelf that isn’t the part I was particularly interested in.

What I am describing here is eventually ending up with a domain let’s say example.com where if you visit the root path so example.com/ then the shelf server will serve a flutter web application.

Flutter being what it is as a client side framework ALSO has client side routing which I want to use for any routes that are a part of my
flutter app.

However I ALSO want any URL that begins with example.com/api/ to be ignored by Flutter’s client side routing and instead handled via that same Shelf server.

The specific thing I’m confused about here is how to tell Flutter to not try to perform client side routing for any URL that has a path that begins with /api/ which unless I missed something major none of that seemed to be covered in the link you shared unfortunately.

But hopefully that makes more sense, I want to use a combination of client and server side routing depending on the URL path in question.

4

I think I see where you are getting confused.
Flutter web apps are essentially SPAs so it doesn’t matter what URLs are serve side on the domain that you are serving the flutter web app from, the browser is not going to fetch URLs that the flutter app uses for its internal routing, those URLs are manipulated within the browser by the flutter app, they aren’t fetched from the serve by the browser because as I said the flutter app is an SPA.

For your own sanity, you might still wan to segregate the url the flutter app is served on away from the root url, say example.com/app (youll need to tweak the app per instructions inside the generated index.html) but thats just for your human convenience, it’s not going to affect what’s fetched by the browser from your shelf server

Hope that helps explain it for you.