1. Setup Project

Project details#

To improve my understanding how the workflow of API’s works in a Fullstack app i created a small todo App.

Install and activate virtual environment#

In the root folder, on the terminal create a virtual environment.

Terminal command: python3 -m venv  venv

Activate command: source venv/bin/activate

Backend setup | Django#

Install django and all the main libraries#

1. pip install django

2. django-cors-headers

3. pip install djangorestframework

Create project in terminal:#

django-admin startproject backend

-> cd to the backend folder

Create an app in django in the terminal#

python manage.py startapp [name of the app]

Frontend setup | Vite + React#

Create a react app using vite#

Go back to the root folder and:

1. npm create vite@latest frontend -- --template react

-> cd frontend

2. npm install

Open VS code and the run the servers#

1. In the root folder open VS code:
   code .

-> Open two terminals and make sure your virtual environment is active

Run django server#

-> cd to backend

python manage.py runserver

Run react server#

-> cd to frontend

npm run dev

Set up the settings.py to include rest_framework and corsheaders#

```Python
CORS_ALLOWED_ORIGINS = [  
"http://127.0.0.1:5173",  
"http://localhost:5173",  
]
```

Application definition#

INSTALLED_APPS = [  
'django.contrib.admin',  
'django.contrib.auth',  
'django.contrib.contenttypes',  
'django.contrib.sessions',  
'django.contrib.messages',  
'django.contrib.staticfiles',  
External Apps  
'rest_framework',  
'corsheaders',  
Internal Apps  
'<Appname>',  -> Change to name of the Django App!
]

Add Middleware#

MIDDLEWARE = [  
'django.middleware.security.SecurityMiddleware',  
'django.contrib.sessions.middleware.SessionMiddleware',  
'django.middleware.common.CommonMiddleware',  
'django.middleware.csrf.CsrfViewMiddleware',  
'django.contrib.auth.middleware.AuthenticationMiddleware',  
'django.contrib.messages.middleware.MessageMiddleware',  
'django.middleware.clickjacking.XFrameOptionsMiddleware',
"corsheaders.middleware.CorsMiddleware",  -> Add this to Middleware!  
]

And we are done whit the Main App Setup.