Develop Reference

Conditionally include JS script in html

I am making a simple website hosted on Github Pages and use CDN to include several script files:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
During development on a local machine it is sometimes useful to include full versions of scripts to simplify debug, but on target server I'd prefer to use minified scripts, i.e. include angular.min.js instead of angular.js. Is there a way to have "conditional include" in html, or do Github Pages have some mechanism to substitute parts of last submitted files?

The Jekyll documentation says you can use the Jekyll environment to conditionally include code when building the site. For your case:
...
{% if jekyll.environment == "production" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...
Another option suggests using another config file specifically for development.
_config.yml sets environment: prod.
_config_dev.yml sets environment: dev.
Running jekyll build --config _config.yml,_config_dev.yml in development, the second config file overrides the first and sets the environment to dev. GitHub Pages runs jekyll build - which only uses _config.yml - and would have environment set to prod. You could use a similar syntax to the above to conditionally include the file.
...
{% if site.environment == "prod" %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

ckeditor not loading in Flask application

So I'm using pycharm to build a simple web app. Trying to use ckeditor to make parts of certain forms customisable. first of all, here is the full directory structure
<Root>
-<app>
-<templates>
__init__.py
forms.py
models.py
routes.py
-<migrations>
-<static>
-<ckeditor>
{ckeditor directories bla etc bla}
ckeditor.js
app.db
config.py
application.py
In my base template I have the following code
{% block scripts %}
<script type="text/javascript" src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
{% endblock %}
When I run the application the toolbar for ckeditor does not show. Strangely enough the CKEditorField from the form (which I am using th editor for) appears as a textarea and the relevant js appears above it when I inspect. However console logs a 404 error
GET http://127.0.0.1:5000/static/ckeditor/ckeditor.js 404 (NOT FOUND)
If I relocate the js file outside of its normal directory and place it directly in the templates directory of the app, after updating the correct path I get the following error
net::ERR_ABORTED

Thanks to Doobeh, the static directory was outside the application scope for some reason. Moved it under the app directory and now working

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.