Flask frontend is working properly, however the svelte app inside is not, what am I missing

Question

I have been strugling with this example https://github.com/cabreraalex/svelte-flask-example. I created a simpler example here When I run the server.py, I get the template, in the source code I even see the main.js. When I go to /rand I see the randomly generated number, however I am missing something, as I can not get the App.svelte to work. This is what the server.py contains:

@app.route('/home')
def base():
    return send_from_directory('templates/', 'index.html' )

@app.route('/static/<path:path>')
def home(path):
    return send_from_directory('', path)

@app.route('/rand')
def rand():
    return str(randint(0,100))

The index.html has the <script src="../static/main.js" defer></script>

The main JS import the svelte App

import App from './App.svelte'

const app = new App({
    target: document.querySelector('#svelte-app')
})

The Svelte app itself:

<script>
    let rand = -1

    function getRand(){
        fetch('./rand')
            .then(d => t.text())
            .then(d => (rand = d));

    }
</script>

<h1> your number is: {rand}</h1>
<button on:click={getRand}>Get a random number</button>

I am brand new to the combination of flask and JS, so I am sorry in advance.

Answer 1

I am assuming that you installed Node.js when creating your Svelte project and used the instructions on the Svelte website.

With Svelte it is not possible to import your source code directly into an HTML page. It is necessary to build the project first with npm run build. This will generate the final code, which can be found in the "public/build" folder. It also happens regularly when you start the development server with npm run dev and modify one of the files.
If you have followed this step, you can serve all files from the "public" directory and its subdirectories with Flask. Because that's where the final product is for release.

In order to also forward requests to your Flask server with the development server, it is necessary to install a plugin and define a proxy. I used the "rollup-plugin-dev" plugin and made the simple modification below to the "rollup.config.js" file.

import localdev from 'rollup-plugin-dev';

// ...

    plugins: [
        // ...

        // This is the proxy definition
        !production && localdev({
            dirs: ['public'],
            host: 'localhost',
            port: 8080,
            proxy: [
                {
                    from : '/rand',
                    to: 'http://localhost:5000/rand'
                }
            ],
        }),

        // This line is now no longer needed.
        // In dev mode, call `npm run start` once
        // the bundle has been generated
        // !production && serve(),

        // ...
    ], 
    // ...

You can then simplify your Flask application a bit. Here the argument static_folder should point to the "public" folder of your svelte application.

from flask import Flask
from random import randint

app = Flask(__name__,
    static_url_path = '',
    static_folder='../client/public/'
)

@app.route('/')
def index():
    return app.send_static_file('index.html')

@app.route('/rand')
def rand():
    return str(randint(0,100))

As an aside, I have to tell you that there is a small typo within a then block of your fetch call. The following call should not throw an error.

fetch('./rand')
    .then(r => r.text())
    .then(d => (rand = d));

I wish you fun and success in implementing your project.