This repository serves as a starting point for developing a production-ready application using Django Rest Framework, React with Typescript and Postgres in a Dockerized environment with an option to deploy to Heroku. Running development setup without docker-compose is also possible.

Tools, libraries, frameworks:

This setup has been tested with Python 3.8/3.9 and Node 14.

Backend

• Python 3.8/9
• django, djangorestframework Django + Django Rest Framework
• django-cors-headers - handling cross origin requests
• coverage - for code coverage reports and running unit tests
• psycopg2 - needed to use Postgres (in Docker container)
• gunicorn - production wsgi http server
• whitenoise - building static files
• black, isort, flake8 - for code quality (optional)

Suggested packages:

• drf-yasg - open api documentation (swagger and redoc)
• django-rest-auth, django-allauth, djoser - making auth easier
• django-filter - enables filtering querysets with url parameters and more
• django-import-export - import/export data from admin page
• django-debug-toolbar - useful debugging tool

Frontend

• Node 14
• react - React
• typescript - Typescript
• react-router-dom - frontend routing
• axios - for making HTTP requests

Suggested packages:

• UI libraries such as Chakra-UI, Material-UI, Reactstrap, TailwindCSS etc.
• react-query - very useful package which handles data fetching logic for you
• formik + yup - handling form state and validation
• @reduxjs/toolkit + required packages (react-redux, redux etc.) - library which makes Redux much easier to understand and use
• cypress - for e2e testing

Development setup

Without Docker

Backend

Create a virtual environment from cmd (or do it in Pycharm manually)

cd backend
python -m venv venv

Note: please adjust the command with the python executable on your computer, because sometimes (example: on Ubuntu or macOS) Python 3 can only be executed using python3, not python.

Activate the virtual environment that was just created On Windows:

venv\Scripts\activate

On Linux/macOS:

source venv/bin/activate

If successful, there should be (venv) in your cmd/terminal prompt.

Install the required packages with the following command.

python -m pip install --upgrade pip
pip install -r requirements.txt

Run django application from cmd (or add new Django configuration if using Pycharm)

python manage.py runserver

Preparing (if there are any changes to db schema) and running migrations

python manage.py makemigrations
python manage.py migrate

Create superuser

python manage.py createsuper user

Frontend

Install node dependencies.

cd frontend
npm install

Run development server in second terminal

npm start

Backend tests coverage

cd backend

Run tests using Coverage (unit tests + report) instead of python manage.py test

coverage run manage.py test

Get report from coverage:

coverage report -m

With Docker

First define environmental variables in .env in root directory:

DB_NAME
DB_USERNAME
DB_PASSWORD

Make sure Docker Engine is running.

While in root directory, build docker images and run them with docker-compose. This might take up to few minutes. Rebuilding image is crucial after installing new packages via pip or npm.

docker-compose -f docker-compose.dev.yml up --build

Application should be up and running: backend 127.0.0.1:8000, frontend 127.0.0.1:3000, and nginx 127.0.0.1:8080.

If images had been installed and no additional packages have been installed, just run to start containers:

docker-compose -f docker-compose.dev.yml up

Bringing down containers with optional -v flag removes all attached volumes and invalidates caches.

docker-compose -f docker-compose.dev.yml down

To run commands in active container:

docker exec -it <CONTAINER_ID/CONTAINER_NAME> <command>

In case there is no bash installed, try:

docker exec -it <CONTAINER_ID/CONTAINER_NAME> /bin/sh

e.g

docker exec -it backend python manage.py createsuperuser
docker exec -it backend coverage run manage.py test
docker exec -it frontend /bin/sh

CI/CD

This repository uses Github Actions to run test and deployment pipeline.
tnd.yml - runs backend-frontend test separately.

There's also have automatic deploys application to Heroku. You need the autorization token for the deployment.

heroku create {your-app-name}

Make sure you are logged in to Heroku. Generate an API token for your Heroku profile

heroku authorizations:create

Furthermore, There's success/failure notification discord action that make teammates or another developer's work easier to handles mis-communication about merging PRs, as projects become more complex, so too does the process of building and testing the code.

code-quality.yml - runs backend and frontend code quality separately.

Production Deployment

1. Create Heroku Account

2. Download/Install/Setup Heroku CLI

   • After install, log into Heroku CLI: heroku login

3. Run: heroku create <app name> to create the Heroku application

4. Set your environment variables for your production environment by running:

   heroku config:set VARIABLE=value
   

   Variables to set: DJANGO_SETTINGS_MODULE=core.settings.prod, DJANGO_SUPERUSER_USERNAME, DJANGO_SUPERUSER_PASSWORD, PRODUCTION_HOST=<app name>.herokuapp.com, SECRET_KEY,

5. Run: heroku stack:set container so Heroku knows this is a containerized application

6. Run: heroku addons:create heroku-postgresql:hobby-dev which creates the postgres add-on for Heroku

7. Deploy app by running: git push heroku master/main,
   or manually in Heroku dashboard
   or by pushing to your github repository, having Automatic Deploys set up

8. Go to <app name>.herokuapp.com to see the published website.

Run commands in Heroku:

heroku run bash --app <your_app_name>

e.g

heroku run bash --app django-react-heroku-test
~ $ python backend/manage.py createsuperuser