Django and React file structure

andrew.f · November 29, 2022

Hi,

I am new to Django and react. I am following the guide below and I have run into an issue. I think my file structure is the issue. The Guide I am following

The file structure in the guide is

├── manage.py
├── mysite
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── myapp      <----- a normal Django app
│   ├── __init__.py
│   ├── models.py
│   ├── urls.py
│   └── views.py
├── assets     <----- our front-end project source
│   ├── javascript
│   └── styles
├── static     <----- our front-end project outputs (and other Django static files)
│   ├── css
│   ├── images
│   └── js  
└── templates  <----- our Django template files
    └── myapp

and my file structure is:

|myproject
├── manage.py
├── .gitignore
├── package-lock.json
├── package.json
├── webpack.config.js
│ 
├── node_modules
│   ├── .....
├── myproject
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── myapp
│   ├── __init__.py
│   ├── models.py
│   ├── urls.py
│   └── views.py
├── js
│   ├── index.js
├── static
│   ├── css
│   ├── images
│   ├── js
|   ├── index-bundle.js
└── templates
    ├── myapp
    ├── hello_webpack.html

I have followed the guide step by step until adding the hello_webpack.html file.

The error I get when runserver is:

TypeError("Invalid path type: %s" % type(value).name) TypeError: Invalid path type: list

My /js/index.js

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

webpack.config.js

const path = require('path');

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

myproject/settings.py

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

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

myproject/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-webpack/', TemplateView.as_view(template_name='hello_webpack.html'))
]

templates/hello_webpack.html

{% load static %}
<!doctype html>
<html>
  <head>
    <title>Getting Started with Django and Webpack</title>
  </head>
  <body>
    <script src="{% static 'index-bundle.js' %}"></script>
  </body>
</html>

I have tried changing the STATICFILES_DIRS in settings.py but I cannot get it working. I would really appreciate any help.