0

I'm trying to link my JavaScript file to my HTML file in Visual Studio Code, and I am getting a 404.

This problem doesn't happen for just JavaScript; my CSS external link also stopped working.

General Info

I am using Visual Studio Code. Within it, I am using Flask.

JS File Info

forecast.js file under /javascript/forecast.js

Inside my HTML, I have <script src="/javascript/forecast.js"></script> just before the closing body tag. When I hover over the src

Follow link

link in VSCode, and click "Follow Link", it takes me to the correct file. So I don't think the issue is there. But when I run the Flask project, I get a 127.0.0.1 - - [08/Aug/2022 11:27:22] "GET /javascript/forecast.js HTTP/1.1" 404 - error in the terminal. The website still runs, but no js is applied.

CSS File Info

This one is slightly different. I believe this is some sort of compiling error. I haven't ever had to deal with this problem before... my CSS used to work just fine, but one day it started acting up. In my HTML file, I have <link rel="stylesheet" href="/static/styles.css">. Again, when I hover over the link and click "Follow link", it takes me to the correct css file. And in styles.css I have tons of styles. Now these two link fine, and the webpage loads properly.

However, for some reason, if I remove anything inside styles.css, the webpage runs the exact same with no changes. I don't have the CSS anywhere else, so somehow the website is taking a previous version of the CSS file and only using that, instead of the newest version. This is problematic, because I am unable to update any of my CSS... as it just looks for the non-updated version.

On top of this, if I remove the <link> to the css, the page stops functioning. I don't know if this is some strange compiling error, but not sure how to fix it.

I have checked numerous stack overflow pages on both issues, and none of them help. Both inline JS and CSS work, but every time I try external, it doesn't function. Any help is appreciated. Let me know if more details are required.

Editing my Edit

Thank you for explaining. I've tried to use some of the answers in that question, but they did not end up helping. Adding a static URL path, a static folder, and a template folder didn't end up changing anything. I'm pretty confused on the first answer (that was also the right answer), as I don't see how I can serve my HTML, CSS, and JS file at the same time in one import, especially when they are in different directories.

Swaraag
  • 85
  • 11
  • You might try using `./` before your file references as in `src="./javascript/forecast.js"`. Easy to try anyway. – Mark Aug 08 '22 at 19:47
  • "My issue is not about serving static files in Flask"—that's exactly what it is. You need to serve your JavaScript and CSS files as static files, and the `src` value you use must point to whatever path they're available on. That's not necessarily the same relative path as on the local filesystem (in fact it probably isn't). – ChrisGPT was on strike Aug 16 '22 at 18:30

1 Answers1

0

It may be because you are trying to access the files from the root folder, but because this is a local file, it is accessing the files from the computer's root folder. You may also want to try clearing your cache.

The root folder problem is really annoying. The simplest way to fix it is just by using ../ prefixes instead of /. For example, if your index.html is in the root folder, you can just do <script src="javascript/forecast.js"></script>, it it's in a directory inside the root folder, do <script src="../javascript/forecast.js"></script>, etc. Just keep adding ../ until you are at the right directory.

To clear the cache, it depends on your web browser, but most of the time you should be able to go over to your browsing history and be able to clear your browser from there.

Stockriderj
  • 11
  • 1
  • 1
  • 5
  • Could you clarify a bit? How do I fix the first problem? And how do I clear my cache? Would I have to clear it every single time I want to make an edit to one of my files? – Swaraag Aug 08 '22 at 19:24
  • Sorry @Swaraag, I'll clarify – Stockriderj Aug 09 '22 at 02:21
  • Cool, so I added one ```../``` and ran it. Nothing really changed, it still gave me the 404 error. After adding one more ```../``` so that it would be ``````, it wasn't able to find the file when I clicked Follow link, and when I ran it, I still got the 404. – Swaraag Aug 09 '22 at 22:06
  • That's the solution I use most of the time, maybe just do no `../`s, if that doesn't work then I don't know – Stockriderj Aug 10 '22 at 23:25