Why is the file-path not working in Replit (even though it works in VS Code)?

I have a file-path in my HTML file using fetch(). This works fine in VS Code, however, in Replit the console displays a 404 error. More specifically: ‘Error fetching the JSON: HTTP error!’

The JSON file I am trying to fetch is in the same folder as the HTML file, so I should have no problems directly referencing the file. I have no idea why the 404 error is coming up in the console.

I have attached a screenshot of the HTML file in Replit with the file directory open on the left and the line with ‘fetch()’ highlighted. Any help or advice would be much appreciated.

Welcome to Ask! The problem is that you aren’t using Flask correctly. Since those files are in the templates folder, they are not static and will have to be hosted manually in your code. Try creating a folder called static in your repl (not a subfolder but a main one) and putting the files there, then accessing the files at /static/level_three_reference.json.

3 Likes

Wow that worked. I don’t actually know why, but thank you.

In the templates folder only templates are placed in Flask, that is, HTML files that should be displayed on pages.

The static folder contains additional files to HTML files, such as js, css, images. You can access the files located in this folder without having to use the send_file function to manually add files to the site. This saves a lot of time. You can access these files via the path `static/filename’.

You can get more information in the Flask documentation:
https://flask.palletsprojects.com/en/3.0.x/tutorial/static/
https://flask.palletsprojects.com/en/3.0.x/tutorial/templates/

2 Likes

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