Python api integration in html website erroring

[felipegprazeres]

Im trying to make a simple filtered search, which is using a json file as database and a python file to filter through this json. Everything works when i run both the “api” and the html in my computer, but upon uploading it to vercel, problems begin. There are 3 situations happening:
Situation 1: vercel.json only states html file

{
  "version": 2,
  "routes": [
    { "src": "/(.*)", "dest": "index.html" }
  ]
}

when this is my vercel.json file, the website loads as usual, with my html running, but, as expected, apis dont run.
Situation 2: vercel.json states the routes to api

{
    "version": 2,
    "routes": [
        {
            "src": "/api/categories",
            "dest": "/api/categories/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/courses",
            "dest": "/api/courses/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/institutions",
            "dest": "/api/institutions/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/filter_course",
            "dest": "/api/filter_course/index.py", # Correct dest paths to index.py
        },
        { "src": "/(.*)", "dest": "index.html" }
    ]
}

In this situation, the website still works, but api still wont work at all
Situation 3: inserting “builds” in json file:

{
    "version": 2,
    "builds": [
        {
            "src": "api/categories/index.py",  # Correct src paths to index.py in subdirectories
            "use": "@vercel/python"
        },
        {
            "src": "api/courses/index.py",
            "use": "@vercel/python"
        },
        {
            "src": "api/institutions/index.py",
            "use": "@vercel/python"
        },
        {
            "src": "api/filter_course/index.py",
            "use": "@vercel/python"
        }
    ],
    "routes": [
        {
            "src": "/api/categories",
            "dest": "/api/categories/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/courses",
            "dest": "/api/courses/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/institutions",
            "dest": "/api/institutions/index.py", # Correct dest paths to index.py
        },
        {
            "src": "/api/filter_course",
            "dest": "/api/filter_course/index.py", # Correct dest paths to index.py
        },
        { "src": "/(.*)", "dest": "index.html" }
    ]
}

Upon applying this new project with “builds” the website just wont work, i’ll get an:

404: NOT_FOUND
Code: NOT_FOUND
ID: gru1::n57kj-1738951380239-8bd23b211e1b

Files paths are as following:

├── api/
│   ├── categories/
│   │   └── index.py     # Renamed from categories.py
│   ├── courses/
│   │   └── index.py        # Renamed from courses.py
│   ├── institutions/
│   │   └── index.py    # Renamed from institutions.py
│   └── filter_course/
│       └── index.py     # Renamed from filter_course.py
├── output_multi_sheet.json
├── index.html
├── vercel.json

I’ve tried running it with the api separated into different files as stated in the above path, and as one single file, but neither work.

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

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 the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.