Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 1.79 KB

README.md

File metadata and controls

56 lines (41 loc) · 1.79 KB
Raw

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