Cannot connect .js files with html files in django-CodePudding

I am unable to connect my index.js file with Django and index.html Django is connected to index.html fine but not to index.js. I have attached my settings.py, urls.py, index.html, webpack.config.js, and index.js files below.

settings.py:

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

STATICFILES_DIR = os.path.join(BASE_DIR, 'static')
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')

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

STATIC_URL = 'static/'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [STATICFILES_DIR,TEMPLATES_DIR,],
        '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',
            ],
        },
    },
]

In settings.py DEBUG=True

urls.py:

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', TemplateView.as_view(template_name='index.html'))
]

index.html:

{% load static %}

<!doctype html>
<html>
  <head>
    <title>NEPTUNE Analytics</title>
  </head>
  <body>
    <script src="{% static 'index-bundle.js' %}"></script>
  </body>
</html>

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './js/index.js',  // path to our input file
  output: {
    path: path.resolve(__dirname, './static'),  // path to our Django static directory
    filename: 'index-bundle.js',  // output bundle file name
  },
};

index.js:


function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello World';
  return element;
}
document.body.appendChild(component())

I have tried changing DIRS in settings.py to

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'templates'),
   os.path.join(BASE_DIR, 'static'),

]

but I get a list error, and if I change it to a tuple, I get a tuple error.

CodePudding user response：

After Google for hours, I figured it out.

In the settings.py file under templates, DIRS should not include STATICFILES_DIRS and only include the path to the templates folder.

STAICFILES_DIRS should still be there but not called in DIRS

My settings.py now looks like this:

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

STATICFILES_DIR = os.path.join(BASE_DIR, 'static')
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')

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

STATIC_URL = 'static/'

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [STATICFILES_DIR,TEMPLATES_DIR,],
    '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',
        ],
    },
},
]

CodePudding user response：

Your template and static folder configuration in Settings.py should look like this, and both the template and static folders should be in the root directory.

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": ["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",
            ],
        },
    },
]

STATIC_URL = "/static/"
STATICFILES_DIRS = [BASE_DIR / "static"]

Whenever you want to link a js or css file in your html file, you use something like this

/static/name of folder where file is located/file-name

See example below

/static/js/index.js