I have a project, where my partner worked on the Frontend without using any frameworks, just used js, html and css. I wanted to attach that front to the back by using Django.
Here are the settings from settting.py
STATIC_ROOT = os.path.join('C:/Users/1224095/work/Backend/backend/static')
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
I added the {% load static %} in my html header. To not confuse you, I made a static directory named static, and inside I got my assets and plugins from the frontend, plus in every place, I added href= {% static 'path to the file' %}.
As a result, I am getting an error of 404, does anyone has an idea why ? here's an example of my html:
<!doctype html>
<html lang="en">
{% load static %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'assets/plugins/simplebar/css/simplebar.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/metismenu/css/metisMenu.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/vectormap/jquery-jvectormap-2.0.2.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/highcharts/css/highcharts-white.css' %}" rel="stylesheet" />
(1): You can only use this in your settting.py -> STATIC_URL = '/static/'
(2): You have to copy and paste your static files (JavaScript, CSS, etc) in your templates.
It will look like this:
App
|_migrations
|_templates
|_static
|__App (directory with the App name)
|_assets
|_js
|_css
|_img
|_plugins
|_....
Your HTML should look something like this:
<!doctype html>
<html lang="en">
{% load static %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'App/assets/plugins/simplebar/css/simplebar.css' %}" rel="stylesheet" />
Just don't forget to write App before each 'assets'