Deploy Azure Static Web App with Sveltekit and Fastapi - azure

Question

I am trying to deploy Sveltekit to Azure Static Web Apps with a Fastapi backend. I think I am close, but not sure if what I want to do is even possible. I went through a Microsoft article about creating a react app with an api and followed the steps outlined in the svelte-adapter-azure-swa. I am using the fastapi function from another Microsoft learn, which I have successfully deployed on its own.
The Sveltekit function sk_render and the fastapi WrapperFunction are located in an api directory and are present within the staticwebapp project.
.
My app is deployed and renders, however I receive a 404 when trying to fetch from the fastapi function.
routes/+page.svelte
<script>
import { onMount } from "svelte";
let userName = ""
onMount(async function () {
const response = await fetch('api/hello/Jon');
const data = await response.json();
console.log(data);
userName = data.name
});
</script>
<h1>Welcome to SvelteKit {userName}</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
I am not sure if there is some type of configuration I am missing in the host.json or function.json.
host.json
{
"version": "2.0",
"logging": {
"applicationInsights": {
"samplingSettings": {
"isEnabled": true,
"excludedTypes": "Request"
}
}
},
"extensionBundle": {
"id": "Microsoft.Azure.Functions.ExtensionBundle",
"version": "[2.*, 3.0.0)"
},
"extensions":
{
"http":
{
"routePrefix": "api"
}
}
}
function.json
{
"scriptFile": "__init__.py",
"bindings": [
{
"authLevel": "anonymous",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": [
"get",
"post"
],
"route": "{*route}"
},
{
"type": "http",
"direction": "out",
"name": "$return"
}
]
}
Thanks