Deploying svelte kit with flask as backend in one single project

[simply-zaki]

i deployed svelte kit (which works) with API folder that has main.py using flask which is used for all API routes but whenever i use it i get 404 error (from vercel not sveltekit)

here is the top of main.py, folder structure and vercel.json

vercel.json:

{
    "rewrites": [
      { "source": "/api/(.*)", "destination": "/api/main" }
    ]
  }

i noticed in next.js and flask example that they did not use any vercel.json file and dealt with routing in the config of next js, could this be the source of my issue?

[simply-zaki]

i solved the issue by renaming main to index and adding “/api/” before every route in the flask python code and removing the static and template folder stuff in app params

[pawlean (Pauline P. Narvas)]

Thanks for coming back and sharing your solution!

For anyone else looking, we’ve also created this community post on other steps you can take to debug 404 errors.

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…

[austeane]

Hey, I’m having related issues @simply-zaki and @pawlean
And I’m an experienced data engineer but very new to anything that touches front end, especially making front end and backend talk to each other.
I’ve got my app working locally, with flask and svelte both spun up in different terminals, and I’ve got it deployed and running without 404, but I can’t get my app to talk to each other, getting 500 errors, and it seems like my flask app isn’t receiving anything.

This seems similar enough to my issue that it would be best to add a comment, but happy to make a seperate post.
How can I fix this, or at least can I confirm that flask is running in vercel?

I want to run svelte, flask, with a sqlite db. Also, let me know if this is even a sensible thing to do.

Here is my project structure

├── README.md
├── __pycache__
│   └── config.cpython-39.pyc
├── app
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   ├── models.cpython-39.pyc
│   │   └── schemas.cpython-39.pyc
│   ├── models.py
│   ├── routes
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   ├── drills.py
│   │   └── practice_plans.py
│   └── schemas.py
├── config.py
├── cypress
│   ├── downloads
│   ├── e2e
│   │   └── drill_creation.cy.js
│   ├── fixtures
│   │   └── example.json
│   └── support
│       ├── commands.ts
│       └── e2e.ts
├── cypress.config.js
├── instance
│   └── app.db
├── jsconfig.json
├── migrations
│   ├── README
│   ├── __pycache__
│   │   └── env.cpython-39.pyc
│   ├── alembic.ini
│   ├── env.py
│   ├── script.py.mako
│   └── versions
│       ├── __pycache__
│       └── d619d994ebdc_.py
├── package-lock.json
├── package.json
├── playwright.config.js
├── pnpm-lock.yaml
├── requirements.txt
├── src
│   ├── app.d.ts
│   ├── app.html
│   ├── lib
│   │   ├── images
│   │   └── vitals.js
│   └── routes
│       ├── +layout.server.js
│       ├── +layout.svelte
│       ├── +page.js
│       ├── +page.svelte
│       ├── Counter.svelte
│       ├── Header.svelte
│       ├── api
│       ├── drills
│       ├── practice-plans
│       └── styles.css
├── static
│   ├── favicon.png
│   └── robots.txt
├── svelte.config.js
├── tests
│   ├── test.js
│   └── test_api.py
├── tsconfig.json
├── vercel.json
└── vite.config.js

Here are some file snippets:
app/init.py

app = Flask(__name__)
app.config.from_object('config.Config')

db = SQLAlchemy(app)
ma = Marshmallow(app)
migrate = Migrate(app, db)

CORS(app)

from app.routes.drills import drills_bp
from app.routes.practice_plans import practice_plans_bp

app.register_blueprint(drills_bp, url_prefix='/api/drills')
app.register_blueprint(practice_plans_bp, url_prefix='/api/practice-plans')

app/routes/init.py

(Some duplication here, but shouldn’t cause issues, and doesn’t locally)

from flask import Blueprint

main_bp = Blueprint('main', __name__)

def register_blueprints(app):
    from app.routes.drills import drills_bp
    from app.routes.practice_plans import practice_plans_bp

    app.register_blueprint(drills_bp, url_prefix='/api/drills')
    app.register_blueprint(practice_plans_bp, url_prefix='/api/practice-plans')

app/routes/drills.py

drills_bp = Blueprint('drills', __name__)

@drills_bp.route('/', methods=['POST'])
def create_drill():

and

vercel.json

{
  "rewrites": [
    { "source": "/api/drills/(.*)", "destination": "/api/drills" },
    { "source": "/api/practice-plans/(.*)", "destination": "/api/practice-plans" }
  ]
}

And I’m getting 500 errors whenever I try to use the flask backend.

Error occurred while sending request: TypeError: fetch failed
    at node:internal/deps/undici/undici:13178:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async POST (file:///var/task/.svelte-kit/output/server/entries/endpoints/api/drills/_server.js:9:22)
    at async render_endpoint (file:///var/task/.svelte-kit/output/server/index.js:214:20)
    at async resolve2 (file:///var/task/.svelte-kit/output/server/index.js:3495:22)
    at async respond (file:///var/task/.svelte-kit/output/server/index.js:3384:22)
    at async Server.default (file:///var/task/.svelte-kit/vercel-tmp/index.js:47:3)
    at async Server.<anonymous> (/opt/rust/nodejs.js:8:4242) {
  [cause]: Error: connect ECONNREFUSED 127.0.0.1:5000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -111,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 5000
  }
}