Unable to serve static files correctly in Django app
Question
I have installed in googlecloud VM (Ubuntu 16.04) a django application (1.8.19) with a static IP but when I access the page I am not able to load correctly all the static files (css, jquery etc.). Although I have set the correct files paths in my apache conf file, the URLs fail to include the "static" part. So instead of being like this:
http://myip/**static**/lib/css/assets.min.css
They are like this:
http://myip/lib/css/assets.min.css
Thus everything fails to get rendered correctly and I get the following errors in the webdeveloper:
I believe the issue must be somewhere in the settings.py file but I am not sure where as I clearly define the path to the static folder there as:
MEDIA_ROOT = '/var/www/geonode/uploaded'
STATIC_ROOT = '/var/www/geonode/static/'
TEMPLATE_DIRS = (
'/etc/geonode/templates',
os.path.join(GEONODE_ROOT, 'templates'),
)
# Additional directories which hold static files
STATICFILES_DIRS = [
'/etc/geonode/media',
os.path.join(GEONODE_ROOT, 'static'),
]
EDIT
This is my apache conf file in the sites-enabled folder:
WSGIDaemonProcess geonode user=www-data threads=15 processes=2
<VirtualHost *:80>
Servername localhost
ServerAdmin webmaster@localhost
LimitRequestFieldSize 32760
LimitRequestLine 32760
ErrorLog /var/log/apache2/error.log
LogLevel warn
CustomLog /var/log/apache2/access.log combined
WSGIProcessGroup geonode
WSGIPassAuthorization On
WSGIScriptAlias / /var/www/geonode/wsgi/geonode.wsgi
<Directory "/var/www/geonode/">
Order allow,deny
Options -Indexes
Allow from all
</Directory>
Alias /static/ /var/www/geonode/static/
Alias /uploaded/ /var/www/geonode/uploaded/
Alias /robots.txt /var/www/geonode/robots.txt
<Directory "/var/www/geonode/uploaded/documents/">
Order allow,deny
Deny from all
</Directory>
<Directory "/var/www/geonode/uploaded/layers/">
Order allow,deny
Deny from all
</Directory>
<Directory "/var/www/geonode/static_root/">
Order allow,deny
Options Indexes FollowSymLinks
Allow from all
Require all granted
IndexOptions FancyIndexing
</Directory>
<Directory "/var/www/geonode/uploaded/thumbs/">
Order allow,deny
Options Indexes FollowSymLinks
Allow from all
Require all granted
IndexOptions FancyIndexing
</Directory>
<Directory "/var/www/geonode/uploaded/avatars/">
Order allow,deny
Options Indexes FollowSymLinks
Allow from all
Require all granted
IndexOptions FancyIndexing
</Directory>
<Directory "/var/www/geonode/uploaded/people_group/">
Order allow,deny
Options Indexes FollowSymLinks
Allow from all
Require all granted
IndexOptions FancyIndexing
</Directory>
<Directory "/var/www/geonode/uploaded/group/">
Order allow,deny
Options Indexes FollowSymLinks
Allow from all
Require all granted
IndexOptions FancyIndexing
</Directory>
<Proxy *>
Order allow,deny
Allow from all
</Proxy>
ProxyPreserveHost On
ProxyPass /geoserver http://localhost:8080/geoserver
ProxyPassReverse /geoserver http://localhost:8080/geoserver
</VirtualHost>
EDIT II
The STATIC_URL in my local_settings.py:
STATIC_URL = '/static/'
The template of base.html:
{% load i18n avatar_tags %}
{% load account socialaccount %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">
<title>{% block title %}{{ SITE_NAME }}{% endblock %}</title>
{% block head %}
{% if DEBUG_STATIC %}
<link href="{{ STATIC_URL }}lib/css/jquery.dataTables.css?v={{ VERSION }}" rel="stylesheet" />
<link href="{{ STATIC_URL }}lib/css/select2.css?v={{ VERSION }}" rel="stylesheet"/>
<link href="{{ STATIC_URL }}lib/css/bootstrap.min.css?v={{ VERSION }}" rel="stylesheet"/>
<link href="{{ STATIC_URL }}lib/css/jquery-ui.css?v={{ VERSION }}" rel="stylesheet"/>
{% else %}
<link href="{{ STATIC_URL }}lib/css/assets.min.css?v={{ VERSION }}" rel="stylesheet"/>
{% endif %}
<link href="{{ STATIC_URL }}geonode/css/ext-compatibility.css?v={{ VERSION }}" rel="stylesheet" />
<link href="{{ STATIC_URL }}geonode/css/ux-all.css?v={{ VERSION }}" rel="stylesheet" />
<link href="{{ STATIC_URL }}geonode/css/base.css?v={{ VERSION }}" rel="stylesheet" />
<style type="text/css">[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}</style>
{% block extra_head %}
{% endblock %}
{% endblock %}
<!--[if IE]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style>
#ieflag{
display: block !important;
height: 150px;
text-align: center;
}
</style>
<![endif]-->
<link rel="search" type="application/opensearchdescription+xml" href="/catalogue/opensearch" title="GeoNode Search"/>
</head>
<body class="{% block body_class %}{% endblock %}">
<!-- Navbar -->
{% block header %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<i class="fa fa-navicon fa-lg"></i>
</button>
<a class="navbar-brand" href="{% url "home" %}">GeoNode</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav toolbar">
{% block tabs %}
<li id="nav_layers">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Data" %}<i class="fa fa-angle-down fa-lg"></i></a>
<ul class="dropdown-menu">
<li><a href="{% url "layer_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Layers" %}</a></li>
<li><a href="{% url "document_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Documents" %}</a></li>
{% if user.is_authenticated %}
<li><a href="{% url "services" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Remote Services" %}</a></li>
<li role="separator" class="divider"></li>
<li><a href="{% url "layer_upload" %}">Upload Layer</a></li>
{% if 'geonode.contrib.createlayer' in INSTALLED_APPS %}
<li><a href="{% url "layer_create" %}">{% trans "Create Layer" %}</a></li>
{% endif %}
<li><a href="{% url "document_upload" %}">Upload Document</a></li>
<li><a href="{% url "register_service" %}">{% trans "Add Remote Service" %}</a></li>
{% endif %}
</ul>
</li>
<li id="nav_maps">
{% if user.is_authenticated %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Maps" %}<i class="fa fa-angle-down fa-lg"></i></a>
<ul class="dropdown-menu">
<li><a href="{% url "maps_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Explore Maps" %}</a></li>
<li> <a href="{% url "new_map" %}">{% trans "Create Map" %}</a></li>
</ul>
{% else %}
<a href="{% url "maps_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Maps" %}</a>
{% endif %}
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "About" %}<i class="fa fa-angle-down fa-lg"></i></a>
<ul class="dropdown-menu">
<li><a href="{% url "profile_browse" %}">{% trans "People" %}</a></li>
<li><a href="{% url "group_list" %}">{% trans "Groups" %}</a></li>
<li><a href="{% url "group_category_list" %}">{% trans "Group Categories" %}</a></li>
{% if perms.announcements.can_manage %}
<li><a href="{% url "announcements_list" %}">{% trans "Announcements" %}</a></li>
{% endif %}
<li role="separator" class="divider"></li>
<li><a href="{% url "geonode.invitations:geonode-send-invite" %}">{% trans "Invite Users" %}</a></li>
{% if user.is_superuser %}
<li><a href="/admin/people/profile/add/">{% trans "Add User" %}</a></li>
<li><a href="{% url "group_create" %}">{% trans "Create Group" %}</a></li>
{% endif %}
</ul>
</li>
{% block extra_tab %}
{% endblock %}
{% endblock %}
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="search">
<form id="search" action="{% url "search" %}" >
<span class="fa fa-search"></span>
{% if HAYSTACK_SEARCH %}
<input id="search_input" type="text" placeholder="Search" name="q">
{% else %}
<input id="search_input" type="text" placeholder="Search" name="title__icontains">
{% endif %}
</form>
</div>
</li>
{% if not user.is_authenticated and ACCOUNT_OPEN_SIGNUP %}
<li><a href="{% url "account_signup" %}">{% trans "Register" %}</a></li>
{% endif %}
{% if user.is_authenticated %}
<li>
<a href="#" class="dropdown-toggle avatar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{% autoescape off %}{% avatar user 42 %}{% endautoescape %}
{% with full_name=user.first_name|add:' '|add:user.last_name %}
{% if full_name.strip %}
{{ full_name | truncatechars:20 }}
{% else %}
{{ user.username | truncatechars:20 }}
{% endif %}
{% endwith %}
<i class="fa fa-angle-down fa-lg"></i>
</a>
<ul class="dropdown-menu">
<li><a href="{{ user.get_absolute_url }}">{% trans "Profile" %}</a></li>
<li><a href="{% url "recent-activity" %}">{% trans "Recent Activity" %}</a></li>
<li><a href="{% url "messages_inbox" %}">{% trans "Inbox" %}</a></li>
<li role="separator" class="divider"></li>
<li><a href="{% url "admin:index" %}">Admin</a></li>
{% if 'geonode.geoserver' in INSTALLED_APPS %}
<li><a href="{% url "proxy" %}?url={{ GEOSERVER_LOCAL_URL }}web">GeoServer</a></li>
{% endif %}
{% if user.is_superuser and USE_MONITORING %}
<li role="separator" class="divider"></li>
<li><a href="{% url "monitoring:index" %}">{% trans "Monitoring" %}</a></li>
{% endif %}
<li role="separator" class="divider"></li>
<li><a href="{% url "help" %}">{% trans "Help" %}</a></li>
<li role="separator" class="divider"></li>
<li><a href="/account/logout/">Logout</a></li>
</ul>
</li>
{% else %}
<li><a href="#" data-toggle="modal" data-target="#SigninModal" role="button" >{% trans "Sign in" %} </a></li>
{% endif %}
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
{% endblock header %}
<!-- End of Navbar -->
<div class="alert alert-danger alert-dismissible" role="alert" id="ieflag" style="display:none">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1>You are using an outdated browser that is not supported by GeoNode.</h1>
<p>Please use a <strong>modern browser</strong> like Mozilla Firefox, Google Chrome or Safari.</p>
</div>
<div id="wrap">
{% block middle %}
<div class="container">
{% include "_status_message.html" %}
{% include "_announcements.html" %}
{% include "_messages.html" %}
{% block body_outer %}
<div class="row">
<div class="col-md-8">
{% block body %}{% endblock %}
</div>
<div class="col-md-4">
{% block sidebar %}{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% endblock middle %}
</div>
{% block monitoring %}
{% endblock %}
{% block footer %}
<footer>
<div class="container">
<div class="row">
<div class="col-md-2">
<ul class="list-unstyled">
<li>Data</li>
<li><a href="{% url "layer_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Layers" %}</a></li>
<li><a href="{% url "document_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Documents" %}</a></li>
{% if user.is_authenticated %}
<li><a href="{% url "services" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Remote Services" %}</a></li>
<li><a href="{% url "layer_upload" %}">Upload Layer</a></li>
{% if 'geonode.contrib.createlayer' in INSTALLED_APPS %}
<li><a href="{% url "layer_create" %}">{% trans "Create Layer" %}</a></li>
{% endif %}
<li><a href="{% url "document_upload" %}">Upload Document</a></li>
<li><a href="{% url "register_service" %}">{% trans "Add Remote Service" %}</a></li>
{% endif %}
</ul>
</div>
<div class="col-md-2">
<ul class="list-unstyled">
<li>Maps</li>
<li><a href="{% url "maps_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}">{% trans "Explore Maps" %}</a></li>
{% if user.is_authenticated %}
<li> <a href="{% url "new_map" %}">{% trans "Create Map" %}</a></li>
{% endif %}
</ul>
</div>
<div class="col-md-2">
<ul class="list-unstyled">
<li>About</li>
<li><a href="{% url "profile_browse" %}">{% trans "People" %}</a></li>
<li><a href="{% url "group_list" %}">{% trans "Groups" %}</a></li>
{% if perms.announcements.can_manage %}
<li><a href="{% url "announcements_list" %}">{% trans "Announcements" %}</a></li>
{% endif %}
<li><a href="{% url "geonode.invitations:geonode-send-invite" %}">{% trans "Invite Users" %}</a></li>
{% if user.is_superuser %}
<li><a href="/admin/people/profile/add/">{% trans "Add User" %}</a></li>
<li><a href="{% url "group_create" %}">{% trans "Create Group" %}</a></li>
{% endif %}
</ul>
</div>
<div class="col-md-6 text-right">
<ul class="list-unstyled">
<li>{% trans "Powered by" %} <a href="http://geonode.org">{% trans "GeoNode" %}</a> <em>{% trans "version" %} {{ VERSION }}</em></li>
<li><a href="{% url "developer" %}">{% trans "Developers" %}</a> | <a href="{% url "about" %}">{% trans "About" %}</a><li>
</ul>
<label class="hidden">{% trans "Language" %}</label>
{% if csrf_token != "NOTPROVIDED" %}
{% get_current_language as LANGUAGE %}
<form class="form-inline" action="/i18n/setlang/" method="post">
{% csrf_token %}
<select class="col-md-6 pull-right" name="language" onchange="javascript:form.submit()">
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% ifequal LANGUAGE_CODE lang.0 %} selected="selected"{% endifequal %}>
{{ lang.1 }}
</option>
{% endfor %}
</select>
</form>
{% endif %}
</div>
</div>
</div>
</footer>
{% endblock footer %}
<!-- Modal must stay outside the navbar -->
{% if not user.is_authenticated %}
<div class="modal fade" id="SigninModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">{% trans "Sign in" %}</h4>
</div>
<form class="form-signin" role="form" action="{% url "account_login" %}?next={{ request.path }}" method="post">
<div class="modal-body">
{% csrf_token %}
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
{% include "socialaccount/snippets/login_extra.html" %}
<hr>
{% endif %}
<div class="form-group">
<label for="id_username" class="sr-only">{% trans "Username" %}:</label>
<input id="id_username" class="form-control" name="login" placeholder="{% trans "Username" %}" type="text" />
</div>
<div class="form-group">
<label for="id_password" class="sr-only">{% trans "Password" %}:</label>
<input id="id_password" class="form-control" name="password" placeholder="{% trans "Password" %}" type="password" />
</div>
<label class="checkbox">
<input type="checkbox" /> {% trans "Remember Me" %}
</label>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-block">{% trans "Sign in" %}</button>
</div>
</form>
</div>
</div>
</div>
{% endif %}
<!-- End of Modal -->
{% if DEBUG_STATIC %}
<script src="{{ STATIC_URL }}lib/js/jquery.min.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery.dataTables.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery.timeago.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery.ajaxprogress.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery.ajaxQueue.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery-ui.custom.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/jquery.raty.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/bootstrap.min.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/moment-with-locales.min.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/bootstrap-datetimepicker.min.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/json2.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/select2.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}lib/js/waypoints.js?v={{ VERSION }}"></script>
{% else %}
<script src="{{ STATIC_URL }}lib/js/assets.min.js?v={{ VERSION }}"></script>
{% endif %}
<script src="{{ STATIC_URL }}geonode/js/utils/utils.js?v={{ VERSION }}"></script>
<script src="{{ STATIC_URL }}geonode/js/base/base.js?v={{ VERSION }}"></script>
{% include 'autocomplete_light/static.html' %}
<script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
{% block extra_script %}{% endblock extra_script %}
<script type="text/javascript">
var autocomplete = $('#search_input').yourlabsAutocomplete({
url: '{% url "autocomplete_light_autocomplete" "ResourceBaseAutocomplete" %}',
choiceSelector: 'span',
hideAfter: 200,
minimumCharacters: 1,
placeholder: '{% trans 'Type your search here ...' %}',
appendAutocomplete: $('#search_input'),
autoHilightFirst: false
});
$('#search_input').bind('selectChoice', function(e, choice, autocomplete) {
if(choice[0].children[0] == undefined) {
$('#search_input').val($(choice[0]).text());
$('#search').submit();
}
});
</script>
<script>
// Workaround to fix the autocomplete box positions
yourlabs.Autocomplete.prototype.fixPosition = function(html) {
this.input.parents().filter(function() {
return $(this).css('overflow') === 'hidden';
}).first().css('overflow', 'visible');
if(this.input.attr('name') !== 'resource-keywords'){
this.box.insertAfter(this.input).css({top: 28, left: 0});
}else{
var pos = $.extend({}, this.input.position(), {
height: this.input.outerHeight()
});
this.box.insertAfter(this.input).css({top: pos.top + pos.height, left: pos.left});
}
};
</script>
<script type="text/javascript" src="{% url "lang" %}"></script>
<div class="modal fade" style="width: 100%; height: 100%;" id="_resource_uploading" data-backdrop="static" data-keyboard="false" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Uploading...</h1>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Upload in progress...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" style="width: 100%; height: 100%;" id="_thumbnail_processing" data-backdrop="static" data-keyboard="false" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Processing...</h1>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Updating Thumbnail...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="_thumbnail_feedbacks" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Message box</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>
2 answers
solution1
1 ACCPTED 2018-06-09 12:56:22
You haven't done anything to make the STATIC_URL variable available in the template, so it is being evaluated to an empty string.
There are various ways of doing this but perhaps the simplest would be to add django.template.context_processors.static to the context_processors list in your TEMPLATES setting.
Or you could call {% get_static_prefix as STATIC_URL %} at the top of your template.
Alternatively, don't use STATIC_URL at all but the {% static %} template tag:
<link href="{% static "lib/css/jquery.dataTables.css" %}?v={{ VERSION }}" rel="stylesheet" />
solution2
0 2018-06-09 11:45:52
If you think everything is true, add below code in settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
and then add below codes in urls.py
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_ROOT, document_root=settings.STATIC_ROOT)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unable to serve static files with Django runserver
Django 2.2.4 unable to serve my static files
Nginx serve static files for a Django app
Serve static files with django
Unable to serve static files in a Django development environment with Pinax
Unable to serve django static files via nginx and docker
Unable to serve static files like css, js in django python
Unable to serve Django static files on AWS elastic-beanstalk
How to serve static files securely using google app engine with django?
Configuring Django runserver to serve static files in a non-app directory?
Related Tags