For Programmers, By Programmers.

Dockerize Django with Nextjs

A Bootstrapped Template of Django with Nextjs using Docker!

Youtube Video: Link

📚 Stack

• Next Js - The React Framework for the Web.

• Django - Django makes it easier to build better web apps more quickly and with less code.

• Typescript - JavaScript with syntax for types.

• Docker - Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code.

• Nginx - Advanced Load Balancer, Web Server, & Reverse Proxy.

  📸 Screenshots:

• Frontend:

• Backend:

📁 Project structure

$PROJECT_ROOT
│  
├── apps/web  # Django Backend
│  
├── apps/docker  # Docker files for web, www, nginx
│  
├── apps/www  # Nextjs App
│   
├── apps/web/requirements # Python Requirements
│
├── apps/web/manage.py # Run Django Commands
│
├── apps/www/package.json # npm commands.

---

🏆 Getting Started:

• Clone Repo

mkdir dockerize-django-with-nextjs
cd dockerize-django-with-nextjs
git clone https://github.com/codingforinnovations/dockerize-django-with-nextjs .

• Using Docker

docker-compose up --build

Open Django Server in : http://0.0.0.0:8000

Open Django Admin in : http://0.0.0.0:8000/admin

Open Nextjs Server in : http://0.0.0.0

Manual Way:

For Django:

• Create Virtual Environment for Python

pip install virtualenv
python -m venv .

• Activate Virtual Environment

source Scripts/activate

Window Users use: .\Scripts\activate

• Install Dependencies

pip install -r apps/web/requirements.txt

• Make Migrations

python manage.py apps/web/makemigrations
python manage.py apps/web/migrate

For Frontend

• Install Dependencies

npm install --prefix apps/www

• Run Dev Server

npm run dev

• Now for Bundling Your Frontend

npm run build

🎫 LICENSE:

MIT LICENSE .

🆕 Change Log:

Change Log .

Other places you can find us: