Using Flask for Backend with Sveltekit as a frontend

Question

I am currently looking to develop a chatbot project using Svelte(kit) as I already have some experience with this frontend and I have reached a point where I need help.

I have used Flask for the Backend and set up a server for a HTML web application. However, I tried to serve Svelte from Flask using the idea here this page.

But whenever I do the same as the example it starts like this:

Whenever I want to update the random number it shows like this:

The only changed I made from the source code location of files:

return send_from_directory('frontend/public', path)

And the port number:

app.run(debug=True,port=8080)

Here is my directory structure:

What do I need to fix this?. What do i need to change?

I did this in HTML with no issues, however the serving and routing is different in Sveltekit. I am really trying to learn Sveltekit for frontend and then scale this into a chatbot project. My guess is that the Flask is not fetching from the webpage and therefore is not updating. This is the link of the repository which will be removed once this code works github repository

Console output after updating:

Answer 1

The basic idea of the underlying example is that the Svelte application is served via the Flask server. To do this, the code is rebuilt in the public folder using npm run autobuild.

However, you are trying to start the rollup server of the Svelte example and the Flask server in parallel. In order to ensure that the Svelte application's requests are forwarded to the Flask server, it is necessary to define a proxy.
For this I recommend installing the plugin “rollup-plugin-dev” and a corresponding configuration within the file rollup.config.js, as described in this article.

However, if you decide to create a new project due to the age of the example, you will find that Rollup has been replaced by Vite and the structure of the Svelte application has changed slightly. A plugin is no longer necessary. However, a configuration of a proxy within the file vite.config.js is necessary to redirect the request for the route to obtain the random numbers. You can find instructions for this here.

So that you can use the finished application from Flask, I also recommend installing an adapter. In this case the “adapter-static“, the result of which can be generated in the static folder of the Flask application. This requires an adjustment of the path names of the properties pages and assets in the file svelte.config.js.

When creating the backend with Flask, it is important to ensure that the static folder is not accessible with a prefix of the URL, as is standard. For this purpose, an empty string can be assigned to the attribute static_url_path when instantiating the application.
Now all you have to do is add a route that delivers the index.html page as static content as soon as the Flask server is contacted and you're done.