Site refreshes after i INSERT a DB Entry

[DevKame]

In one of my components you can create a developer:

const dev =
    {
        name: devName.value,
        role: "DEV",
        frontend: devRoles.frontend,
        backend: devRoles.backend,
        ai: devRoles.ai,
    }
    const response = await fetch("http://127.0.0.1:5000/developers",
        {
            method: "post",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(dev),
            // mode: "cors",
        }
    );
    const responseData = await response.json();

The development server validates those entries and creates a new row in my kman.db (using Python / Flask and Pythons sqlite3 module)

Whenever i send a post request to the server and after creation within the database, my site refreshes. I commented the part of the actual creation within the database out and there were no refreshes, so after looking for this reason for hours i am about to think the following: i use Vue CLI, whenever i change something within my project, the site refreshes. Is it possible that, with every new entry, the kman.db is updated, Vue notices those updating and invokes this refreshing based on that? If so, after quick researching, i looke for a solution to exclude any files from webpack and found this:

I have to create a webpack.config.js with the following content:

module.exports = {
    watchOptions: {
        ignored: /kman\.db/,
    }
};

But no changes happened. For testing i do both, creating a new entry within my app aswell as manually deleting entries from kman.db by using the VSCode extension "SQLite3 Editor" by yy0931. In both cases, a refresh happens.

Then i tried adding this code to the already existing "vue.config.js" what made it look like this:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src'),
      },
    },
    watchOptions: {
        ignored: /kman\.db/,
    }
  },
})

But also this does not help, i tried to change the value from /kman.db/ to ""*/kman.db", aswell as "./public/backend/kman.db", within both, vue.config.js and webpack.config.js, but still getting refreshes.

What could cause a refresh guys im so exhausted by now and out of ideas.

Key-points:

• There are not preflight or "real" requests that cause any 3xx status codes returned by the server
• The Button that invokes the creation and request is neither part of a nor has the type="submit"

Just in case here is the code of my backend:

Flask-Server server.py:

[...]
@app.post("/developers")
def try_creating_developer():
    response = make_response()
    response.headers["Content-Type"] = "application/json"
    validation_result = developer.developer_creation_process(request.json)
    developer.create_developer(request.json)
    return json.dumps(validation_result)
[...]

developer.py:

import sqlite3

def developer_creation_process(devdata):
    return validate_dev_data(devdata)


def validate_dev_data(devdata):
    VALIDATION_TASK = {
        "success": True,
    }

    return VALIDATION_TASK

    #( Name darf nicht doppelt sein)

def create_developer(devdata):
    con = sqlite3.connect("kman.db")
    cursor = con.cursor()
    query = "INSERT INTO devs" \
            "(name, role, frontend, backend, ai)" \
            f"VALUES ('{devdata['name']}', '{devdata['role']}', {devdata['frontend']}, {devdata['backend']}, {devdata['ai']})"
    cursor.execute(query)
    con.commit()
    con.close()

This is what the folder structure looks like:

I dont know why but im so convinced that i have to remove kman.db from the "watching process" of vue but i may be wrong. LEt me know if you need any background info!!

[LinusBorg]

The bigger problem here is that you have your backend source code in the /public folder, which means it gets moved to your /dist folder when you build your vue app. When you then deploy. Your Vue app from the /dist folder, you have now exposed your backend source code to everyone on the internet.

Move your backend out of there!!

That will likely also fix your problem

[DevKame]

Thanks for the warnings. IMO there is neither something sensitive in there nor its nothing i will ever deploy. Im just playing around and trying out using python for backend. i dont see the problem with that but i might be pretty naive. Can you elaborate what makes the posted code so "dangerous" for me?

[LinusBorg]

If this is just a local experiment, you're fine of course.

If you ever deployed this and had data of various users/customers in your database, I'd say it might be a problem if anyone could just download the whole kman.db file from your webserver, wouldn't you agree?

Just to iterate: Vue VLI / webpack observes the public folder and refreshes on changes. So moving your backend folder out from /public one level up will both solves your initial problem and make your app not expose the whole database.

[DevKame]

If you ever deployed this and had data of various users/customers in your database, I'd say it might be a problem if anyone could just download the whole kman.db file from your webserver, wouldn't you agree?

I totally do :)

Thank your for that answer. I understand the solution of moving the mentioned file outside of the public folder.

What bothers me is that i have no control over individual file - changes. Is there no way to tell the CLI / Webpack to ignore any filechanges using vue.config.js or any other?

I stumbled across multiple solutions that unfortunatly dont work like the watchOptions - key or devServer etc.
While researching i read multiple statements about Vue CLI no longer beeing maintained and this might be the reason for it not recognizing my changes within vue.config.js. Is there anything true about that? And that any developer should switch (Vite was almsot always mentioned as alternative)

[LinusBorg]

While researching i read multiple statements about Vue CLI no longer beeing maintained and this might be the reason for it not recognizing my changes within vue.config.js. Is there anything true about that? And that any developer should switch (Vite was almost always mentioned as alternative)

It's in "maintenance mode", which means serious problems should get fixed, but it won't be developed any further. As indicated by the big yellow box on the landing page:

https://cli.vuejs.org/

It also links to the vue docs showing recommendations for Vite / create-vue. See: https://vuejs.org/guide/scaling-up/tooling.html#vite

So yes, starting a new project with the Vue CLI is highly discouraged.

I'd say that what you want is likely still achievable. I haven't touched webpack in so long though (thankfully), that I have no idea how, and am not interested in re-learning ^^.

[DevKame]

Haha, thnak your for the honest answer :D

I jut found a guide on how to migrate from vue CLI to Vite and monday im gonna try it out.
To be prepared for the origin problem of my post:
While you dont know how to solve that problem with webpack, because you didnt use it for a long time, i assume you might have an idea how to make Vite ignore single files while auto-reloading?