DEV Community

Cover image for Django + Vite(React) + Render Part 1
Hikari
Hikari

Posted on

Django + Vite(React) + Render Part 1

I know that we can ask AI to develop pretty much anything these days, but it doesn’t always give the answers I want sometimes it makes mistakes or goes in a different direction than I expect.

So I’m writing this post as a reminder to myself: don’t expect the same answer every time, and ask more thoughtfully.

This post isn’t meant to share any new information or tips — it’s just a personal memo.

1. Setting Up the Backend Project

https://www.djangoproject.com/

What's Django?

Django is an open-source web framework written in Python, based on the MTV (Model-Template-View) architecture.
It comes with built-in features such as an admin interface, user authentication, form handling, and an Object-Relational Mapper (ORM), enabling rapid web application development.

With Django’s ORM, you can interact with the database using Python code without writing raw SQL.
URL routing and view functions handle HTTP requests, while templates are used to render dynamic HTML responses.
The admin interface is automatically generated by registering model classes in admin.py, allowing CRUD operations through the browser.

Django also prioritizes security, with protections against CSRF, XSS, and SQL injection enabled by default.
For building RESTful APIs, Django can be extended with Django REST Framework (DRF), providing a flexible and powerful API toolkit.

We have chosen Django as the backend framework for this project.

Setting up the Django project

Step 1. First, we will create the project root

mkdir project-root && cd project-root
Enter fullscreen mode Exit fullscreen mode

Step 2. Next, we'll create a directory to contain the backend project

mkdir backend && cd backend
Enter fullscreen mode Exit fullscreen mode

Step 3. Create a Django project named api

django-admin startproject api .
Enter fullscreen mode Exit fullscreen mode

Step 4. Next, we will install the necessary packages

pip install djangorestframework gunicorn python-decouple psycopg2-binary django-cors-headers
pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode
  • 🔧 djangorestframework : A framework for building APIs in JSON format with Django. It is essential when creating REST APIs to interact with a React frontend.
  • 🔫 gunicorn : A WSGI server for running Django in a production environment. The development server (runserver) should not be used in production environments like Render, so gunicorn is used instead.
  • 🔐 python-decouple : This is used to securely load environment variables from a .env file. Sensitive settings such as SECRET_KEY and DEBUG should be managed in the .env file rather than being hardcoded in the codebase.
  • 🐘 psycopg2-binary : This is a driver that enables Django to connect to a PostgreSQL database. As PostgreSQL is the default database provided by Render, it is essential.
  • 🌍 django-cors-headers : When making API requests from a different domain, such as a React frontend, CORS (Cross-Origin Resource Sharing) needs to be properly configured to allow JavaScript to communicate with the Django API.

2. Setting Up the Frontend with Vite (React)

https://vite.dev/

What's Vite(React)

Vite is a modern frontend build tool that offers lightning-fast development startup and optimized production builds. When used with React, it serves as an alternative to legacy tools like Create React App (CRA), providing significantly better performance and developer experience.

Vite leverages native ES modules (ESM) in the browser during development, enabling on-demand file serving and eliminating the need for bundling. This results in near-instant cold starts and fast Hot Module Replacement (HMR), which speeds up development iterations.

For production, Vite uses Rollup under the hood to bundle the application efficiently, ensuring minimal and optimized output.

Setting Up Vite (React)

Step 1. Go back to the project-root directory

cd ../
Enter fullscreen mode Exit fullscreen mode

Step 2. Create a directory named frontend and navigate into it

mkdir frontend && cd frontend
Enter fullscreen mode Exit fullscreen mode

Step 3. Create a Vite project (React + TypeScript)

npm create vite@latest . --template react-ts
Enter fullscreen mode Exit fullscreen mode

. indicates that the project will be created in the current directory.
react-ts specifies the React + TypeScript template.
Step 4. Install the dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Step 5. Run the app to verify it starts correctly (if needed)

npm run dev
Enter fullscreen mode Exit fullscreen mode

Step 6. Run the following command to install additional packages

npm install axios react-router-dom@6 zustand
Enter fullscreen mode Exit fullscreen mode
  • 🔁 Axios: An HTTP client library Used for communicating with backend APIs — such as fetching, sending, updating, or deleting data. Axios is preferred over the native fetch API because it is simpler and more convenient to work with. It provides features like request and response interceptors, which allow for centralized handling of common logic (e.g., adding headers, error handling). Additionally, Axios automatically parses JSON responses, so you can directly access the content via response.data.
  • 🧭 react-router-dom@6: A routing library for navigation and page transitions. Used to handle routing in React applications by defining and managing different pages within a Single Page Application (SPA) structure. Version 6 introduces a simpler and more intuitive syntax, making route management easier and more maintainable.
  • 🧠 zustand: A lightweight and minimalistic state management library Purpose: Used for managing global state in a React application — such as login user information, themes, notifications, etc. Zustand is popular for its simpler and more intuitive design compared to Redux. It is also more lightweight and efficient than React Context, resulting in fewer unnecessary re-renders. ## 3. Create the initial commit in Git

Step 1. Initialize a Git repository

git init
Enter fullscreen mode Exit fullscreen mode

Step 2. Create a .gitignore file (if it doesn’t already exist)
Add the following entries to project-root/.gitignore:

# Python
__pycache__/
*.py[cod]
*.sqlite3
.env

# Node
node_modules/
dist/
.vite/
*.log

# Django
staticfiles/

# VSCode and OS-specific files
.DS_Store
.vscode/
Enter fullscreen mode Exit fullscreen mode

Step 4. Add the changes to the staging area.

git add .
Enter fullscreen mode Exit fullscreen mode

Step 5. Make the initial commit

git commit -m "Initial commit: Django backend with Vite React frontend setup"
Enter fullscreen mode Exit fullscreen mode

Step 6. Push to GitHub (if the remote repository is already created)

git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Top comments (0)