DEV Community

Discussion on: How to connect Django to ReactJs

Collapse
 
bemall profile image
Bernard M

Can you update this with examples that show full paths of the Django project and React project? For example.
C:\Backend\React Django\env\project1
C:\Frontend\react-project\

Otherwise as it is, it is a bit confusing -
'DIRS': [os.path.join(BASE_DIR, 'frontend', 'build')], - BASE_DIR IS IN Django and back end repo so why add the front end which is supposed to be in its own front end repo

React-Django\env\project1\ - Django project and apps
But what directory is this in relation to the react project directory “front end”
noting that you will git init this to the Django repo, my guess is that the react project front end folder will be in a different folder, correct? But based on your template directory configuration, this is confusing as it shows that the template directory is in the Django project folder?


React front end folder and path ??
What directory is this in relation to the django project directory?
is this frontend folder in the django project??

Collapse
 
nagatodev profile image
Faruq Abdulsalam • Edited

Hello Bernard. Here is a screenshot of the folder structure for the tutorial: dev-to-uploads.s3.amazonaws.com/up...

The react frontend application folder replaces the default templates folder from which Django is meant to locate and load templates which would normally be specified in this format 'DIRS': [BASE_DIR/ 'templates'].

However, since we want the Django backend to make use of a react frontend while using a single server: http://127.0.0.1:8000, we need to point Django to the folder where it will get the frontend files which in the tutorial above is the build folder in the frontend directory. Hence the necessity for the STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend', 'build', 'static')] line.