Django with React

[Day1] Clone Coding

22.01.14(Fri)

Ref: https://tutorial.djangogirls.org/ko/django_urls/

set up virtual env

1. make venv inner git → 1) conda inavailable → 2) python -m {{name}} venv (success) → enter venv: “{{name}}\Scripts\activate” (success)
2. Create Django Webapp

Q) “python manage.py createsuperuser”: python = call specific python.exe, manage.py = run python script, what is createsuperuser?

pythoneverywhere server ID: Cury2022, PW: p***1000

3. Output: Something Wrong.. Deploy Stopped

[Day2] Clone Coding

22.01.16(Sat)

Ref: https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react

• i got error on my last CRUD…

• fail to deploy web using: netlify
• AWS build pipeline

• ref: https://travis-ci.org/
• ref: EC2
• ref: AWS lightsail (with processing unit)
• ref: connect django with AWS

price for connect django and AWS

[Day3] Clone coding of netflix

Ref: https://www.youtube.com/watch?v=XtMThy8QKqU&t=3935s

insightful code: to seperate banner css for background and background contents (see ‘header’ class and ‘div’ class)

firebase hosting terminal message

my first app ever! “firebase deploy”

URL: https://netflix-clone-huni.web.app

[Dy4] Connect Django and Crawler

How to upload image in django: http://www.learningaboutelectronics.com/Articles/How-to-insert-images-into-a-database-table-with-Python-in-Django.php

• uploading 10k image in github evoke error,
• it might be needed another server (e.g. S3?)

[Day5]

Set up AWS EC2, S3

22.01.29(Sat)

• set up git: private repo(needs SSH key),
• after editing privacy group, i can’t login to server (Putty: Connection Time Our error)

Connect Django & React with REST API framework

compare workflow of references

• Ref1.
  Installed Apps 1) main service app, 2) API app, 3) rest_framework, → edit url.py (in API app) →
  create view folder and main service app named python script (in API app) (create Serializer) →
  test API working status →
  (CREATE REACT APP) →
  edit pakage.json to make proxy (port #8000) →
  edit index.js to implement GET method →
  (Hard to understand further )
• Ref2. Installed Apps 1) main service app, 2) corsheaders app (and also edit middleware, cors whitelist), 3) rest_framework →
  edit settings.py to declare main port →
  (create Serializer) create serializer python script in (main service app) →
  (create View) edit(or create) view.py →
  (URL pattern) edit url.py →
  test API working status (in http://localhost:8000/api) →
  (CREATE REACT APP) →
  install bootstrap, reactstrap package →
  edit index.js to add ‘bootstrap.min.css’ →
  create ‘CustomModal’ class (i don’t know why) →
  edit package.json to enable proxy (port #8000) →
  edit App.js to implement GET method
• Ref3. Installed Apps 1) main service app, 2) corsheaders app (and also edit middleware, cors whitelist), 3) rest_framework →
  (create Serializer) create serializer python script in (main service app) →
  (create View) edit(or create) view.py →
  (URL pattern) edit url.py →
  test API working status (in http://localhost:8000/api) →
  (CREAT REACT APP) →
  edit package.json to enable proxy (port #8000) →
  (?) edit url.py to enable django url routing (+ frontend npm build)→
  (?) edit settings.py to what..

core concepts

• Serialization: define how instance made from class can be converted to json format
• CORS (Cross-Origin Resource Sharing): prevent privacy issue when port numbers are different in btw client and server

[Day6, 7] last day

22.01.30, 01.31

Goal1. Connect Django-React with DRF

Goal2. Deploy Django-React app in AWS EC2

Goal3. edit CSS

Manual- How to replicate)

• Create project folder and python virtual environment
• Backend setting: django-admin (create main app) → python manage.py startapp (create api/DB/… app)
• Frontend setting: npx create-react-app frontend
• 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

[Day 8] Connect Django & React

I was jammed at REST API issue.

• when Django return Promise object: Using async and await method
• when CORS error evoked: setting BASE_URL in axios.js to ‘http://localhost:8000/api/{name_of_my_app}’, (I got stuck in this problem…
  Invalid Case1. BASE_URL = ‘http://localhost:8000’ , axios.get(‘/api/{my_app}’) → CORS error
  Invalid Case2. BASE_URL = ‘http://loaclhost:8000/api’, axios.get(‘/{my_app}) → CORS error