Develop Reference

Javascript file not found using relative path during Flask render_template [duplicate]

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
...

flask javascript not found in html file

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)

symfony inline asset with assetic

I have the following code based on Symfony2 docs:
{% block javascripts %}
{% javascripts filter="?jsqueeze" output="js/app.js"
"%kernel.root_dir%/Resources/assets/js/one.js"
"%kernel.root_dir%/Resources/assets/js/two.js" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
which works like charm.
What I want to do, is instead of
<script src="{{ asset_url }}"></script>
use something like:
<script> ... inline asset contents here ... </script>
I tried assetic docs as well as digging around AsseticTokenParser and AsseticNode classes, but couldn't find a variable which references to the actual filepath instead of url.
Normally I do it with css rather than js, but it should be the same concept.
thanks!

In production mode, symfony generates a link to a static file, which can be included directly into the template. This file needs to be generated with something like:
php app/console assetic:dump --env=prod --no-debug
In dev mode, there is no static file generated which can be included. The asset_url contains an url which will call symfony controller which will in turn generate required js/css files on the fly. Aparently it is very easy to include the output of a controller in symfony:
{% render asset_url %}
To answer my own question, one could write a twig extension, which would include a static file or forward request to render method depending on wether it has been called in prod or dev mode.
I will update this page if/when I write an extension like this.
Another option is not to use dev mode of assetic and always generate static css/js files on the fly with:
php app/console assetic:watch
Then a simple include would work.
I wish there was an out of the box method in Symfony to get this common task done.

Include javascript dojo files via Twig in Symfony 2

I try to achieve a simple goal: add developped dojo classes in a symfony2 html page with Twig.
I had read a lot of documentation on assetic, and i found two types of method to include assets:
The first one with the asset() twig function. And the second one with the "javascripts" tag.
The assets function is used to include files which are stored in the web/ folder whereas javascripts tag load files which are stored in the resource folder of the current bundle.
My dojo classes files are stored in the resource folder of a bundle, so i tried to load them with a javascripts tag like this:
{% javascripts '#MyBundle/Resources/public/js/MyClass.js' output= 'js/myBundle/MyClass.js' %}
<script type='text/javascript' src='{{ asset_url }}'></script>
{% endjavascripts %}
And it work, my file is successfully included, unfortunately the name is not "MyClass.js" but "MyCmass_MyClass_1.js". I have executed the assetic:dump --env=prod command but my file name still "MyCmass_MyClass_1.js"
What can I do to correct this ?
(I tried to delete the cache, relaunch my server in prod/dev, launch the assetic command with the dev env, and no change).

Visit your site in production mode: yoursite.com/app.php instead of yoursite.com/app_dev.php, or point your webserver to correct file in web folder: web/app.php.

Symfony2 Assetic not working with multiple javascript file with the * sign

I use Symfony2 and the assetic Bundle. (probleme when using the * sign to ask assetic to take all files)
Form what I have read here and there assetic allow to use multiple javascript file.
This work just fine when when I write all the file right before the <'/html> tag:
{% javascripts
'#MySiteBlogBundle/Resources/public/js/test1.js'
'#MySiteBlogBundle/Resources/public/js/test2.js'
'#MySiteBlogBundle/Resources/public/js/test3.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
but the same code, doesn't work if instead of listing the file, I use the * (just like this:)
{% javascripts
'#MySiteBlogBundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
with the *, it works only depending on the pages which are displayed. I did all my javascipt test on class which are on my main twig template. And thoses class are displayed on all pages... So all test should be working.
Anyone ever had such probleme when using this * sign with assetic?
Thanks for any comment/help.

I noticed only two problems with assetic earlier.
First, in production mode you have to dump them (php app/console assetic:dump --env=prod) before using. Okay, this is not a problem but you shouldn't forget it.
Second, if you use the * sign to load all JavaScripts then the order of your scripts will be alphabetical and this can break a few dependencies among script files. This is the reason I usually don't use the * sign.

After few hours with the same issue, I realized you need to:
create symbolic links (A.K.A. symlinks) or copy of your bundles by command:
bin/console assets:install
or
bin/console assets:install --symlink
in your definitions, use bundles/mysiteblog/js/* rather than #MySiteBlogBundle/Resources/public/js/* (you will see your bundle path in WEB directory after Step 1.