Introduction

Follow the tutorail to build a to-do application using Django and React. And rewrite components by using Hooks. Furthermore, docker-composify them by following the tutorial and do some tweaks.

A to-do web app.

• Django
  • Django REST framework
  • Django CORS headers
• React.js
• Axios
• Docker Compose

Use Serializer from the REST framework to convert model instances to JSON so that it can communicate with the frontend. Docker-composifying the backend and the frontend to solve some problems caused by the environment, and it is more convenient to bring them up. Successfully deloyed on a Digital Ocean VPS (Virtual Private Server).

Ubuntu 20.04

Usage

Run

cd django-todo-react/
docker-compose up --build

Stop

cd django-todo-react/
docker-compose down

Stop and remove all images used by services

cd django-todo-react/
docker-compose down --rmi all

My notes

• setting up the backend
  • create todo app and register to INSTALLED_APPS
  • defining the todo model and register it to adminsite
• setting up the APIs
  • install djangorestframework and django-cors-headers, then add them to INSTALLED_APPS and MIDDLEARE. Add lcoalhost to CORS_ORIGIN_WHITELIST.
  • creating serializers (rest framework) for the Todo model
  • creating the TodoView, and specify the URL path for the API
• setting up the frontend
  • install bootstrap and reactstrap, then import Bootstrap's stylesheet in src/index.js
  • install axios and add a proxy to frontend/package.json