I have a basic flask folder hierarchy. I have a templets folder which holds all my HTML files, and a static folder for my javascript files. I have a javascript that builds a table. I have run this script from my html file directly by placing the script tag in the HTML file, and it works. I want to move it out of the HTML file and place it in the static folder. When I do that and try to source the file I get the error that the script is not found.
I have tried two different ways to do this and the file is still not getting found. What am i doing wrong here?
<script src="{{ url_for('static', filename='/static/table.js') }}"></script>
<script src="../static/table.js"></script>
here is the exact error I get for both of these
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
If you haven't already, you need to set up routes to send the files that the webpage requests from your flask server, you can use send_from_directory to let requests get any files from a specified directory, in your case, the folder containing your javascript.
#app.route('/js/<path:path>')
def send_js(path): return send_from_directory('js', path)
Related
I realize this question has been asked many times, however I don't manage to make it working
I have an html file (main.html) that is including two js files (etherjs.js and web3-min.js). These files are in the same directory.
But when requesting the page through localhost node server, the files are not included in the page
What I am doing wrong?
Error of the console (it is saying error loading the eleent which source is:):
I think the problem is with your server.
If you use express:
To serve static files such as images, CSS files, and JavaScript files,
use the express.static built-in middleware function in Express.
Make a folder callled public in the root.
Set it in your server: app.use(express.static('public'));
Put in the files you need eg.: some.js.
Now you can call it with <script src="/some.js"></script>
More information
I have a Flask app with the following structure:
/
static
script.js
data.json
templates
index.html
app.py
app.py renders the index.html template which includes the js as <script type="text/javascript" src="/static/script.js">.
The javascript file simply loads the json file using the path "data.json" as it is in the same directory. However, this always gives me a 404 not found error on the "data.json" file coming from the javascript. I was wondering if there is a correct way to access files from javascript when launched through Flask.
Thanks!
You should get static file in this way:
{{ url_for('static', filename='script.js') }}
See the documentation for more detail.
In script.js, you may need to load the data.json by /static/data.json.
I have a VueJS webpack generated project in which I want to link the jQuery & Bootstrap libraries. I've downloaded the sources and want to link the JS & CSS into my HTML file like so:
<script src="/assets/js/jquery-3.2.1.min.js"></script>
The HTML file is in the same folder than the assets folder.
My problem is that the script doesn't load and I have this error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
None of the solutions I found for this problem leaves me satisfied, people use another file containing some sort of module declaration, but I think it's a bit overkill to have such files when it's only for linking a script file into an HTML file...
So the index.html is in the assets folder?
Won't it just be this then:
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
How to serve static files in Flask
(24 answers)
Closed 5 years ago.
I'm using Python and Flask to build a simple interaction web app.
Testing on localhost:5000 using Chrome.
I have one template and one associated javascript file located at:
./templates/main.html
./templates/main_scripts.js
The main.html template includes the scripts file like this:
<script src="main_scripts.js"></script>
When I render the template using this Python code...
return render_template('main.html', session_id=session_id, title=sess.title)
The main.html page is rendered, but I get this error in the Chrome console:
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
Using the Chrome console to inspect the location of the unfound 'main_scripts.js' when the error occurs, the browser thinks it is trying to load it from inside my virtual environment at:
./env/Scripts/main_scripts.js
...and not from the same directory as the template.
I can't seem to force the rendered template to understand where it's script file is located. So far I have tried src paths like "./main_scripts.js" and even "/appdir/main_scripts.js" with the exact same results.
You first need to create a static folder at the same level as the templates folder. Then create a js subfolder and put the js file in that folder. Now you can call it in your html.
Here's the "pythonic" way do that:
<script src="{{ url_for('static', filename='js/main_scripts.js') }}"></script>
As explained here in the official Flask documentation, your project structure should look like this:
/yourapplication
yourapplication.py
/static
/css
style.css
/js
main_scripts.js
/templates
main.html
...
I'm trying to load external scripts from a folder into my createnew.html file and I keep getting this error saying it cannot be found:
Failed to load resource: the server responded with a status of 404 (Not found)
I'm trying to load the scripts in the head of my code, like this:
<head>
<!--C3 CSS script-->
<link href="./scripts/c3.css" rel="stylesheet" type="text/css">
<!--C3 JS script-->
<script src="./scripts/c3.min.js"></script>
</head>
My files are arranged like this:
->public
->views
-createnew.html
->scripts
-c3.css
-c3.min.js
Please help me understand why this doesn't work.
As this question became more popular than expected, I decided to point other problem-havers in the right direction:
Let's say you have organized your files like this:
- server.js
-> MyWebsite(folder)
- index.html
-> js(folder)
- myscript.js
The paths you use are relative to the "working directory" you are in.
When not using a server, and only developing websites locally on your computer, this working directory will be the relative path from your index.html file to your scripts. In this case it would be ./js/mysript.js.
When using a server you need to tell it where this working directory is. In the case of Node.js you would do something like this app.use(express.static('./MyWebsite')) and your js files would be referenced by /js/myscript.js
Notice that when loading from a server you prefix with / instead of ./ since the / really is just a part of the URL to your file hosted by your server, while ./ is specific to the file system.
Change
"./scripts/c3.css"
to
"scripts/c3.css"
You can refer to this question about the relative path of files in HTML.
To refer to the current folder,
./ works only in non-strict doctype mode, while . works in both modes.
So you may try "scripts/c3.css" instead of "./scripts/c3.css"