CODEWITHSUNDEEP
sveltefastapi
shadesofdarkred
shadesofdarkred

Reputation: 465

Serve static files from root in FastAPI

I'm trying to have FastAPI work with Svelte. I've built the static files with Svelte and now I'm trying to serve them from FastAPI. The problem is that the built Svelte files reference e.g. global.css from root, which means I can't have them mounted on a subfolder.

Instead, I have to mount them on root:

app.mount("/", StaticFiles(directory="web/public", html=True), name="web")

However, this makes anything defined in routes (function decorators) inaccessible.

Is it possible have either both static files and functions defined? Either,

a) routes take precedence and if there's no route, it tries to read from static directories

b) static directories take precedence, and I specify an exclude path, which goes to routes instead

Upvotes: 22

Views: 11063

Answers (3)

pietz
pietz

Reputation: 2533

I think there's an even easier solution than those posted here: Simply mount your static folder after the definition of your other endpoints.

app = FastAPI()

@app.get("/api/hello")
async def hello():
    return "hello from fastapi"

app.mount("/", StaticFiles(directory="build", html=True), name="frontend")

You can now access the website served as a static site on root while also accessing the endpoints you might want to use for backend functionality.

Upvotes: 19

Lee Hayford
Lee Hayford

Reputation: 1

You can also do this without creating an "outer (root) app"; as long as you mount the static files after you include your routers.

assuming you have:

  • fastAPI app in "project/main.py"
  • svelte stuff in "project/client"
  • "a_router" in a file "project/subfolder/do_stuff.py"

main.py

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from starlette.responses import RedirectResponse

from subfolder.do_stuff import a_router 

app = FastAPI()
app.include_router(a_router)

app.mount("", StaticFiles(directory="client/public", html=True), name="client")
app.mount("/build", StaticFiles(directory="client/public/build"), name="build")

@app.get('/')
async def client():  return RedirectResponse(url="client")

Upvotes: 0

ldrg
ldrg

Reputation: 4511

Create an outer (root) FastAPI app and mount the StaticFiles app and your existing FastAPI app inside of it.

# Your main app must be first!
app = FastAPI(title="my app root")

api_app = FastAPI(title="my existing api")
api_app.include_router(my_existing_router)
app.mount('/api', api_app)

app.mount('/', StaticFiles(directory="static", html=True), name="static")

The order of mounting of the app objects seems to matter. For the OpenAPI docs, you'll have a /docs for the root app, and a /api/docs for your API app.

Upvotes: 21

Related Questions