Deploying a Flask app with Vercel

[zaydloya]

Hi,

I am trying to deploy my Flask webapp on Vercel, but I am having problems with deployment. Everything runs fine locally. I am a rookie and making this kind of project for the first time, so I am not entirely sure what to override in vercel.json and under what configuration category my project falls under.

My html page loads, but whenever I click any of the buttons that run the backend functions, there are error 404s on the fetch requests.

This is my file structure

This is my vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "api/*.py",
      "use": "@vercel/python"
    },
    {
      "src": "api/static/index.html",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/",
      "dest": "/api/static/index.html"
    },
    {
      "src": "/api/(.*)",
      "dest": "/api/app.py"
    },
    {
      "src": "/(.*)",
      "dest": "/api/app.py"
    }
  ]
}

These are the routes defined in my app.py:

I appreciate any help. Thanks a lot!

[pawlean]

Hi, @zaydloya!

Looking at your vercel.json, it looks like the issue may be because:

• The "src": "/api/(.*)" route is targeting the /api/app.py file, which might not be handling all the routes properly.
• The "src": "/(.*)" route also targets /api/app.py, which could be causing conflicts.

I’m also sharing an example Flask app for anyone looking at this and wanting to see how deploying a Flask app would look like on Vercel.

Flask Hello World – Vercel

[pawlean]

Sharing a new post about how to debug 404 errors, in case it’s helpful!

Debugging 404 Errors

Introduction Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below …

[jeff9497]

Hello I have tried deploying a flask web app but I am still encoutering the 404 not found error

…
here is my file structure

…
also here is the run.py code

…
I thought the requirements.txt code would also help anyone solve my error
Flask==3.0.3
yt-dlp==2024.7.12
gunicorn==20.1.0

[pawlean]

Hi, @jeff9497!

Similar to my suggestion above, it looks like it might be related to your routes.

Deploying a Flask app with Vercel

Hi, @zaydloya! Looking at your vercel.json, it looks like the issue may be because: The "src": "/api/(.*)" route is targeting the /api/app.py file, which might not be handling all the routes properly. The "src": "/(.*)" route also targets /api/app.py, which could be causing conflicts. I’m also sharing an example Flask app for anyone looking at this and wanting to see how deploying a Flask app would look like on Vercel.

The vercel.json file seems to point to run.py, which is fine, but make sure that your Flask application is set up correctly to run on Vercel.

The line "src": "/(.*)", "dest": "/" in the routes section might be overly broad, and it’s possible that it isn’t correctly pointing to your Flask app’s routes. You could try removing or modifying this line to ensure that the routes are handled as expected.

It’d be helpful to get a minimal reproducible example for us to dig deeper.

[jeff9497]

hey i tried that but still the web page gives me the 404 error

…
here is the vercel deployment page

[jeff9497]

hi @pawlean I was able to deploy it and without the 404 not found but only after deploying it via the CLI(one is not required to use a virtual environment during this ) however with this the CSS was not loading either locally or even after deployment .
Incase I solve this I will be in touch .