Deploying svelte kit with flask as backend in one single project

simply zaki · 2024-08-20 04:42:43.632828+00

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 ![179_full_capture (2024_08_20)|690x387, 100%](upload://mBS69g0ZwrMMichM7ZqZR4hyYG9.png) 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?

Hey, I'm having related issues and 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

12├── README.md3├── __pycache__4│   └── config.cpython-39.pyc5├── app6│   ├── __init__.py7│   ├── __pycache__8│   │   ├── __init__.cpython-39.pyc9│   │   ├── models.cpython-39.pyc10│   │   └── schemas.cpython-39.pyc11│   ├── models.py12│   ├── routes13│   │   ├── __init__.py14│   │   ├── __pycache__15│   │   ├── drills.py16│   │   └── practice_plans.py17│   └── schemas.py18├── config.py19├── cypress20│   ├── downloads21│   ├── e2e22│   │   └── drill_creation.cy.js23│   ├── fixtures24│   │   └── example.json25│   └── support26│       ├── commands.ts27│       └── e2e.ts28├── cypress.config.js29├── instance30│   └── app.db31├── jsconfig.json32├── migrations33│   ├── README34│   ├── __pycache__35│   │   └── env.cpython-39.pyc36│   ├── alembic.ini37│   ├── env.py38│   ├── script.py.mako39│   └── versions40│       ├── __pycache__41│       └── d619d994ebdc_.py42├── package-lock.json43├── package.json44├── playwright.config.js45├── pnpm-lock.yaml46├── requirements.txt47├── src48│   ├── app.d.ts49│   ├── app.html50│   ├── lib51│   │   ├── images52│   │   └── vitals.js53│   └── routes54│       ├── +layout.server.js55│       ├── +layout.svelte56│       ├── +page.js57│       ├── +page.svelte58│       ├── Counter.svelte59│       ├── Header.svelte60│       ├── api61│       ├── drills62│       ├── practice-plans63│       └── styles.css64├── static65│   ├── favicon.png66│   └── robots.txt67├── svelte.config.js68├── tests69│   ├── test.js70│   └── test_api.py71├── tsconfig.json72├── vercel.json73└── vite.config.js

Here are some file snippets: app/init.py

12app = Flask(__name__)3app.config.from_object('config.Config')45db = SQLAlchemy(app)6ma = Marshmallow(app)7migrate = Migrate(app, db)89CORS(app)1011from app.routes.drills import drills_bp12from app.routes.practice_plans import practice_plans_bp1314app.register_blueprint(drills_bp, url_prefix='/api/drills')15app.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)

1from flask import Blueprint23main_bp = Blueprint('main', __name__)45def register_blueprints(app):6    from app.routes.drills import drills_bp7    from app.routes.practice_plans import practice_plans_bp89    app.register_blueprint(drills_bp, url_prefix='/api/drills')10    app.register_blueprint(practice_plans_bp, url_prefix='/api/practice-plans')11

app/routes/drills.py

12drills_bp = Blueprint('drills', __name__)34@drills_bp.route('/', methods=['POST'])5def create_drill():

and

vercel.json

1{2  "rewrites": [3    { "source": "/api/drills/(.*)", "destination": "/api/drills" },4    { "source": "/api/practice-plans/(.*)", "destination": "/api/practice-plans" }5  ]6}

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

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