Django + Nextjs Template: Standardised CFC Tech Stack
The easiest way to get started is using the VS Code Dev Container:
-
Prerequisites:
-
Open in Dev Container:
- Clone this repository
- Open the project in VS Code
- When prompted, click "Reopen in Container" or use
Ctrl+Shift+P→ "Dev Containers: Reopen in Container"
-
Start the application:
# Terminal 1: Start the frontend cd client && npm run dev # Terminal 2: Start the backend cd server && python manage.py runserver
-
Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- Admin panel: http://localhost:8000/admin
Note: Only follow these steps if you're NOT using the dev container.
- Node.js 18+ and npm - Download here
- Python 3.12+ - Download here
- Poetry (Python package manager) - Installation guide
- Docker Desktop - Download here
git clone <your-repo-url>
cd <project-name>Poetry (Python package manager)
# Official installer (*nix)
curl -sSL https://install.python-poetry.org | python3 -# Windows
(Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | py -Only If that fails, use pipx
# install pipx if not already installed - any non-super old version will be fine
# macOS
brew install pipx
pipx ensurepath
# Linux (requires a python3 installation - see above)
python3 -m pip install --user pipx
python3 -m pipx ensurepath
# Windows
# If scoop is not installed, first install it:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression
# Then install pipx
scoop install pipx
pipx ensurepathOnce pipx is installed:
pipx install poetrynpm (Node Package Manager)
Using Chocolatey (suggested):
# Download and install Chocolatey:
powershell -c "irm https://community.chocolatey.org/install.ps1|iex"
# Download and install Node.js:
choco install nodejs-lts --version="22"
# Verify the Node.js version:
node -v # Should print "v22.17.0".
# Verify npm version:
npm -v # Should print "10.9.2".Using the installer: Download the installer for npm here.
(You can get this manually by going to https://nodejs.org/en/download/ and downloading the prebuilt installer, please don't try using the docker solution)
Using nvm (suggested):
# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js:
nvm install 22
# Verify the Node.js version:
node -v # Should print "v22.17.0".
nvm current # Should print "v22.17.0".
# Verify npm version:
npm -v # Should print "10.9.2".Using brew:
# Download and install Homebrew
curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
# Download and install Node.js:
brew install node@22
# Verify the Node.js version:
node -v # Should print "v22.17.0".
# Verify npm version:
npm -v # Should print "10.9.2".Using nvm (suggested):
# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js:
nvm install 22
# Verify the Node.js version:
node -v # Should print "v22.17.0".
nvm current # Should print "v22.17.0".
# Verify npm version:
npm -v # Should print "10.9.2".Or just use your package manager (see here).
cd server && docker compose up -dBefore proceeding, create your environment files by copying the examples:
cp ./client/.env.example ./client/.env && cp ./server/.env.example ./server/.envBackend (.env in server/)
APP_NAME=DjangoAPI
APP_ENV=DEVELOPMENT
API_SECRET_KEY=your-secret-key-here
API_ALLOWED_HOSTS=.localhost 127.0.0.1 [::1]
POSTGRES_HOST=localhost
POSTGRES_NAME=your_db_name
POSTGRES_USER=your_username
POSTGRES_PASSWORD=your_password
POSTGRES_PORT=5432
DJANGO_SUPERUSER_PASSWORD=Password123
DJANGO_SUPERUSER_EMAIL=[email protected]
DJANGO_SUPERUSER_USERNAME=admin
FRONTEND_URL=http://localhost:3000Frontend (.env in client/)
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000cd server
poetry install
# This line will run `poetry shell` if you are using poetry v1, and `eval "$(poetry env activate)"` otherwise.
poetry --version | grep -qE 'version 1\.' && poetry shell || eval "$(poetry env activate)"
python manage.py migrate
python manage.py createsuperuser # optional
python manage.py runservercd client
npm install
npm run dev- Frontend: http://localhost:3000
- Backend API: http://localhost:8000
- Admin panel: http://localhost:8000/admin
cd server
# Run development server
python manage.py runserver
# Create migrations
python manage.py makemigrations
# Apply migrations
python manage.py migrate
# Create superuser
python manage.py createsuperuser
# Run tests
python manage.py test
# Reset database (nuclear option)
./nuke.shcd client
# Development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linting
npm run lint
# Fix linting issues
npm run lint:fix
# Type checking
npm run typecheck
# Format code
npm run formatIf the models are updated, be sure to create a migration:
python manage.py makemigrations # create migration
python manage.py migrate # apply migrationsIf you run into migration conflicts that you can't be bothered to fix, run nuke.sh to clear your database. Then, run migrations again.
You can run npm install and poetry install in the respective client and server folders to install the newest dependencies.
If you modify anything in the docker folder, you need to add the --build flag or Docker won't give you the latest changes.
Edit the .env file in the respective directory (client or server).
