Django + React (Vite)

I’m currently trying to set up Django as a backend with React (using Vite) for the frontend, and I’m running into a few questions about the best way to get them working smoothly together.

Has anyone done this and could share some advice? Specifically:

  1. What’s the most effective way to connect Django’s backend to a React frontend? Should I be focusing on Django REST framework for handling data, or are there other approaches that work well?

  2. How do you usually handle user authentication between Django and React, especially if social authentication is involved?

  3. Are there any good tutorials, articles, or videos you’d recommend for getting the whole setup right, including managing serialization, data flow, and development environments?

Thanks so much for any help or pointers you can share!

  1. Set Up Django Backend First, make sure your Django backend is set up and running.

  2. Set Up React Frontend with Vite Next, create your React frontend using Vite

  3. Enable CORS in Django To allow your React frontend to communicate with your Django backend, you need to enable Cross-Origin Resource Sharing (CORS). You can use the django-cors-headers package:

pip install django-cors-headers

Then, add it to your settings.py:

python INSTALLED_APPS = [ ... 'corsheaders', ... ]

MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ]

CORS_ALLOW_ALL_ORIGINS = True # For development only. Use a whitelist in production.

  1. Create API Endpoints in Django Set up your Django REST framework to create API endpoints that your React app can consume. You can follow the Django REST framework documentation for this.

  2. Fetch Data from Django API in React In your React app, use the fetch API or a library like Axios to fetch data from your Django backend

  3. Build and Deploy When you’re ready to deploy, build your React app using Vite

integrating React-Vite with Django. https://www.youtube.com/watch?v=NJVaySJAbw0&form=MG0AV3

Django React Integration with Vite -https://gist.github.com/sudarshan24-byte/ded3236d38b15787729de86c6cb420e3?form=MG0AV3

I’m stuck on the same thing too. After a lot of searching, I found a tutorial by PedroTech on YouTube about creating a CRUD application using React Vite for the frontend and Django for the backend. The integration felt much simpler and easier compared to what "create-react-app" offers. I’m now waiting for his e-commerce tutorial because it will likely cover router concepts on the frontend, similar to the backend, and also deployment.

Back to Top