0

I have a flask project and I have a templates folder and a root folder that holds my files.

The structure looks like this:

flask_py_Javascript_sandbox/
    templates/
        form.html
    venv/
    app.py
    formjs.js

My form.html looks like this:

<!DOCTYPE html>
<html>
<body>

// Test form

<script src="../formjs.js"></script> // I have also tried "formjs.js", "/formjs.js"
<script>
    myFunc();
</script>

My formjs.js file looks like this:

function myFunc() {
    alert("works");
}

I have looked at these 2 questions but they seem to have a slightly different issues. Issues where I don't know if their fix works for my flask project:

How to call external JavaScript function in HTML and Javascript in different folder than HTML

This seems like something simple but all tutorials I've seen just tell you what to type in your files but do not give you the nuances of folder structure.

Any help is appreciated.

Here is a screenshot of my folder structure as my text is causing some confusion:

Folder structure

Funlamb
  • 551
  • 7
  • 20
  • For relative references the URLs are relevant and not the folders. In many cases the folder structure and the URL structure may be the same, but it seems it's not the same in your case. What are the URLs of the HTML and JS files? In general you shouldn't be using relative URLs anyways, but always use absolute URLs (beginning with `/`), then it doesn't matter in which folder/URLs the the HTML and JS are in. In your case it seems the absolute URL of the JS file seems to be `/venv/formjs.js`, so use `src="/venv/formjs.js"`. – RoToRa Mar 08 '22 at 08:24
  • ... Maybe I'm misreading the file structure. If the JS file is not in `venv` but in the root, use `/formjs.js`. – RoToRa Mar 08 '22 at 08:31
  • I'm running this through my computer right now. I just type `flask run` and let it get setup in `http://127.0.0.1:5000/`. Is that going to make a difference? – Funlamb Mar 08 '22 at 17:52

1 Answers1

0

The problem was the fact that I was hosting the development site on my own machine. To import a JS file it most be in a static folder. This is not made clear in a lot of tutorials because it is handled for you.

Folder structure should have a static folder and should look like this

Root
    -static
        file.js
    -templates
        page.html
    ...

To load your js file into your html you need to import it like any other script but you will need to add the url_for.

<script src="{{ url_for('static', filename='file.js') }}" type="text/javascript"></script>

Better explained here.

Used in an answer here.

If you are like me you didn't know you needed a static file and no amount of searching would have help.

Funlamb
  • 551
  • 7
  • 20