[SOLVED] Flask loads the same index.js file when running from different project

Flask loads the same index.js file when running from different project

I'm encountering the following problem when trying to run a flask app locally: I've used URL_FOR and directly tried specifying the path of my index.js file, but it always loads a different index.js when I try and run the flask app locally.

Folder setup:

folder with source code of sample projects from a course i'm doing
-project1
--templates
---index.html
--static
---index.js
--application.py
-project2
--templates
---index.html
--static
---index.js
--application.py
-project3
--templates
---index.html
--static
---index.js
--application.py
-...

--> Say I'm in project2 now in my terminal. I'm running export FLASK_APP=application.py, then python3 -m flask run and it serves the app on localhost 5000 as per:

* Serving Flask-SocketIO app "application.py" * Forcing debug mode off

Looks OK until now. However, here's what's interesting –> when I navigate to http://127.0.0.1:5000/, and inspect, it always references the index.js in my /project1/static folder.

What I'm doing in index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="{{ url_for('static', filename='index.js') }}"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <title>Vote</title>
    </head>
    <body>
        <ul id="votes">
        </ul>
        <hr>
        <button data-vote="yes">Yes</button>
        <button data-vote="no">No</button>
        <button data-vote="maybe">Maybe</button>
    </body>
</html>

What my index.js looks like:

document.addEventListener('DOMContentLoaded', () => {

    // Connect to websocket
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    // When connected, configure buttons
    socket.on('connect', () => {

        // Each button should emit a "submit vote" event
        document.querySelectorAll('button').forEach(button => {
            button.onclick = () => {
                const selection = button.dataset.vote;
                socket.emit('submit vote', {'selection': selection});
            };
        });
    });

    // When a new vote is announced, add to the unordered list
    socket.on('announce vote', data => {
        const li = document.createElement('li');
        li.innerHTML = `Vote recorded: ${data.selection}`;
        document.querySelector('#votes').append(li);
    });
});

What my application.py looks like:

import os
import requests

from flask import Flask, jsonify, render_template, request
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config["SECRET_KEY"] = os.getenv("SECRET_KEY")
socketio = SocketIO(app)

@app.route("/")
def index():
    return render_template("index.html")

@socketio.on("submit vote")
def vote(data):
    selection = data["selection"]
    emit("announce vote", {"selection": selection}, broadcast=True)

if __name__ == '__main__':
    app.run()

Answers from my end

I found a funny way to fix it myself: if I just rename it to "main.js" and reference that, it works.

Questions

Any idea what could be wrong here? Am I referencing index.js in a wrong way?
It can't be the case that you simply can't have multiple index.js files in one parent folder… right?

Solution

IMO, this is because the browser will cache static files. Since all your JavaScript files are named index.js, the path in all your projects will be /static/index.js. The browser look at the static path, "oh, it's the same file! So I just read from cache".

So the only thing you need to do is clear your browser cache (maybe simply with Ctrl + F5).