Django & React App

I’m trying to create simple web-app with Django, React.

Using Django for backend, React for frontend.

Manual- How to replicate)

1. Create project folder and python virtual environment

• pyenv or anaconda whatever you use, create venv for dependency control
• Backend setting

django-admin startproject backend

• Frontend setting

npx create-react-app frontend

install yarn

delete useless file (logo, sort of..)

create folder in ‘src’ folder: img(for saving static image), components(for saving javascript and css file), container(for wrapping files in components folder: this folder is directly routing!), services(for saving API files)

create folder in ‘components’ folder: Home, Diagnose, Recommendation.. whatever you want

2. Setting Backend

• create model

usually… 1) Product DB, 2) User demo DB, 3) User Specify DB (e.g. user response data in case of diagnose system)

python manage.py startapp {name of your app}

• edit files (in example of 1 DB)

models.py: initialize models

(create) serializer.py: make serializer

views.py: make view

admin.py: register DB

• type: python manage.py things

createsuperuser → makemigrations → migrates → runserver

• edit main backend setting.py

import os

add INSTALLED_APPS: your installed apps, corsheaders, restframework

add MIDDLEWARE: for cors setting

add CORS_ORIGIN_WHITELIST: for proxy frontend request

add TEMPLATES → ‘DIRS’: for register template from frontend

change LANGUAGE_CODE, TIME_ZONE

add STATICFILES_DIRS: for register image files from frontend

• edit main backend urls.py

import routers from rest_framework, view.py from app folder

API setting: (baseline — here)

Difference1. HometemplateView setup → from django.views.generic import ProductView is wrong
Difference2. as_view() should need argument (e.g. {‘get’: ‘list’})
*Limitation: this ref don’t have show interaction precisely btw frontend and backend → tunneling through axios should be edited!

• Django connect with React: GET & POST
• Edit React App
  html, css…
• #Deploy: EC2 setting
• #Deploy: EC2 setting