Visual Studio Code Django project Error 404 Not Found

Question

My project is named Travello, following this here:

https://www.youtube.com/watch?v=Tt3mgy2ECug&list=PLsyeobzWxl7r2ukVgTqIQcl-1T0C2mzau&index=12) ,

When I runserver I get this error. Anybody have any clue how to fix this error:

[16/Apr/2020 20:27:21] "GET / HTTP/1.1" 200 22122 [16/Apr/2020 20:27:21] "GET /static/styles/bootstrap4/bootstrap.min.css HTTP/1.1" 404 1731
[16/Apr/2020 20:27:21] "GET /static/images/destination_2.jpg HTTP/1.1" 404 1698
[16/Apr/2020 20:27:21] "GET /static/images/destination_5.jpg HTTP/1.1" 404 1698
Not Found: /images/intro.png
Not Found: /images/travello.jpg
[16/Apr/2020 20:27:21] "GET /images/intro.png HTTP/1.1" 404 2149
[16/Apr/2020 20:27:21] "GET /images/travello.jpg HTTP/1.1" 404 2158
[16/Apr/2020 20:27:21] "GET /static/styles/bootstrap4/bootstrap.min.js.map HTTP/1.1" 404 1740
[16/Apr/2020 20:27:21] "GET /static/styles/bootstrap4/popper.js.map HTTP/1.1" 404 1719
Not Found: /images/testimonials.jpg
[16/Apr/2020 20:27:21] "GET /static/images/footer_1.jpg HTTP/1.1" 404 1683
[16/Apr/2020 20:27:21] "GET /images/testimonials.jpg HTTP/1.1" 404 2170
Not Found: /images/home_slider.jpg
[16/Apr/2020 20:27:21] "GET /images/home_slider.jpg HTTP/1.1" 404 2167

My settings.py file looks like this:

"""
Django settings for telusko project.

Generated by 'django-admin startproject' using Django 3.0.5.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# SECURITY WARNING: keep the secret key used in production secret!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'telusko.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'telusko.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILS_DIRS = [
    os.path.join(BASE_DIR, "static")
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')

and my urls.py in my travello folder is:

from django.urls import path 

from . import views

urlpatterns = [
    path("", views.index, name="index")

]

This is what I'm getting chrome console when I run server:

127.0.0.1/:11 GET http://127.0.0.1:8000/static/styles/bootstrap4/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
DevTools failed to parse SourceMap: http://127.0.0.1:8000/static/styles/bootstrap4/bootstrap.min.js.map
DevTools failed to parse SourceMap: http://127.0.0.1:8000/static/styles/bootstrap4/popper.js.map
(index):268 GET http://127.0.0.1:8000/static/images/destination_2.jpg 404 (Not Found)
(index):304 GET http://127.0.0.1:8000/static/images/destination_5.jpg 404 (Not Found)
2 (index):576 GET http://127.0.0.1:8000/images/intro.png 404 (Not Found)
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map testimonials.jpg:1 GET http://127.0.0.1:8000/images/testimonials.jpg 404 (Not Found)
:8000/static/images/footer_1.jpg:1 GET http://127.0.0.1:8000/static/images/footer_1.jpg 404 (Not Found) jquery-3.2.1.min.js:4 GET http://127.0.0.1:8000/images/home_slider.jpg 404 (Not Found)

​

I'm new to this so any help would be much appreciated. Thanks

Answer 1

This is quite simple really. In the error page you showed, there are two types of errors. The first looks like this.

27.0.0.1/:11 GET http://127.0.0.1:8000/static/styles/bootstrap4/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map

You can ignore these ones.

The second sort however,

(index):268 GET http://127.0.0.1:8000/static/images/destination_2.jpg 404 (Not Found)

Is the cause of the error. This is because while you modified the style and css files, you skipped modifying the background .jpg files in the form

{% static '............' %}  

How to resolve it: Go to your index file, and search manually for the blocks of code that describes the background of the webpage. modify them as i have described below

style="background-image:url(images/intro.png)"></div>

into

style="background-image:url({% static 'images/intro.png' %})"></div>

This should work for you! and Upvote it if it does.

Answer 2

1) What does this have to do with vs code? 2) Your STATICFILS_DIRS is not configured correctly.

STATICFILS_DIRS = [
    os.path.join(BASE_DIR, '/Users/username/Desktop/Telusko/Projects/telusko/static')
]

Use

STATICFILS_DIRS = [
    os.path.join(BASE_DIR, "static" )
]

This will look in folder called static that lives at the same level as your manage.py (BASE_DIR). You don't have to use this at all though if you keep a static folder in each app.

Also, just a heads up the tutorial is using django 2 and you're using django 3 which may or may not cause you problems (I haven't used 3 yet).