CSS and JS returning 404 when linking in HTML (Python Flask)

Code Help HTML/CSS/JS
1

I hate javascipt. GAH! but its a fact of life with web apps.

im running into an issue where my .css and .js files are getting 404’d even though ive stared at the paths and file names for an hour and cannot fathom why my index.html cannot find the scripts.

I AM NOT a web developer, I like to lurk on the back end. Are any webbies around that can smack me with a clue-bat and tell me what basic stupid I’m doing here?

here is my replit, it’s public. part of a larger struggle to record audio, compress to mp3 and then send it to various API AI calls. once I get this solved it’s all backend which im good at.
This is step 1, get saving as wav files. mp3 conversion will be another battle.

https://replit.com/@vincegeisler/Webaudiorecorderwav

thanks and gratitude for any help here.

2

This should be posted in code help.

1 Like
3

apologies, my mistake. i posted it here, because i was posting the full replit, but i guess i misunderstood.

4

Move your js and css folders into a folder called static. Then on line 10 of main.py:

app = Flask(__name__, '/static')

and in index.html:

<link rel="stylesheet" href="../static/css/style.css">

<script src="../static/js/script.js"></script>

Not sure if this will fix anything, but if it does, please mark my post as solution so the thread can close.

3 Likes
5

nope still 404’ing

INFO:werkzeug:172.31.128.1 - - [20/Apr/2023 19:16:08] “GET / HTTP/1.1” 200 -
INFO:werkzeug:172.31.128.1 - - [20/Apr/2023 19:16:08] “GET /static/js/script.js HTTP/1.1” 200 -
INFO:werkzeug:172.31.128.1 - - [20/Apr/2023 19:16:08] “GET /static/css/style.css HTTP/1.1” 200 -
INFO:werkzeug:172.31.128.1 - - [20/Apr/2023 19:16:08] “GET /css/style.css HTTP/1.1” 404 -

6

You’re supposed to delete this part on line 6 in templates/index.html:

<link rel="stylesheet" href="css/style.css">

And make sure to leave this part on line 6:

<link rel="stylesheet" href="../static/css/style.css">
1 Like
7

yup thanks! i fatfingered that.

works now… Thanks!

1 Like
8

Please mark my first post as the solution instead, as it explains to put files in the static folder.

2 Likes
9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.