As a Django backend developer you might need to collaborate with a frontend dev who uses react or you might be a full stack developer interested in...
For further actions, you may consider blocking this person and/or reporting abuse
Great article but I'd like to add two things:
If you're using Git, React includes /build in its gitignore so that builds won't go into the repository but since you're serving your React app from Django, the build also needs to be in the project as if it were the standard templates and static files.
That's why I usually rename my build folder to something like react_build and use this name in my Django settings file.
Another thing, in a React SPA, React itself should take care of the routes and display the proper components, probably with react-router. In your example, what happens if I create a page in my React app in /dashboard for instance and go to 127.0.0.1:8000/dashboard ?
Django will throw a 404 because there's no /dashboard in the urls.py but that should not have been handled by Django but by React.
For that problem, what I'm doing is using a regex in urls.py that captures any path that should not be handled by Django and redirect them to the React app.
So for instance, my base urls.py will contain /admin, /api, /static and some other specific files and after all those, the regex that sends the React app back to any URL path so that React itself does the routing and display the appropriate components or a 404 page. My current regex is:
re_path('(?!.*(static))', TemplateView.as_view(template_name="index.html", content_type="text/html"))
Need to import re_path from django.urls and import TemplateView from django.views.generic or replace it with a view like in your example.
I hope that makes sense.
Yes it does. Thanks for reading. I'll look into the points you raised.
thanks for the most significant contribution
Thanks for reading
Informative! Keep it up!
Thank you
Great article!
Can you also do a simplistic API tutorial to add to this?
Hello Shingirai. Thanks for reading. I'll look for time to do that!! Fingers crossed
hey, this is exactly what i was looking for thanks!!
one doubt however, how would you deploy it?
Say we have a single repo for both
Application
|Django_BackendCode
|ReactFrontendCode
How would you deploy this?
deploy the backend separately (say at api.backend.com), and use
api.backend.comto fetch data using axios?Can I use pycharm to do all of this because it's easy to do the setup in pycharm instead of visual studio. What framework did you use? And another question do we need a lot of knowledge about python to dig deep into django.
Yes you can use any editor of your choice. You dont need to be a python guru to use django, but you need to understand the fundamentals of python strongly.
Can I connect Django with ReactJS with the folder structure like following picture?
dev-to-uploads.s3.amazonaws.com/up...
Hello xuwenjing. Yes you can use the folder structure in your attached picture. However, note that you will need to make few changes to your
settings.pyfile.1) You have to use a 'path' that would point to the
builddirectory in yourfrontenddirectory. You can find the code for that here: dev-to-uploads.s3.amazonaws.com/up...2) Next, under the templates and static files sections., you have to change the variable
BASE_DIRto the new variableREAL_BASE_DIRcreated in 1 above.Templates: 'DIRS': [os.path.join(REAL_BASE_DIR, 'frontend', 'build')]
Staticfiles: STATICFILES_DIRS = [os.path.join(REAL_BASE_DIR, 'frontend', 'build', 'static')]
This ensures that Django searches for templates and static files in your
frontendfolder which is outside the Django directoryThanks!
I followed the steps, but I only got a blank page: dev-to-uploads.s3.amazonaws.com/up...
The message when running : dev-to-uploads.s3.amazonaws.com/up...
Could you please have a look? Thanks for your help~
Hello xuwenjing,
The message displayed when running is okay. It shows that there is no issue with your code.
Regarding the blank page. Did you remember to run
npm run buildin your frontend directory?Can i see your frontend directory?
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??
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 thebuildfolder in the frontend directory. Hence the necessity for theSTATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend', 'build', 'static')]line.Great Tutorial! I really want to finish it, but unfortunetly i'm getting errors when trying to run python manage.py startapp core(Refer to the image for error). any assitance would be apprecaited 🙏🏻 I did make sure 'core' was added to my INSTALLED _APP section and removed /build from the .gitignore.
Thank you!
Here is the link to the repository where the project lives
github.com/Moodybleu/project1
@nagatodev thank you for your tutorial.
I have one question how to implement react router in this project.
like I want to route my page.
EX:127.0.0.1:8000/page ?
any suggestion would be appreciated.
Great! Thanks!
Nice read 💯🚀
Thanks for reading
Sorry, i don’t understand your question.
add npm install before npm start