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

Вернуться на верх