Unable to serve static files correctly in Django app again

A couple of weeks ago I tried to install a django application in google cloud VM (Ubuntu 16.04). As I described in this post, I had issues serving the static files correctly in Django app. For some reason the url for the static files were not build correctly. I have fixed this issue by modifying my base.html template (where all the js and css is loaded) and using {% static %} instead of the STATIC_URL method as described here.

Yesterday I tried to reinstall the application again in another frest VM but things for some reason do not work as expected. Although I made the above mentioned changes, I started getting the same errors as before:

enter image description here

It seems like that the "static" string is missing from the URL. For example: instead of serving the js as:

myIP/static/lib/css/assets.min.css

it serves them as:

myIP/lib/css/assets.min.css

I am not sure why this happens as I define the STATIC_URL in my local_settings.py file. More over in my settings.py file I have set the paths to directories as:

MEDIA_ROOT = '/var/www/geonode/uploaded'
STATIC_ROOT = '/var/www/geonode/static/'
STATIC_URL = '/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'),
  ]

My base.html file looks like this (DEBUG_STATIC is set to False):

     {% load i18n avatar_tags %}
    {% load account socialaccount %}
    {% load static from staticfiles %}
    <!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 "lib/css/assets.min.css" %}?v={{ VERSION }}" rel="stylesheet"/>
          {% endif %}

          <link href="{% static "geonode/css/ext-compatibility.css" %}?v={{ VERSION }}" rel="stylesheet" />
          <link href="{% static "geonode/css/ux-all.css" %}?v={{ VERSION }}" rel="stylesheet" />
          <link href="{% static "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">&times;</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">&times;</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 "lib/js/assets.min.js" %}?v={{ VERSION }}"></script>
        {% endif %}
        <script src="{% static "geonode/js/utils/utils.js" %}?v={{ VERSION }}"></script>
        <script src="{% static "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{ ...

EDIT

My virtualhost for the apache looks like this:

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>