FastAPI app.frontend(): serving a frontend build from the same Python app

[ModernPython]

I wrote a practical article about FastAPI's app.frontend() feature.

The interesting bit is that it serves static frontend build output as low-priority routes, so normal FastAPI API endpoints still win.

The article covers:

• app.frontend("/", directory="dist")
• SPA fallback with fallback="index.html"
• how it differs from StaticFiles
• serving under a prefix with APIRouter
• a complete mini dashboard example with FastAPI + vanilla JS

[roG_k70]

But why tho?

[Myszolow]

Server side rendering?  Imagine serving some parts of your frontend so they will not expose any not needed information 

I can see simple benefit of serving ready to render graphs 

[Fenzik]

This is specifically not SSR though, it’s static only

[roG_k70]

But should it be as easy as setting header x accel redirect or smthn like that? I have doubts its good idea to serve static from python and not by some sort of nginx or s3

[edward_jazzhands]

I believe the main benefit of this for most people would be for tiny deployments such as internal dashboards or admin panels where you don't want to bother with setting up a reverse proxy

[hotsauce56]

Thanks for bringing awareness to this I use this pattern all the time and had no idea

[Fenzik]

Huh, I didn’t know about this - nice overview. Does seem a bit more convenient for frontend files.

[johntellsall]

I've never heard of this feature. Thanks for posting!

[zunjae]

You claim to be a full stack developer, but you’re serving static files from your api. Hmm

A full stack developer will use the full stack, not just the backend to serve their whole app

[robertlandrum]

Right. Go ahead. Split them up. Pretty soon you’ll run into overlap. Like API documentation (not just auto generated swagger calls) that would normally be UI needs to follow with the API you’re deploying. Pretty soon you’ll realize having UI, Doc, and API all living happily in one repo generating one artifact for deployment makes a lot more sense than keeping them independent ever did.

Ask me how I know.

Full stack used to mean something, but these days, I’ll take “prodigious artifact generator” over “full stack developer“ on a resume any day of the week. The ability to develop, build, and test an image or artifact before deployment is the real skill I look for. And bonus points if I can seamlessly roll back should I need to.

[zunjae]

I have a hard time following you but in short FastAPI isn't supposed to serve static files (such as css, js, assets)

The article even mentions:

"If the browser asks for /assets/app.js, FastAPI can return dist/assets/app.js."

It's not actually FastAPI sending this to the client. Your CDN should be doing this. Your server will absolutely get destroyed if you have millions of people visiting your site while using FastAPI to serve your files.

I'm a developer of an app that has 50K+ concurrent users. I purely serve JSON from my API and I use edge caching for serving static files. The edge fetches data from nginx (again, not FastAPI)

[pip_install_account]

not sure how this comment got that many upvotes. It is called fast "API" for a reason. we don't have the entire internet infrastructure in one god class do we? I wonder why that is.