Menu
I am trying to include static files not located within the band app, but in a separate directory called static.
This directory contains a build directory, which contains CSS & JS directories.
Along with the files inside the CSS and JS directories, I'd also like to include minified files such as jquery, react and browser which are inside the bower_components directory.
My project structure below:
Music/
├── band/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── music/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── views.py
│ └── wsgi.py
├── node_modules/
├── static/
├──── static/
│ ├── bower_components/
│ ├── build/
│ ├── css/
│ ├── images/
│ └── js/
├── templates/
├── band/
├── MasterPages/
├── index.html
My settings.py within music contains the following:
STATIC_URL = '/static/'
STATIC_ROOT = 'C:/Users/Broski/PycharmProjects/Music/static'
MEDIA_ROOT = 'C:/Users/Broski/PycharmProjects/Music/upload'
This MasterPage.html file is located in the MasterPages directory, under templates:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Music</title>
<link rel="stylesheet" href="{% static 'build/css/main.css' %}" type="text/css" />
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/react/react.min.js' %}"></script>
<script src="{% static 'bower_components/babel/browser.min.js' %}"></script>
<script type="text/babel" src="{% static 'build/js/indexReact.js' %}"></script>
</body>
</html>
When I load the website, the template renders but the static files do not. I get a 404 error.
GET http://127.0.0.1:8000/static/css/main.css
127.0.0.1/:22 GET http://127.0.0.1:8000/static/bower_components/jquery/dist/jquery.min.js
127.0.0.1/:23 GET http://127.0.0.1:8000/static/bower_components/react/react.min.js
127.0.0.1/:26 GET http://127.0.0.1:8000/static/bower_components/babel/browser.min.js 404 (Not Found)
As you can see, I need React, Jquery and Browser to load correctly to continue this youtube tutorial:
Building a website with Django and React.js Video 1: Defining our project structure
Thank you
554
Fixed.
I confused STATIC_ROOT and STATICFILES_DIRS
Therefore I removed static_root and replaced to:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
Where base dir just points to my project folder.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With