Flask-Assets not working at all... = Insanity - flask

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)

Related

How to load local CSS with react-styleguidist 7 and Webpack 4

I want to load local 3rd party css (eg font-awesome icons) as part of my styleguide. As many components uses the same CSS, I want it to be loaded automatically and included as part of the static build.
I settled on using mini-css-extract-plugin to accompolish this, but styleguidist maintainer #sapegin basically told me that I have no idea what I am doing and stop complaining to him without providing any help. So I was hoping the stack-overflow community would give me a hand in pointing out what is the correct way:
styleguidist discussion: https://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909
My github repo demonstrating the three ways of doing it:
https://github.com/bugzpodder/styleguidist-local-css-example/tree/master
master: uses mini-css-extract-plugin + require config, build and devserver works as expected.
require: I couldn't get it to work without mini-css-extract-plugin
template: devserver works, but build does not. The only workwaround I can think of is to use publicPath and copy the css there, but publicPath isn't allowed unless you dangerouslyupdatewebpackconfig https://github.com/styleguidist/react-styleguidist/pull/956

How to link to images without Rails helpers in deployment?

I have a Rails 4 app. HTML for it is already built, so I would like to use tags that I already have (everything works locally). But when I deploy my app to Heroku, none of the images are displayed.
Example of my current image tag:
<img src="/assets/blog/post_images/1.png">
How should I change it so that Heroku knows where to look (I've tried many!)?
Or what are the proper steps to 'precomplile' images? This is the solution I use now:
config.assets.compile = true
config.serve_static_assets = true
It does work (all images are displayed), but I heard that it makes app in production slower.
EDIT
CSS and Javascript files are found just fine interestingly. I thought maybe it has something to do with this file (config/initializers/assets.rb):
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( blog_posts.css )
These are my contents. Should this file mention images may be?

Grunt - change asset linking when building for production

I've built a mobile version of an existing website. The site I've built is completely static and relies only on HTML/CSS/JS. This site resides on the same server as the desktop version and is served from under http://example.com/mobile as a subdirectory. As such, I've set the <base> tag to:
<base href="http://example.com/mobile/">
The only access I get to the existing site is via FTP, so I don't have too many options to reconfigure the already existing server. And I don't want to either.
My mobile version is only somewhat functioning - all the <script> and <link> tags inside index.html correctly point to http://example.com/mobile/{js,css,img}, while links used inside js or css files look up to the top domain (e.g - http://example.com/img/image.png instead of http://example.com/mobile/img/image.png).
I can manually copy all the assets for the links to work, but since this is a Grunt project I figured there might be a smarter way to do this.
So, how can I have all internal asset links in js or scss files change when building (grunt build)? Something like:
site.css
// in dev
body {
background: url('/img/image.png') top left no-repeat;
}
// after building
body {
background: url('/mobile/img/image.png') top left no-repeat;
}
Thanks.
See grunt-replace or grunt-string-replace as tools that can help with this.
You could use either of these within your build task to process the changes you need.
The hardest part will be writing an accurate regex, but there are many regex testers/builders online that can help if you aren't expert at that.
Also, while .htaccess is a great idea for Apache based sites, it doesn't help if you are on Windows or on a cloud hosting solution that doesn't honor it.

Django compressor fails to compress coffeeScript files in production

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.

Why is my Django app not displaying dynamic images when the path is correct?

My Django 1.1 app uses dynamic images.
I'm confused about why the path generated from my template tag:
{{image_product.photo.path}}
looks correct, but does not display the requested image.
This generates a path that works:
src='/media/{{image_product.photo}}' => <img src='/media/lcdtvs/product1.jpg'>
This DOES NOT work:
src='{{image_product.photo.path}}' => <img src='/Users/Bryan/work/review_app/media/lcdtvs/product1.jpg'>
I checked to confirm that the Absolute path generated from MEDIA_ROOT is correct on my computer and it works fine.
Why would the image not display correctly?
Two things to keep in mind:
What you want is the {{image_field.url}} method (not the path).
If it still is 404, either you need to setup your server correctly, or if you are using the development server you need to enable it to server static files.
Not familiar with Django, but I'd guess you need to have file:///Users/... in the second snippet.