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

    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
    
       Order allow,deny
       Options -Indexes
       Allow from all
    
    Alias /static/ /var/www/geonode/static/
    Alias /uploaded/ /var/www/geonode/uploaded/
    Alias /robots.txt /var/www/geonode/robots.txt
    
       Order allow,deny
       Deny from all
    
    
       Order allow,deny
       Deny from all
    

 
        Order allow,deny
        Options Indexes FollowSymLinks
        Allow from all
        Require all granted
        IndexOptions FancyIndexing
    

    
        Order allow,deny
        Options Indexes FollowSymLinks
        Allow from all
        Require all granted
        IndexOptions FancyIndexing
    

    
        Order allow,deny
        Options Indexes FollowSymLinks
        Allow from all
        Require all granted
        IndexOptions FancyIndexing
    

    
        Order allow,deny
        Options Indexes FollowSymLinks
        Allow from all
        Require all granted
        IndexOptions FancyIndexing
    

    
        Order allow,deny
        Options Indexes FollowSymLinks
        Allow from all
        Require all granted
        IndexOptions FancyIndexing
    


      Order allow,deny
      Allow from all
    

    ProxyPreserveHost On
    ProxyPass /geoserver http://localhost:8080/geoserver
    ProxyPassReverse /geoserver http://localhost:8080/geoserver

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 %}


  
    
    
    

    
    
    
    
    

    {% block title %}{{ SITE_NAME }}{% endblock %}
    {% block head %}
      {% if DEBUG_STATIC %}
          
          
          
          
      {% else %}
        
      {% endif %}

      
      
      
      
{% block extra_head %}
      {% endblock %}
    {% endblock %}
    
    
  

  
    
    {% block header %}
        
          
        
              
              GeoNode
            
            
              
                {% block tabs %}
                
              {% trans "Data" %}
              
                {% trans "Layers" %}
                {% trans "Documents" %}
                {% if user.is_authenticated %}
                {% trans "Remote Services" %}
                
                Upload Layer
                {% if 'geonode.contrib.createlayer' in INSTALLED_APPS %}
                  {% trans "Create Layer" %}
                {% endif %}
                Upload Document
                {% trans "Add Remote Service" %}
                {% endif %}
              
            
                
              {% if user.is_authenticated %}
{% trans "Maps" %}
              
                {% trans "Explore Maps" %}
                 {% trans "Create Map" %}
              
              {% else %}
              {% trans "Maps" %}
              {% endif %}
            
            
              {% trans "About" %}
              
                {% trans "People" %}
                {% trans "Groups" %}
                {% trans "Group Categories" %}
                {% if perms.announcements.can_manage %}
                {% trans "Announcements" %}
                {% endif %}
                
                {% trans "Invite Users" %}
                {% if user.is_superuser %}
                {% trans "Add User" %}
                {% trans "Create Group" %}
                {% endif %}
              
            

            {% block extra_tab %}
            {% endblock %}
            {% endblock %}
          
              

              
                
                  
                  {% if HAYSTACK_SEARCH %}
                  
                  {% else %}
                  
                  {% endif %}
                
              
                
            {% if not user.is_authenticated and ACCOUNT_OPEN_SIGNUP %}
            {% trans "Register" %}
            {% endif %}
            {% if user.is_authenticated %}
            
              
                {% 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 %}
                
              
              
                {% trans "Profile" %}
                {% trans "Recent Activity" %}
                {% trans "Inbox" %}
                
                Admin
                {% if 'geonode.geoserver' in INSTALLED_APPS %}
 GeoServer
                {% endif %}
                {% if user.is_superuser and USE_MONITORING %}
                
                {% trans "Monitoring" %}
                {% endif %}
                
                {% trans "Help" %}
                
                Logout
                
              
                      {% else %}
                      {% trans "Sign in" %} 
              {% endif %}
            
          
 
        
      
      {% endblock header %}
      

    
      
      You are using an outdated browser that is not supported by GeoNode.
      Please use a modern browser like Mozilla Firefox, Google Chrome or Safari.
    

  
    {% block middle %}
    
      {% include "_status_message.html" %}
      {% include "_announcements.html" %}
 {% include "_messages.html" %}
      {% block body_outer %}
      
        
        {% block body %}{% endblock %}
        
        
        {% block sidebar %}{% endblock %}
        
      
      {% endblock %}
    
    {% endblock middle %}
  

  {% block monitoring %}
  {% endblock %}

  {% block footer %}
  
    
      
        
          
            Data
            {% trans "Layers" %}
            {% trans "Documents" %}
            {% if user.is_authenticated %}
            {% trans "Remote Services" %}
            Upload Layer
            {% if 'geonode.contrib.createlayer' in INSTALLED_APPS %}
              {% trans "Create Layer" %}
            {% endif %}
            Upload Document
            {% trans "Add Remote Service" %}
            {% endif %}

        
        
          
            Maps
            {% trans "Explore Maps" %}
            {% if user.is_authenticated %}
             {% trans "Create Map" %}
            {% endif %}
          
        
                
          
            About
            {% trans "People" %}
            {% trans "Groups" %}
            {% if perms.announcements.can_manage %}
            {% trans "Announcements" %}
            {% endif %}
            {% trans "Invite Users" %}
            {% if user.is_superuser %}
            {% trans "Add User" %}
            {% trans "Create Group" %}
            {% endif %}
          
        
        
          
            {% trans "Powered by" %} {% trans "GeoNode" %} {% trans "version" %} {{ VERSION }}
            {% trans "Developers" %} | {% trans "About" %}

          
          {% trans "Language" %}
          {% if csrf_token != "NOTPROVIDED" %}
          {% get_current_language as LANGUAGE %}
          
          {% csrf_token %}
            
          
          {% endif %}
        
      
    
  
  {% endblock footer %}


    
    {% if not user.is_authenticated %}
    
      
        
          
            
            {% trans "Sign in" %}
          
          
            
              {% 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" %}
                
              {% endif %}
              
                {% trans "Username" %}:
                
              
 
                {% trans "Password" %}:
                
              
              
                 {% trans "Remember Me" %}
              
            
            
              
            
          
        
      
    
    {% endif %}
    

    {% if DEBUG_STATIC %}
    
    
    
    
    
    
    
    
    
    
    
    
    
    {% else %}
    
    {% endif %}

    
    {% include 'autocomplete_light/static.html' %}
    
    {% block extra_script %}{% endblock extra_script %}
    
    
    

        
            
                
                    Uploading...
                
                
                    
                      
                        Upload in progress...
                      
                    
                
            
        
    

    
        
            
                
                    Processing...
                
                
                    
                      
                        Updating Thumbnail...
                      
                    
                
            

    

    
      
        
          
            
            Message box
          
          
            ...

Daniel Roseman · Accepted Answer

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:

Unable to serve static files correctly in Django app

Answers (2)

Related Questions