Front-end sub-routes not served from FastAPI #161

New Issue

AtHeartEngineer · 2025-07-08T08:41:41-04:00

AtHeartEngineer commented

2025-07-08 08:41:41 -04:00

Originally created by @lime-red on 1/13/2025

Hi! I installed today and had some trouble with linking to Strava. I got there in the end, but it seems like I've missed a trick.
The details:

I used the docker-compose, with latest docker image
FastAPI answers all requests, and serves either an API response, or if the request is for /*, it serves using staticfile from /app/backend/dist.
If there is no matching staticfile, it serves a 404

Going to http://address/ will load the front-end app, and once loaded, Vue routing works fine. However if I go directly to http://address/settings, FastAPI looks for /app/backend/dist/settings, does not find it, so returns a 404. This presented a problem for the strava callback, which looked for /app/backend/dist/settings/strava/callback, did not find it, and returned a 404.

Perhaps I missed an obvious setup step. If so, we can stop here. However assuming I didn't, I found two things that might help. One is that I created symlinks in /app/backend/dist that match the vue routes, and if found, serve out the main index.html. Once the index.html is loaded in the browser, Vue router correctly handles the named route as we'd expect. I did this:

mkdir -p /app/backend/dist/strava/callback
ln -s /app/backend/dist/index.html /app/backend/dist/strava/callback/index.html

Once I did this, the callback was successfully processed. It would need symlinks to be created as part of the docker build.

The other is to add some fallback route in the FastAPI app.py that responds to any of the vue route names by directly serving the correct index.html. The example code is here: https://github.com/fastapi/fastapi/issues/130#issuecomment-624764879

A third option would be to use some reverse proxy rewrite rules, but since a reverse proxy is not already part of the default setup, I wouldn't seek to add it just for this.

Again, assuming this is a real issue and not just something I did wrong in my initial setup, do you have any thoughts on how you'd prefer to implement? I'm happy to raise a PR in either style.

*Originally created by @lime-red on 1/13/2025* Hi! I installed today and had some trouble with linking to Strava. I got there in the end, but it seems like I've missed a trick. The details: * I used the docker-compose, with latest docker image * FastAPI answers all requests, and serves either an API response, or if the request is for /*, it serves using staticfile from /app/backend/dist. * If there is no matching staticfile, it serves a 404 Going to `http://address/` will load the front-end app, and once loaded, Vue routing works fine. However if I go directly to `http://address/settings`, FastAPI looks for `/app/backend/dist/settings`, does not find it, so returns a 404. This presented a problem for the strava callback, which looked for `/app/backend/dist/settings/strava/callback`, did not find it, and returned a 404. Perhaps I missed an obvious setup step. If so, we can stop here. However assuming I didn't, I found two things that might help. One is that I created symlinks in /app/backend/dist that match the vue routes, and if found, serve out the main index.html. Once the index.html is loaded in the browser, Vue router correctly handles the named route as we'd expect. I did this: ``` mkdir -p /app/backend/dist/strava/callback ln -s /app/backend/dist/index.html /app/backend/dist/strava/callback/index.html ``` Once I did this, the callback was successfully processed. It would need symlinks to be created as part of the docker build. The other is to add some fallback route in the FastAPI app.py that responds to any of the vue route names by directly serving the correct index.html. The example code is here: https://github.com/fastapi/fastapi/issues/130#issuecomment-624764879 A third option would be to use some reverse proxy rewrite rules, but since a reverse proxy is not already part of the default setup, I wouldn't seek to add it just for this. Again, assuming this is a real issue and not just something I did wrong in my initial setup, do you have any thoughts on how you'd prefer to implement? I'm happy to raise a PR in either style.

AtHeartEngineer closed this issue

2025-07-08 08:41:42 -04:00

AtHeartEngineer added the bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug bug labels 2025-07-08 08:41:42 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/endurain#161