README.example.md

Django React Starter

• Django React Starter
  • Structure
  • Getting started
    • Pre-requisites
    • Installation
  • Running the app
    • How it works
    • Running commands
  • QA
    • Using git hooks
    • GitHub Actions
  • Available URLs
  • Deployment
  • Made by JKDev

Structure

This project contains both the frontend and backend of the application:

• /backend: Django application which uses:
  • Postgres for the database
  • RabbitMQ for the message broker
  • Celery for background tasks
  • MeiliSearch for search
• /frontend: React application

Note that when building and deploying the application, the frontend is built and served by the backend directly, meaning we only deploy 1 application.

Getting started

Pre-requisites

This application is build using docker and docker-compose. Make sure to install them:

• Docker
• Docker Compose

Installation

Before starting the application, you will need to create the .env and .env.test files

cp backend/.env.example backend/.env
cp backend/.env.test.example backend/.env.test

Then you can start the application:

docker-compose up

While the entire project runs with docker-compose, you might want to install a python virtual environment and the node modules locally for a better IDE experience.

Running the app

How it works

Regarding the way we boot the Django app:

• docker-compose up will built and boot all of our containers
• The django container will call supervisord to boot the Django app
• The supervisord.conf will call both run-app.sh and run-celery-worker.sh
• run-app.sh will run a few commands and start the app

Also, when building the production image, the frontend is built and served by the backend directly.

Running commands

Because everything runs in docker containers, commands also need to be run inside the container. To make things simpler, a Makefile is provided for frequent/common commands.

make api_makemigrations
make front_test
make setup_githooks

Run make help for more info.

QA

Using git hooks

Git hooks are set in the .githooks folder (as .git/hooks is not tracked in .git)

Run the following command to tell git to look for hooks in this folder:

git config core.hooksPath .githooks

or you can run the Makefile action

make setup_githooks

GitHub Actions

We use GitHub actions to verify, build, and deploy the application. We currently have:

• dependabot: Dependabot configuration for frontend dependencies
• update-python-dependencies: Updates the python dependencies using uv
• qa-backend: runs ruff, mypy, and tests
• qa-frontend: runs biome and frontend tests
• rebase-check: checks if the branch can be rebased on main
• deploy: deploys the application on fly.io

Available URLs

Name	URL
Frontend	http://localhost:3000/
Backend
-- Home	http://localhost:8000/
-- Admin	http://localhost:8000/admin/
-- Swagger	http://localhost:8000/api/swagger/
-- API	http://localhost:8000/api/v1/
Meilisearch
-- Default UI	http://localhost:7700/
-- Advanced UI	http://localhost:24900/
RabbitMQ
-- Connection	http://localhost:5672/
-- Management UI	http://localhost:15672/

Deployment

Deployment is done through fly.io. When deploying the application for the first time, you will need to:

• Create an account on fly.io
• Install the flyctl CLI
• Run fly launch to create a new application
• Configure it however you want
• Make sure to set the FLY_ACCESS_TOKEN secret in the GitHub repository
• Then create a new release to trigger the deploy github action

Made by JKDev