I use stylus and coffeeScript with django compressor, and It works perfectly in Dev. Here is my Jade template:
- load compress
!!! 5
html
head
title Super Page
- compress css
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/base.styl')
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/style.styl')
- endcompress
- compress js
script(type='text/coffeescript',src='{{STATIC_URL}}app/coolscript.coffee')
script(type='text/coffeescript',src='{{STATIC_URL}}app/evencooler.coffee')
- endcompress
body
block content
For deployment I use Heroku and Amazon S3 for static files. Once deployed I visit the site and the page loads fine and styles look as expected but the scripts are not working.
Checking the <head> I see the styles were compressed into one css file but the coffeeScript files were not. The browser is fetching the CS source files:
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/coolscript.coffee"></script>
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/evencooler.coffee"></script>
I
It was working before, I had this problem once but I don't remember what was the cause, I think the compile process is failing silently and I don't know how to debug it.
It was a not so easy to find coffeeScript problem. In my machine I was using coffeescript v1.4.X and heroku was using v1.6.3. I had a for own in array that v.1.4 allowed(it shouldn't) but v1.6.3 didn't(actually it didn't show the right error but a different one which is a bug shown here).
Anyway I solved the problem fixing the coffee file but I still think its a compressor error not to fail in production ignoring errors without giving any clue of what happened.
Related
I have simply tried setting up flask-assets (based on webassets), however just can't get it to work.
I have the standard setup;
python virtualenv
pip to install the bare essentials (flask, flask-assets)
sass ruby gem (for trying sass / scss)
less via npm (for trying lesscss)
jsmin via pip (for trying jsmin)
Config:
I have created a working homepage in Flask
static folder created (for css / js assets)
The css / js files are confirmed working (css background, js slider, etc)
Basically my development non-flask-assets site is working perfectly
I have followed the easy official guide here: flask-assets usage.
I fully understand how to work with it (as per that page). I have even exact copy-pasted the code, & still can't get it working.
Some code I've tried (for lesscss): (of course I have working css in main.less)
from flask.ext.assets import Environment, Bundle
assets = Environment(app)
assets.debug = True
lesscss = Bundle('main.less', output='main.css', filters='less')
assets.register('less', lesscss)
Then in my template:
{% assets "less" %}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets %}
However flask-assets just won't work. I've tried the same with sass, scss, & also jsmin (exact code copy-paste from the usage guide) - it still won't work.
I notice that the .webassets-cache folder is created, but is (always) empty...
Also; relevant error?; I expect it to create the main.css, but as it doesn't, I get an error in the browser (using app.debug = True & flask's built-in dev server):
webassets.exceptions.BuildError
BuildError: Nothing to build for <Bundle output=css/main.css, filters=[<webassets.filter.less.Less object at 0x7f4958dc6710>], contents=('css/main.less',)>, is empty
So; If I manually create an empty main.css, it loads the page (no error), however the main.css file is not filled with css so flask-assets / webassets in still not working.
I've also tried passing the assets object to the template in various ways just in case it's needed (although no documentation states this) - that didn't work.
It's been driving me crazy. Any pointers would be appreciated.
Thank you
There is info missing on the Flask-Assets docs.
You problem is either the sass_bin config or the enviroment load path.
You should try both, in my case it was the config. See below my working config.
PS: IMHO Flask Assets is neither very complete nor well documented. It also consumes you application runtime, which sucks both on debugging and production. I have switched to GULP!
env = Environment(app)
env.config['sass_bin'] = '/usr/local/bin/sass'
# env.load_path = [os.path.join(os.path.dirname(__file__), 'sass')]
js = Bundle('js/jquery/jquery-2.1.4.js', 'js/angular/angular.js',
'js/socketio/socket.io.js', filters='jsmin', output='js/all_min.js')
env.register('js_all', js)
myjs = Bundle('myjs/Interpolation.js', 'myjs/socketio.js' , filters='jsmin', output='myjs/all_min.js')
env.register('myjs_all', myjs)
css = Bundle('sass/base.sass', filters='sass', output='css/base.css')
env.register('css_all', css)
The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?
Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?
I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg
Works great
UPDATE
One picture is worth a thousand words... :)
I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.
What bit bothers me about django, is that I see in many examples that raw javascript is included in html with <script> tag. I would like to have it in independent files which are included in every page in <head> tag so that html stays clean. So that I will call something like {% add_jscript %}some js code{% endaddjsscript %} anywhere in the template to add js code. After all processing when the page is generated and it will dynamically collects all portions of added js code from processed templates and serve it as one js file.
Some app already does this or am I forced to do this on my own ?
I use django-sekizai (https://github.com/ojii/django-sekizai/) for this kind of thing. If I understand you correctly, I believe that is what you are looking for.
I know I'm a bit late to the party, but another option you could try (shameless plug) is a django app i've been working on which will allow you to inject django variables directly into external javascript files, a la Require.js
django-js-variable-injector
I've just written my app.js file and everything is nicely working but the whole file is currently 450 lines long and will be getting bigger.
Is there any best practice about splitting out state manager code or view code into different files (like states.js or views.js) so that everything is a little bit cleaner?
Also on that note... is there a preferred way to split out handlebars templates out into different files? I've currently just got them all defined in one html file which is starting to get a tiny bit unwieldy too.
I was facing the exactly same question two weeks ago, and I didn't wanted to try AMD with requireJS, which seemed a bit complicated for what I wanted to do (and seemed to have advantages but also disadvantages..)
The simple solution which convinced me is the following :
I have 3 folders in my js folder : "models", "controllers", and "views" which contains my js "classes", and I have an "index.html" that import all the js files (I used HTML5 boilerplate to get a convenient index.html).
To be clear, in my index.html, I have at the end of the file something like :
<script src="js/app.js"></script>
<script src="js/models/note.js"></script>
<script src="js/controllers/notesController.js"></script>
<script src="js/controllers/selectedNoteController.js"></script>
<script src="js/views/menuView.js"></script>
<script src="js/views/noteResumeView.js"></script>
<script src="js/views/noteView.js"></script>
<script src="js/views/createNoteView.js"></script>
<script src="js/views/listeNotesView.js"></script>
Hope this help, (and that I didn't misunderstood your question)
You can use RequireJS to load you ember app (including handlebars templates) from different files.
This answer describes how and also links to a sample app showing how to set things up. I have just tried this approach to one of our websites and it works nicely.
I use ember-skeleton for my projects.
To get started simply do the following:
git clone https://github.com/interline/ember-skeleton.git my-app
cd my-app
bundle install
bundle exec rackup
And then go to http://localhost:9292
Also take a look at the wiki for further build tools and templates.
The standard way to do this is now to use ember-cli. Find more information at http://www.ember-cli.com/
What’s the best way to keep related files together in Django?
In addition to our HTML templates, most views have at least one additional JavaScript file, and possibly an additional CSS file. For example:
item_detail.html
item_detail.js
item_detail.css
We want to keep these files side-by-side if possible, so we don't have to look in two or three directories to find them.
Update: I do know that it’s dumb to defeat caching and that’s not what I’m asking. Each page loads several JavaScript and CSS items that are properly cached. For example:
<!-- at top of file -->
<link rel="stylesheet" href="/master/css/site-main.css">
<!-- at bottom of file -->
<script type="text/javascript" src="/master/js/jquery.js"></script>
<script type="text/javascript" src="/master/js/site-main.js"></script>
That part is fine.
In addition to this, each page loads page-specific JavaScript and CSS:
<link rel="stylesheet" href="/static/css/widgets/item_detail.css">
<script type="text/javascript" src="/static/js/widgets/item_detail.js"></script>
In this example, item_detail.js would have event handlers that are needed on the item detail page (only).
Unfortunately this means that I now have several parallel directory structures for this view:
my_site
widgets
item_detail.html ← This is the view
static
css
item_detail.css ← This is the view-specific CSS
js
item_detail.js ← This is the view-specific JavaScript
What I want is this:
my_site
widgets
item_detail.html ← This is the view
item_detail.css ← This is the view-specific CSS
item_detail.js ← This is the view-specific JavaScript
Due to the way views work in Django, it’s not clear to me that this is possible.
If you are just organizing stuff for development, you can symlink you template dir with all template, css and js files to directory you are serving static files too.
So from your example: add my_site/widgets to Django TEMPLATE_DIRS config and cp -s my_site/widgets to directory you have your static files in.
This is dirty hack and, please, don't use it in production as it is very insecure IMHO. But if you want to have neatly organized project in development stage - then I see this as one possible solution.
And also consider that this might give you loads of headache when you move from development to production as stuff WILL fail.
I agree with freiksenet. A solution to the problem he adresses could be aggregating the various css and js files. The whole site then uses just one css and one js file. The first load would be higher, yes, but a big part of the speed of a site is in downloading files, and if caching is done right, aggregation of these files helps imho.
I unfortunately don't have an answer to your main question.
I keep javascript in files separated by function and combine them into a single minified js file with a pre-commit hook (right after the tests run).
for example: I have several jquery-ui dialogs on the site I'm currently working on. Each dialog's functionality is broken off into it's own js file for maintainability. And all the needed js files are "included" on the development pages using a short base.js file like so:
function include(filename) {
document.write(unescape("%3Cscript src='" + filename + "' type='text/javascript'%3E%3C/script%3E"));
}
// include-js (external)
include('/site_media/jquery-plugin1.js');
include('/site_media/js-sources/dialog1.js');
my pre-commit hook does a regex on this file...
include\('/site_media/(.*)'\);
and feeds all the files into YUI compressor.
So I guess the answer to your question is... I put them wherever makes sense to me logically, because on the live site, it'll all be in the minified JS file(s) anyway
You don't want to have your templates available as static files -- they may contain sensitive information or details about the page's implementation which are not appropriate for the public to see.
CSS and JS do not have to be segregated into separate directories -- simply place them in the static/ directory.
my_site/
widgets/
item_detail.html
static/
item_detail.css
item_detail.js
One approach I’m testing:
my_site/
widgets/
item_detail.html
item_detail.css
item_detail.js
These are not shared statically. Instead, in the HTML template:
<script type="text/javascript" charset="utf-8">
{% include "widgets/item_detail.js" %}
</script>
(Similar code for CSS.) I would only do this for page-specific JavaScript and CSS, not site-wide stuff that can benefit from caching.
This dumps the actual JavaScript and/or CSS right into the template, yet allows me to keep them in separate files for development purposes. This is nice, development-wise but defeats some JavaScript and CSS caching, but only for page-level stuff that’s not re-used on any other page.