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
...
Related
Description
Jquery is not working from local disk -using a downloaded copy of any jquery version does not work ok.
it works ok from ref links over the internet.
per jquery documentation - it is suppose to work from local disk as well
(i.e script src = "local path"...).
my code works fine with reference external links to jquery lib (versions 2.2.4 , 3.2.1 ) no problem
whenever i try to fallback or just use the local downloaded file for the same version it fails!
the relevant code is
<script src async = './jquery-3.2.1.min.js'></script>
or just
<script src = './jquery-2.2.4.min.js'></script>
and i tried several other workarrounds including pasting the whole file into my html as script) none worked neither on chrome nor firefox windows 7-8 node-8.9.1
tried similar to the following as well:
<script>window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>')</script>
error message is:
detailed error: ReferenceError: $ is not defined
detailed error: TypeError: pageExecute is undefined
one suggested solution is: use dev server.
what is dev server and why needed? means what? so i can not just use the local copy of jquery lib?
node.js does not serve ANY files by default (unlike some other web servers). So, if you want the jQuery file to be served by your own web server, then you need to create a route that serves that file or use something like express.static() that serves multiple files.
Since your web URL is http://localhost:6060/example1, you are loading the web page through your own web server. Therefore any script tag such as:
<script src="jquery-2.2.4.min.js"></script>
will be requested form your own web server as:
http://localhost:6060/jquery-2.2.4.min.js
If you don't have a route defined for that specific URL in your node.js server, then you will get an error. If you are using Express in your node.js server, then you either need something like:
app.use(express.static("/someDirPath"));
to create a middleware handler that will automatically look in /someDirPath for files that are requested. Or, you need to make specific routes for files you want to serve:
app.get("/jquery-2.2.4.min.js", function(req, res) {
res.sendFile("/somePath/jquery-2.2.4.min.js");
});
In my design projects, I make a URL distinction between static files and dynamic routes. I use /public at the beginning of the URL path for any public resource as this makes it simple to distinguish which request is for a static resource and which is for a dynamically served route. So, in my script file, I'd use:
<script src="/public/js/jquery-2.2.4.min.js"></script>
And, then on my server, I'd use:
// serve static resources from the public directory below our project
app.use(express.static("/public", path.join(__dirname, public)));
And, then I'd have a directory structure of public static files:
myAppDir
various server files
- public
- js
- css
- img
Issue with file path
If both js and html file in same folder then use:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
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 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)
I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.
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"