We'd like to use GruntJS (http://gruntjs.com/), a package we're familiar with, to minify JS and compile LESS to CSS (among other things) when we deploy our Django app to Heroku. Has anyone figured out a smart of doing this yet?
I wasn't able to find anything after a couple of hours of looking myself.
Try using django_compressor with COMPRESS_PRECOMPILERS settings.
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
)
Template:
{% compress css %}
<link type="text/less" rel="stylesheet" href="/static/css/styles.less" charset="utf-8">
<style type="text/less">
#color: #4D926F;
#header {
color: #color;
}
</style>
{% endcompress %}
The django-grunt project looks promising. I haven't tried it myself yet, though - at first glance it doesn't seem to support the nice grunt development watch-server workflow for quicker development that you get in a Yeoman webapp (at least it's not documented on their README).
For my current open source project, I created a kind-of hacky solution that I'm still iterating on, but it does work:
I keep my static files and the base template as a normal Yeoman-scaffolded Grunt project in its own GitHub repo, using buildcontrol to export the built files in a separate branch for Heroku deployment
the Django app is a normally laid out Django app, with some script magic to link up the development or production versions of the frontend code into my static folders (I can keep grunt server running to quickly iterate on the frontend code)
to deploy to Heroku, I use a minimally-modified python buildpack that fetches the production branch of the frontend repo and links it up using the aforementioned script (I tried building it using grunt on Heroku, but it took ages to fetch all the npm dependencies every time, so I found buildcontrol to be much more efficient)
Update: I'm since iterating on making everything work in a single repo in this project.
Related
I'm using PyCharm to manage my django files and for the front end I'm using Bootstrap. I'm currently using the CDN method to point to the bootstrap files in my base.html file.
I've recently come to a point where I want to customize some of the SCSS variables that bootstrap provides, but I'm puzzled and can't find a guide anywhere to how to do this with my configuration.
I used npm to install the bootstrap files to my outer project folder. I've tried installing django-sass-compiler using pip, and then adding the required setting to my settings.py, but when I ran the command "python manage.py sass-compiler" (as per the PyPi docs), I got "ModuleNotFoundError: No module named 'django_sass_compiler'"
I'm assuming that if I were to get that working then it would compile my custom SCSS file into a CSS file that would overwrite my current 'main.css' (is that right?), however I can't even figure out that part.
If someone could please point me in the right direction then that would be great, there really isn't a lot of help out there for sass, pycharm, django & bootstrap together.
Yes, you will have to compile the CSS manually. You can use tools like Koala.
To accomplish that in Django, You will have to:
Create a directory named static at your project level directory. In satic add another folder called css. Go ahead and add the compiled CSS file.
Change
STATIC_URL = 'static/'
to
STATIC_URL = '/static/'
and add
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
In your base.html file at the very top add
{% load static %}
and you can link the base.html file to your compiled CSS file like shown below:
<link rel="stylesheet" href="/static/css/mycss.css">
I have deployed one of my project with free version in 'pythonanywhere', but the static images aren't visible in there.
While testing in local everything seems to be working but on deploying and adding static images to it, the images aren't visible there. Please help me find what went wrong here.
In my django templates I used these tags to show images
<div class="card-image">
<img src="{{cat.category_image.get_photo_url }}">
</div>
Or provide me some documentation links to have a look into development issues.
The documentation for django static files in production is here.
Make sure you run python manage.py collectstatic before you deploy as the local server stores static files in a separate location to the production server. Again, here's the documentation on the collectstatic function.
#Giles, cant add an image to the comment. Here is the screenshot from pythonanywhere
I am trying to use this simple lightbox for embedding a video on my Django project. Locally with:
python3 manage.py runserver
it runs fine. However, once deployed to Heroku the app struggles to find the css and the js of lity, though it is located in the correct folder. Has anyone run into a similar problem?
The project is live here:
https://dry-depths-69493.herokuapp.com/
And the git-repo is here:
https://github.com/Datenrausch/heroku
Looking at your code in github, I see that ... master/honoradar/static/honoradar/lity/ has no subfolder named dist, but your HTML looks for that subfolder.
Try changing these lines from index.html to the correct files (I'm not sure which are the correct ones)
<script src="{% static 'honoradar/lity/dist/lity.js'%}"></script>
<link rel="stylesheet" href="static/honoradar/lity/dist/lity.css">
or add a dist subfolder with the correct files.
I just started a new little project for learning purposes and I want to try out Vue js with Django (with DRF). I'm trying to use vue loader (webpack-simple template).
The problem is that I don't know how to synchronize npm run dev and python manage.py runserver. I don't know how to access a template that is rendered by django in webpack-dev-server.
I mean I have a template with django-template specific keywords like {% load static %} that is not handled by webpack-dev-server, obviously.
I know I can build it everytime npm run build, but that's kinda annoying and boring to wait for it everytime I want to make a little change.
In webpack, it's specified to run on a default index.html file, how can I make it work on the template that is actually rendered on 127.0.0.1:8000 with python manage.py runserver running? I know it doesn't make any sense to run 2 dev servers, but I don't know how to explain in other way.
Is there an alternative?
Thanks in advance for answers!
Run your Django server as normal. webpack shouldn't serve your files. It should just build them (use webpack development settings and webpack --watch) and let webpack put them in the static directory of your Django project, e.g.
// in your webpack config
output: {
path: path.resolve(__dirname, 'project/static/js')
}
That way Django can serve the files that are run through your webpack pipeline.
On top you can use the webpack live reload plugin and the live reload browser extension to auto-reload when your assets change.
When you are ready to commit your changes, build your files in production mode and commit the build files in the static dir.
I'm having a django 1.4.2 app with django-compressor 1.2 used to compress a less file.
I have my less file in app/static/css/home.less.
It outputs a less file under static/CACHE/css/5208013a00a2.css
When running locally (Debug=True, the files are served by django) i'm getting a correct response. the following output in my html (template) file:
<link rel="stylesheet" href="/static/CACHE/css/5208013a00a2.css" type="text/css">
When running in deployment (Apache serves the files) i'm having a bad response. the following output in my html file:
<link type="text/less" rel="stylesheet" href="/adduplicator/static/css/home.less" charset="utf-8">
The files gets created in deploy under static/CACHE/css/5208013a00a2.css so i'm assuming there is no permission problems. I get nothing wrong in the logs.
some of the settings from settings.py:
COMPRESS_PRECOMPILERS = (
('text/coffeescript', 'coffee --compile --stdio'),
('text/less', 'lessc {infile} {outfile}'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
The deploy is made through fabric, and it creates the app under virtual env.
I believe
('text/less', 'lessc {infile} {outfile}'),
should be
('text/less', 'lessc {infile} > {outfile}'),
as without the redirect lessc will compile to stdout.
This may or may not apply to the original poster, but I experienced the exact same error (.less files getting linked instead of being replaced by the generated CSS) and it was because I had recently set Django to run as a normal user instead of root, and hence didn't have permission to write to the cache folder that it created as root. chown -R myuser:mygroup static/cache solved the problem.
I'm having a similar issue, my setup is nearly identical to yours (using apache, debug=False, etc.), and haven't resolved it yet. I have found that if I manually run compress (python manage.py compress), it will resolve the issue, but it will only resolve it temporarily. After 6-12 hours the issue will recur.
There is nothing dynamic in the .css/.js files that I'm compressing - I'm using django compressor as a means of precompiling my lessc and coffeescript.
I hope you found a workaround last fall when you ran into this issue - for anyone else having the same problem, try manually running compress. I don't know why this helps, since the files are already there in the CACHE, but for some reason it does (temporarily). I'll update when I resolve.
EDIT: Problem has not recurred in the past 12 days. I'm still a little sketched out that there was a problem and I didn't understand the resolution, but for now it's working so I'm focusing on other stuff. If you have an issue of this nature, please post or comment.
Recommended steps if you have this issue:
Verify that the files are generated in the CACHE directory
Look at ownership of the files, and the CACHE directories, and chown them if necessary
Look at timestamps of the files in CACHE, verify that they're reasonable
Run collectstatic and compress manually, then restart the server (kill & restart if you're using python runserver, or sudo service
apache2 restart, or other equivalent)