Lately i've been trying to connect my django application that serves as an API to a react app that will work as the frontend (the react app was made with vite by the way). The issue that i'm having is that, no matter what i change in the index.html (frontend), urls.py or settings.py (backend) i always get the same error: TemplateDoesNotExist at /.
This would be my folder hierarchy, considering the react folder and django folder are at the same level (don't mind the name of the folders inside de hierarchy, i need to change them).
- React (front end):
This is the index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://va.exeiot.com/static/assets/media/logos/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Fuenes Material UI-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!--Fuentes EXEIOT-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">
<title>Video Analitica</title>
<!--Linea de refereencia para que el navegador pueda encontrar index.algo.js-->
<base href="/dist/">
<!--Fin referencia-->
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
- Django (backed, API):
In the Django directory the folder "backend" contains the settings of the django project and the folder "frontend" contains the api, views and models. This are the contents of:
- settings.py
import os
from pathlib import Path
import environ
# Environ
root = environ.Path(__file__) - 2
SITE_ROOT = root()
env = environ.Env(
# set casting, default value
DEBUG=(bool, False)
)
ENV_PATH = env.str('ENV_PATH', default=SITE_ROOT + '/.env')
environ.Env.read_env(ENV_PATH)
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
REACT_BASE_DIR = Path(__file__).resolve().parent.parent.parent
# App url
APP_URL = env('APP_URL')
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'not putting that here'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
# 'frontend.apps.FrontendConfig', Modificado para compatibilidad con exe-va-plataforma-ui
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django_extensions',
'frontend', # Añadido para compatibilidad con exe-va-plataforma-ui
'rest_framework'
]
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 = 'backend.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(REACT_BASE_DIR, 'exeiot-va-plataforma-ui', 'dist')],# Modificado para compatibilidad con exe-va-plataforma-ui
'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',
#'frontend.context_processors.app_url', Modificado para compatibilidad con exe-va-plataforma-ui
],
},
},
]
WSGI_APPLICATION = 'backend.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': env('POSTGRES_DB'),
'USER': env('POSTGRES_USER'),
'PASSWORD': env('POSTGRES_PASSWORD'),
'HOST': 'db',
'PORT': 5432,
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
LANGUAGE_CODE = 'es-es'
TIME_ZONE = 'America/Santiago'
USE_I18N = True
USE_L10N = False
USE_TZ = True
DATE_FORMAT = 'd-m-Y'
DATE_INPUT_FORMATS = ['%d-%m-%Y']
REST_FRAMEWORK = {
# Use Django's standard `django.contrib.auth` permissions,
# or allow read-only access for unauthenticated users.
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
],
"DATE_INPUT_FORMATS": ["%d-%m-%Y"],
"DATE_FORMAT": "%d-%m-%Y",
}
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = 'static/'# Modificado para compatibilidad con exe-va-plataforma-ui
STATICFILES_DIRS = [os.path.join(REACT_BASE_DIR, 'exeiot-va-plataforma-ui', 'dist', 'assets')]# Creado para compatibilidad con exe-va-plataforma-ui
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'
FILE_UPLOAD_HANDLERS = ["django.core.files.uploadhandler.TemporaryFileUploadHandler"]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
- backend/urls.py:
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
from frontend.views import index
""" Modificado para compatibilidad con exeiot-va-plataforma-ui """
urlpatterns = [
path('', index, name="index"),
path('admin/', admin.site.urls),
# path('accounts/', include('django.contrib.auth.urls')), Comentado para compatibilidad con exeiot-va-plataforma-ui
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)#\
# + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
- frontend/urls.py:
from django.urls import path, include
from django.contrib.auth import views as auth_views
from . import views
from django.contrib.auth.models import User
from rest_framework import routers, serializers, viewsets
from frontend.forms import UserLoginForm
from . import views
from . import api
from .api_custom import api_dashboard
from .api_custom import api_entrenamiento
# Routers provide an easy way of automatically determining the URL conf.
router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)
router.register(r'detecciones', views.DeteccionViewSet)
router.register(r'profiles', views.ProfileViewSet)
router.register(r'metadatas', views.MetadataViewSet)
router.register(r'datasets', views.DatasetViewSet)
router.register(r'modelos', views.ModeloViewSet)
router.register(r'clases', views.ClaseViewSet)
router.register(r'auditorias', views.AuditoriaViewSet)
urlpatterns = [
path('', views.index, name='index'),# ______________________________________________
# path('dashboard/', views.dashboard, name='dashboard'), | Comentado para compatibilidad
# path('procesamiento/', views.procesamiento, name='procesamiento'), | con exeiot-va-plataforma-ui
# path('entrenamiento/', views.entrenamiento, name='entrenamiento'), |
# path('entrenamiento_test/', views.entrenamiento_test, name='entrenamiento_test'), |
path('api/', include(router.urls)),
path('api/datasets/add', api_entrenamiento.datasets_add, name='api_entrenamiento.datasets_add'),
path('api/modelos/add', api_entrenamiento.modelos_add, name='api_entrenamiento.modelos_add'),
path('api/dashboard/general', api_dashboard.dashboard_general, name='api_dashboard.dashboard_general'),
path('api/dashboard/distribucion', api_dashboard.dashboard_distribucion, name='api_dashboard.dashboard_distribucion'),
path('api/dashboard/distribucion_clases', api_dashboard.dashboard_distribucion_clases, name='api_dashboard.dashboard_distribucion_clases'),
path('api/dashboard/distribucion_turnos', api_dashboard.dashboard_distribucion_turnos, name='api_dashboard.dashboard_distribucion_turnos'),
path('api/dashboard/distribucion_usuarios', api_dashboard.dashboard_distribucion_usuarios, name='api_dashboard.dashboard_distribucion_usuarios'),
path('api/dashboard/detalle_metadatas', api_dashboard.dashboard_detalle_metadatas, name='api_dashboard.dashboard_detalle_metadatas'),
path('api/detecciones/metadata', api.detection_2_metadata, name='api.detection_2_metadata'),
path('api/detecciones/upload', api.upload_detections, name='api.upload_detections'),
path('api/detections/tree', api.detections_tree, name='api.detections_tree'),
path('api/detections/data', api.detections_data, name='api.detections_data'),
path('api/metadatas/data', api.detections_data, name='api.metadatas_data'),
path('api/detections/params', api.detections_params, name='api.detections_params'),# __________
# path('accounts/login/', auth_views.LoginView.as_view(template_name='registration/login.html',|Comentado para compatibilidad
# authentication_form=UserLoginForm)), | con exeiot-va-plataforma-ui
]```
I read on a similar post that i probably need to add my react folder to installed apps, but i wouldn't know how to do that since the fact that the react folder is outside of the django root.
Any help is welcome and thanks in advance.