Svelte +FastAPI ‘hello world’

Here’s a very quick (and probably bad) guide on how to integrate FastAPI with a Svelete front end. Ideally you’d entirely separate the two, with Svelte served independently of Fast API, but if you’re like me and you want a less than perfect but easier to manage solution, maybe this is it.

I wanted to use Svelte as the front end to either Flask, or Fast API. I tried a few ways to do it and found a setup that serves Svelte using FastAPI (actually starlette’s) StaticFiles in html mode.

1. Setup a very basic Hello World with Fast API — return a random number which we’ll later display in Svelte. I called mine `main.py`

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from starlette.responses import RedirectResponse
import random
app = FastAPI()
@app.get("/rand")
async def rand():
  return random.randint(0, 100)

2) Create a folder inside your FastAPI project for Svelte, I called mine ‘front’. Then git clone the svelte template into that folder. When you’re done, you’ll need to call `npm install` inside your svelte app directory, you can then check it works with `npm run dev`. Here’s the directory tree:

3) In main.py we’re going to statically serve the `front` and ‘front/build’ directories, then redirect all root requests to that new static `front` endpoint. In main.py, add the following:

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from starlette.responses import RedirectResponse
import random
app = FastAPI()
app.mount("/front", StaticFiles(directory="front/public", html=True), name="front")
app.mount("/build", StaticFiles(directory="front/public/build"), name="build")
@app.get("/rand")
async def hello():
   return random.randint(0, 100)
@app.get('/')
async def front():
   return RedirectResponse(url='front')

4) Lets add a function to our Svelte app which calls the /rand endpoint we made and gets a random number from our FastAPI and displays it.

<script>
let rand = -1;
function getRand() {
fetch("../rand")
.then(d => d.text())
.then(d => (rand = d));
}
</script>
<main>
<h1>Hello {rand}!</h1>
<button on:click={getRand}>Get a random number</button>
</main>

5) You need to build you Svelte app on each change — as its being served via FastAPI. Type `npm run build inside front directory.

6) Check out your app — it should work

There are certainly better ways of doing this — in Flask it’s easier to setup using serve from directory. This was inspired by a post here