DEV Community: Văn Hiếu Lê

Dockerizing a Django Backend with Multi-Container Images: A Step-by-Step Guide

Văn Hiếu Lê — Mon, 19 May 2025 00:00:00 +0000

Managing a Django backend in production can be tricky—especially when you need to run a database, background tasks, caching system, and a web server together. Docker and Docker Compose make this easier. They let you define and run all these services in containers that work together.

In this guide, I’ll walk you through how to containerize a Django project using Docker and Docker Compose with multiple services like MySQL, Redis, Celery, and Nginx.

Outline

Introduction
Project Structure Overview
Writing the Dockerfile
Composing Services with docker-compose.yaml
Service Breakdown
Environment Variables and Secrets
Development and Production Tips
Running and Testing the Stack
Conclusion
References

1. Introduction

When running Django in production, you need to think about dependencies, performance, and security. Docker helps by putting everything your app needs into containers. Docker Compose allows you to run several containers at the same time—like your Django app, database, task queue, and web server.

2. Project Structure Overview

Here’s what the project folder looks like:

.
├── Dockerfile
├── docker-compose.yaml
├── Pipfile
├── Pipfile.lock
├── nginx/
│ └── conf.d/
├── staticfiles/
├── your_project/
│ └── wsgi.py
└── ...

Dockerfile – Builds the image for the Django app.
docker-compose.yaml – Defines and manages all containers.
nginx/conf.d – Stores Nginx settings.
staticfiles/ – Contains Django static files after running collectstatic.

3. Writing the Dockerfile

This Dockerfile creates a container for your Django project:

FROM python:3.10-slim

WORKDIR /app

RUN apt-get update && apt-get install -y --no-install-recommends \
    build-essential \
    default-libmysqlclient-dev \
    pkg-config \
    curl \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN pip install --no-cache-dir pipenv

COPY Pipfile Pipfile.lock ./
RUN pipenv install --deploy --system && pip uninstall -y pipenv virtualenv-clone virtualenv

COPY . .

RUN python manage.py collectstatic --noinput

CMD ["gunicorn", "--bind", "0.0.0.0:8000", "your_project.wsgi:application"]

Main steps explained:

Uses a small Python image.
Installs tools and libraries for Django and MySQL.
Installs Python packages using Pipenv.
Copies project files into the container.
Collects static files for Nginx to serve.
Starts the app using Gunicorn, a reliable web server for Python apps.

4. Composing Services with `docker-compose.yaml`

The docker-compose.yaml file brings all the services together:

version: "3.8"

services:
  db:
    image: mysql:8.0
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
    command: --default-authentication-plugin=mysql_native_password
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 10s
      timeout: 5s
      retries: 5

  web:
    build: .
    restart: always
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started
    environment:
      - DATABASE_URL=mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@db:3306/${MYSQL_DATABASE}
      - REDIS_URL=redis://redis:6379/0
      - DEBUG=${DEBUG:-True}
      - SECRET_KEY=${SECRET_KEY}
      - ALLOWED_HOSTS=${ALLOWED_HOSTS:-localhost,127.0.0.1}
    volumes:
      - ./staticfiles:/app/staticfiles
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8000/health/"]
      interval: 30s
      timeout: 10s
      retries: 3

  celery:
    build: .
    command: celery -A your_project worker -l INFO
    restart: always
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started
    environment:
      - DATABASE_URL=mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@db:3306/${MYSQL_DATABASE}
      - REDIS_URL=redis://redis:6379/0
      - DEBUG=${DEBUG:-True}
      - SECRET_KEY=${SECRET_KEY}
    volumes:
      - ./staticfiles:/app/staticfiles

  celery-beat:
    build: .
    command: celery -A your_project beat -l INFO
    restart: always
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started
    environment:
      - DATABASE_URL=mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@db:3306/${MYSQL_DATABASE}
      - REDIS_URL=redis://redis:6379/0
      - DEBUG=${DEBUG:-True}
      - SECRET_KEY=${SECRET_KEY}
    volumes:
      - ./staticfiles:/app/staticfiles

  redis:
    image: redis:7
    restart: always
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]
      interval: 10s
      timeout: 5s
      retries: 5

  nginx:
    image: nginx:1.23
    restart: always
    ports:
      - "${NGINX_HTTP_PORT:-80}:80"
      - "${NGINX_HTTPS_PORT:-443}:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./staticfiles:/var/www/html/static
      - /etc/letsencrypt:/etc/letsencrypt:ro
    depends_on:
      web:
        condition: service_healthy

volumes:
  db_data:

db – MySQL database
web – Django app
celery – Celery worker for background jobs
celery-beat – Schedules recurring tasks
redis – Used for caching and as a Celery broker
nginx – Serves static files and acts as a reverse proxy

5. Service Breakdown

Database (MySQL)

Uses the mysql:8.0 image.
Data is stored in a Docker volume so it won’t be lost when containers stop.
Environment variables are used to set username, password, and database name.
A healthcheck waits until MySQL is ready before other services start.

Django Web App

Built from the Dockerfile.
Depends on db and redis.
Uses environment variables for setup (like DB connection and Redis).
Mounts the staticfiles folder for serving assets.
A healthcheck checks the /health/ endpoint.

Celery & Celery Beat

Both use the same image as the Django app.
celery handles background tasks.
celery-beat schedules repeating jobs.
Both need the database and Redis.
Share the same environment setup.

Redis

Uses the official redis:7 image.
Acts as an in-memory database and message broker.
Healthcheck makes sure Redis is running properly.

Nginx

Works as a reverse proxy and static file server.
Forwards requests to Django and serves static assets.
Starts only after the Django app passes its healthcheck.

6. Environment Variables and Secrets

Use environment variables to keep sensitive info out of your code. Store them in a .env file and load them in docker-compose.yaml.

Example variables:

MYSQL_USER, MYSQL_PASSWORD, MYSQL_DATABASE
DATABASE_URL, REDIS_URL
DEBUG, SECRET_KEY, ALLOWED_HOSTS

Never commit your .env file to version control (like GitHub).

7. Development and Production Tips

In development , mount your project as a volume to auto-reload code, and set DEBUG=True.
In production , set DEBUG=False and use a secure SECRET_KEY.
Run collectstatic during the Docker build so Nginx can serve static files.
Run migrations after all services are up.

8. Running and Testing the Stack

1. Build and Start:

docker compose up -d

2. Run Migrations:

docker compose exec web python manage.py migrate

3. Open Your App:

Visit http://localhost in your browser.
Static files are served by Nginx.
Celery and Celery Beat run in the background.

4. Check Status:

docker-compose ps

Each container should show a healthy status if running correctly.

9. Conclusion

Containerizing a Django backend with Docker makes it easier to build, test, and deploy your app. By breaking your system into services—like the database, task queue, and web server—you can manage and scale each part independently.

Using Docker Compose, you can spin up the whole stack with a single command. This setup not only saves time but also makes your deployment process more stable and secure.

If you're planning to move your Django app to production, this multi-container setup is a smart step forward. Happy coding!

10. References

Moving My Dockerized Backend from Azure VPS to a Cheaper VPS

Văn Hiếu Lê — Mon, 12 May 2025 00:00:00 +0000

Introduction

After running my backend server on an Azure Student VPS for about three months with a $100 budget, I started looking for a cheaper, long-term solution. My goal was to find a VPS that costs around $5–$10 per month and is easy to maintain for small projects.

Here’s how I migrated my Dockerized Django backend from Azure to another VPS, and what I learned from the experience.

My Azure VPS Specs

I used Azure's student subscription for three months. Here were the server specs:

1 vCPU
2 GB RAM (no swap)
32 GB SSD
OS: Ubuntu Server
Services: MySQL, Nginx, Redis, Python (Pipenv), Git

htop

df -H

I found that this configuration worked well for my small backend. So, I looked for a similar VPS spec in a more affordable price range.

Researching Affordable VPS Options

I checked several providers and compared their plans:

Provider	Price (USD)	Price (VND)	Specs
Vultr	$10.00	249,300 VND	1 vCPU, 2 GB RAM
CloudCone	$5.78	144,095 VND	1 vCPU, 2 GB RAM
Scaleway	$3.41	85,011 VND	1 vCPU, 2 GB RAM (pre-tax)
OVH	$0.97	24,182 VND	(Very basic specs)
Hetzner	$4.79	119,415 VND	1 vCPU, 2 GB RAM

_That is the result was returned by Perplexity, and I do not confirm the research yet! _

I also looked at VinaHost , a local Vietnamese provider. Their VPS offers:

3 vCPU
3 GB RAM
Cost: 250,000 VND/month (pre-tax)
50% discount for 6–12 month subscriptions

With the discount, I paid ~~125,000 VND/month (~~$5.10 per month) for 6 months. This plan gave me more resources at a cheaper rate — within my budget and flexible enough to adapt to future growth or changes.

Why I Dockerized My Backend

Each time I moved my backend before, I had to manually reinstall and configure everything:

Git
MySQL
Python + Pipenv
Nginx
Redis
SSL with Let's Encrypt

It was time-consuming and error-prone.

So, I decided to Dockerize my Django backend. I had some experience using Docker from my company’s projects (NestJS backend), where we used docker compose to run dev and prod environments easily.

I also learned that some frontend job interviews ask about Docker — so it’s a good skill to have.

I plan to write another blog post specifically on Dockerizing a Django backend soon.

Migration Steps

I documented my process for migrating the backend from Azure to the new VPS.

✅ On the Old VPS

Backup the MySQL database to a .sql file.
Backup Let's Encrypt certificates.
Save the Nginx configuration.
Write Dockerfile and docker-compose.yml.
Test the Docker setup on my local machine using WSL on Windows.

🚚 On the New VPS

Bought the new VPS from VinaHost.
Set up GitHub SSH to clone my project repo.
Set up MySQL container and created the database and user.
Imported the .sql backup into the database container.
Ran docker-compose up -d to start the app stack.
Handled Nginx conflict:
Pointed the domain DNS to the new VPS IP.
Restored SSL certificates from the backup.

Boom — my backend was live again!

Final Thoughts

This was my first time using Docker to migrate a server, and it made the process much easier and faster.

No more manually setting up services
Easy to test locally with docker compose
More flexibility to scale or move in the future

Thanks to VinaHost’s 50% discount , I got a 3GB RAM / 3vCPU VPS for just ~$5.10/month , well within my budget.

Feedback Welcome!

I’m still new to Docker, so if you notice any mistakes or have suggestions, feel free to leave a comment. I'd love to learn and improve my setup.

Thanks for reading! 🚀

Set up Celery production for Django project

Văn Hiếu Lê — Sat, 05 Apr 2025 00:00:00 +0000

🚀 Background

Celery is a cron job service commonly used in Django projects. In my case, I used Celery to reset user streaks at midnight (00:00 AM) for my application.

In development, I had to run three terminal windows:

One for the Django server: python manage.py runserver
One for the Celery worker: celery -A proj worker
One for the Celery beat: celery -A proj beat

That setup was a bit complex. So in this blog, I’ll share how I set up Celery as a production-ready service using systemd.

🛠️ Approach

When I first moved my app to production, I used Gunicorn to serve Django, but forgot about Celery. As a result, scheduled tasks didn’t run because both Celery Worker and Celery Beat need to run in parallel.

✅ Option 1: Using tmux

Initially, I used tmux:

SSH into the server.
Start a tmux session and split the window with Ctrl + b → %.
Run the worker and beat processes in separate panes.

Even after closing SSH, the processes stayed alive (confirmed using htop). This works, but it’s not ideal for long-term use.

✅ Option 2: Using systemd Services

When I got a new VPS, I wanted a better solution. After some research (and help from ChatGPT 😄), I found a reliable approach using systemd services to run Celery in the background.

Reference: Django with Celery in Production

⚙️ 1. Create the Celery Worker Service

Create a new service file:

sudo nano /etc/systemd/system/celery.service

Paste the following (replace user, paths, and [celery_app] accordingly):

[Unit]
Description=Celery Worker Service
After=network.target

[Service]
Type=simple
User=your_username
Group=your_username
WorkingDirectory=/home/your_username/your_project
ExecStart=/home/your_username/.local/share/virtualenvs/your-venv/bin/celery -A [celery_app] worker --loglevel=INFO
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

👉 Replace:

your_username with your actual Linux username.
[celery_app] with the value from your celery.py file.

Then run:

sudo systemctl daemon-reload
sudo systemctl enable celery
sudo systemctl start celery

🕒 2. Create the Celery Beat Service

Now create the Beat service:

sudo nano /etc/systemd/system/celery-beat.service

Paste the following:

[Unit]
Description=Celery Beat Service
After=network.target

[Service]
Type=simple
User=your_username
Group=your_username
WorkingDirectory=/home/your_username/your_project
ExecStart=/home/your_username/.local/share/virtualenvs/your-venv/bin/celery -A [celery_app] beat --loglevel=INFO
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

Then run:

sudo systemctl daemon-reload
sudo systemctl enable celery-beat
sudo systemctl start celery-beat

✅ Check status:

sudo systemctl status celery-beat

If you see active (running), it means everything is set up correctly.

🧾 Conclusion

That’s how I set up Celery and Celery Beat in production using systemd. It’s a clean, reliable, and maintainable way to manage background tasks in Django.

📚 References:

Thanks for reading! 🙏 Hope this helps you in your deployment journey.

Practice Touch Typing with MonkeyType

Văn Hiếu Lê — Sun, 16 Mar 2025 00:00:00 +0000

🚀 Update Process

Today is March 16, 2025—approximately one month since my last update. Initially, I didn't notice significant improvements in my typing skills, so I decided to increase my daily practice time from 10 minutes to 25 minutes. This adjustment helped accelerate my progress and resulted in new personal records:

Average Typing Speed: Improved to around 88–90 WPM for the 15-second tests.
New Personal Best (15s test): Achieved a record of 116 WPM 🎉.
New Personal Best (10-word test): Reached an impressive 143 WPM 🎯.

These results are encouraging and validate the effectiveness of increasing my daily practice time.

🎯 My Approach

⏳ Increasing Daily Typing Time

By practicing 25 minutes daily, I accumulate approximately 750 minutes (12.5 hours) per month. Although this increase is beneficial, it's difficult to precisely measure its impact due to various influencing factors:

My mood during practice sessions 😊
Fatigue levels after work 💤
Physical comfort and hand condition ✋

Because these factors vary daily, it's challenging to pinpoint exactly how much each contributes to my performance. Thus, I've decided to rely on the average WPM as a reliable indicator of improvement.

I trust in the principle of Normal Distribution 📊—most of my typing tests consistently fall within the 80–90 WPM range, indicating that my true average is approximately 88 WPM. This measurement feels accurate and reasonable.

🛠️ Using Monkeytype Logger Error Extension

To further refine my typing accuracy, I created a custom browser extension called Monkeytype Logger Error, which tracks and analyzes typing errors. This tool helps me identify problematic characters and words that frequently cause mistakes.

Here's how you can use it:

Install the extension from the Microsoft Store.
On Monkeytype.com, navigate to Settings:
Start typing! Your errors will be logged automatically.
After your session, export your error data by clicking the Download JSON button.

Next, visit the MonkeyType Analysis website and import your JSON file. The website will analyze your data and highlight frequent mistakes.

I then use ChatGPT to generate customized typing exercises based on these common errors, helping me target specific weaknesses more effectively.

⚠️ Important: Remember to turn off Always show words history when practicing custom texts to avoid data loops in your error logs.

🔄 Alternating Between 15s and 60s Tests

Recently, I adopted a new training strategy: alternating daily between short (15-second) and longer (60-second) typing tests. Each test type offers unique benefits:

15-second tests: Boost initial speed bursts ⚡️, improve accuracy early on, and reduce immediate errors.
60-second tests: Enhance typing endurance 🏃‍♂️, stability, and consistency—skills crucial for real-world tasks like coding or writing documentation.

I discovered that these two test types complement each other perfectly, creating a balanced improvement in both speed and endurance.

🎖️ Conclusion & Next Steps

This month's adjustments yielded noticeable improvements and new personal records—small victories that motivate me to continue this enjoyable journey toward mastering typing skills. My ultimate goal remains: achieving an average overall speed of 100 WPM 🚩.

Tracking progress through these blogs makes this journey fun and meaningful for me—not just for practical purposes but as a personal challenge. Stay tuned for future updates!

Feel free to explore more posts on my blog at heterl0.live, follow my projects on GitHub, or subscribe directly via RSS Feed. Happy typing! 🌟

Building Multi-Tenant Applications with Next.js: A Custom Subdomain Approach

Văn Hiếu Lê — Tue, 11 Mar 2025 00:00:00 +0000

What is Multi-Tenant Architecture?

Multi-tenancy is a software architecture where a single instance of an application serves multiple tenants (customers or users). Each tenant's data is logically isolated, ensuring privacy and security while sharing the same infrastructure, such as servers, databases, or applications. This model is widely used in SaaS platforms like Salesforce, Google Workspace, and Dropbox.

Key features of multi-tenancy:

Shared Infrastructure : Tenants share the same hardware and software resources.
Tenant Isolation : Data and configurations are isolated for each tenant.
Cost Efficiency : Shared resources reduce costs compared to single-tenant setups.
Scalability : Easily accommodates more tenants by leveraging shared resources.

Building a Multi-Tenant Application with Next.js

Checkout Demo

This section outlines how to create a multi-tenant application using Next.js with subdomain-based tenant separation (e.g., tenant1.yourdomain.com, tenant2.yourdomain.com).

Folder Structure

Organize your Next.js project as follows:

| 
├── app/
| ├── [subdomain]/ # Tenant-specific subdirectory
| │ ├── page.tsx # Main page for the tenant
| │ ├── layout.tsx # Layout for tenant pages
| └── middleware.ts # Middleware for request handling
| public/
| └── images/tenant1/ # Tenant-specific static assets
| package.json # Project configuration
| .env # Environment variables

Middleware for Subdomain Handling

The middleware handles routing, authentication, and request rewriting based on subdomains. Below is the middleware.ts code:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { domain } from "@/lib/env";

export function middleware(request: NextRequest) {
  const hostname = request.headers.get("host") || "";
  const url = request.nextUrl.clone();
  const tenantSlug = hostname.split(".")[0];

  if (hostname === domain || hostname === domain.split(":")[0]) {
    return NextResponse.redirect(new URL(`http://login.${domain}`));
  }

  if (tenantSlug === "login") {
    if (url.pathname !== "/" && url.pathname !== "/api/login") {
      return NextResponse.redirect(new URL("/", request.url));
    }
    return NextResponse.next();
  }

  // In this example for easy auth I use userId as cookie auth Token
  const userId = request.cookies.get("userId")?.value;
  if (!userId && tenantSlug !== "login") {
    return NextResponse.redirect(new URL(`http://login.${domain}/`, request.url));
  }

  url.pathname = `/${tenantSlug}${url.pathname}`;
  return NextResponse.rewrite(url);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico).*)",
  ],
};

How It Works

Subdomain Detection :
- The middleware extracts the subdomain from the host header to identify the tenant.
Authentication :
- If no userId cookie exists, users are redirected to the login subdomain (login.yourdomain.com).
Route Rewriting :
- Requests are rewritten to serve tenant-specific pages under /[subdomain].
Cookie Management :
- The login flow sets a userId cookie upon successful authentication.

Steps to Implement

Domain Configuration :
- Point your main domain and all subdomains to the same server.
Environment Variables :
- Define your root domain in an .env file (e.g., DOMAIN=yourdomain.com).
Local Development :
- Use host aliases or local DNS tools to test subdomains locally (e.g., 127.0.0.1 login.localhost).
Authentication Flow :
- Create a login page at login.yourdomain.com that sets a cookie (userId) upon user authentication.

Note: In the practice, we use JWT or cookie instead. cross-domain can't maintain the cookie, so I pass it through by using query params.

Tenant-Specific Pages :
- Build tenant-specific pages in the [subdomain] directory under app.

Advantages of This Approach

Scalability : Easily add new tenants by creating new subdirectories.
Isolation : Each tenant has its own namespace and data separation.
Flexibility : Middleware allows dynamic routing and authentication handling.

This setup ensures a robust multi-tenant architecture using Next.js while maintaining security and scalability through subdomain-based isolation and cookie-based authentication.

Disclaimer

The approach described in this blog post is based on my personal experience with a past project and may not be the most effective or efficient method for implementing multi-tenancy. While it draws inspiration from various sources, including How to Build a Multi-Tenant App with Custom Domains Using Next.js, it's important to note that this approach lacks robust authentication when users navigate to subdomains. For more comprehensive and up-to-date solutions, consider exploring other resources or official documentation. If you're interested in my other projects, you can check out my GitHub profile at https://github.com/heterl0/.

Reference

How to Build a Multi-Tenant App with Custom Domains Using Next.js

Building MonkeyType Logger: A Typing Tracker Error Extension

Văn Hiếu Lê — Fri, 28 Feb 2025 00:00:00 +0000

My Journey to Faster and More Accurate Typing

The Beginning

Around four months ago , I started practicing Monkeytype daily to improve my typing speed and coding efficiency. Initially, I made good progress, but after about one month , I got stuck at a speed of 80-90 WPM and couldn’t improve further.

To break through this plateau, I decided to track my typing mistakes systematically. I began writing down all the words I mistyped and used AI to analyze them , identifying patterns and areas for improvement. Additionally, I started practicing specific coding-related typing techniques to enhance accuracy.

Check out my extension here! Monkeytype History Logger - Microsoft Edge Addons

Automating the Error Tracking Process

I then thought: Why not automate this tracking process? This led me to develop a browser extension that automatically records error words from my typing history.

Extension for Tracking Typing Errors

Content.js (Capturing Typing Results)

This file detects the appearance of result history elements on the screen and sends an event to background.js for processing.

{
    "id": 1740714390907,
    "time": "2025-02-28T03:46:30.907Z",
    "words": [
      { "reason": "corrected", "word": "be" },
      { "reason": "corrected", "word": "part" },
      { "reason": "corrected", "word": "not" },
      { "reason": "error", "word": "then" },
      { "reason": "error", "word": "some" }
    ]
}

Each record consists of:

id : A unique identifier for the session.
time : The timestamp of the recorded session.
words : A list of words where mistakes occurred.
- reason : Explanation for the mistake:
- corrected: A word that was mistyped but corrected.
- error: A word that was mistyped and skipped.
- word : The actual word that caused the issue.

background.js (Handling Events)

This script listens for events and processes them. It currently supports three key actions:

Saving Records : The SaveRecords event stores error logs in chrome.storage.local. With the unlimitedStorage permission, we can store up to 10,000 records (each 100 records take about 50KB ).
Deleting Last Record : The DeleteLastRecords event removes the most recent entry for data management.
Downloading Records : This event enables users to download their records as a JSON file for offline analysis.

popup.html & popup.js (User Interface)

The extension’s popup displays:

Extension name
Last recorded session
Total stored records
Buttons for download, delete, and import functionalities

Current Issue : Sometimes, chrome.storage.local loses the records, resetting them to zero. As a workaround, I manually download and re-import the data. Fixing this bug is a priority for the next update.

Analyzing Typing Errors

Jupyter Notebook (AI-Based Analysis)

If you're familiar with Python and Jupyter Notebook , you can analyze your typing data using AI techniques. Simply:

Place monkeytype_data.json in the same directory as your Jupyter Notebook file.
Run the notebook to see detailed insights into your typing mistakes and improvements.

📊 View My Jupyter Notebook Analysis

Website for Data Visualization

I also built a Next.js web app (deployed on Vercel Hobby Tier ) that lets users:

Upload their JSON file.
Visualize typing mistakes and progress trends.
Gain personalized insights for improvement.

🌐 Visit My Analysis Website

This analysis helps me refine my typing habits and develop an AI-based assistant for further improvements.

Conclusion

If you want to improve your typing skills like I did, try this free and open-source extension. Follow the instructions and start tracking your mistakes.

💡 Benefits:

Real-time tracking of errors and corrections
AI-powered analysis for targeted improvements
Web-based visualization of your progress

🚀 How to Get Started:

Install the extension on your preferred browser.
Practice typing and let the extension track mistakes automatically.
Regularly review your errors and adjust your practice accordingly.

Remember, consistent practice is key to increasing your typing speed and accuracy. Happy typing! 🎯

Check Out My Work

🔗 My Extension on GitHub🔗 My Extension on Store🔗 My Jupyter Notebook Analysis🔗 My Website for Analysis🔗 Follow My Blog Feed

Build personal blog easy with 11ty.js

Văn Hiếu Lê — Thu, 20 Feb 2025 12:00:00 +0000

Introduce

At the end of 2024, after graduating from university, I wanted to build something meaningful using the skills and experience gained from my job. Initially, I planned to create a portfolio, but I wasn’t ready to design it. I also wanted something original rather than combining or copying existing designs. So, I decided to start with a personal blog instead.

What is Eleventy?

Eleventy (or 11ty) is a simple and fast static site generator that allows you to build websites quickly. It supports multiple templating languages, including HTML, Markdown, and Nunjucks. This makes it easy to deliver content quickly to readers while also simplifying deployment and maintenance.

Why I choose 11ty?

At work, I often use React and Next.js for projects. Some projects utilize Next.js as a headless CMS with WordPress for content delivery. This combination of business logic from Next.js and the powerful content management features of WordPress is very effective.

Initially, I wanted to create a blog using Next.js with Firebase and deploy it on Vercel. This seemed like a good approach for combining a portfolio and a blog.

Advantages:

Powerful Static Site Generation: Next.js could generate static sites efficiently by fetching content from Firebase. This setup would also allow me to write and store blog posts directly.
Rich Library Support: Combining my portfolio and blog into one platform would enable advanced customizations using the Next.js ecosystem.

Disadvantages:

Free Tier Limitations: Vercel's free tier limits deployments to 12 serverless functions, and each Firebase data fetch counts as one. This could be a problem as the site grows.
Complexity: The integration of Next.js with Firebase requires significant time and effort to set up and maintain, which could slow my progress.

I chose 11ty because it’s a simpler static site generator that aligns well with my goal of focusing on blog content.

Advantages:

Speed: Eleventy is incredibly fast, allowing me to deploy a blog quickly.
Flexible Templating: It supports multiple templating languages, which makes customization easy.

Disadvantages:

Limited Scope: Eleventy is primarily suited for blogs and simple static sites. It lacks advanced interactivity and business logic capabilities. ## Start with a Starter Projects — Eleventy When starting an 11ty project, there are many templates available to help you get started quickly. These templates provide pre-configured setups for various use cases, such as blogs, portfolios, and more. I chose the Official Starter template to begin. Link to the template. After selecting the "Official Starter" template, I followed the instructions to set up my project. This involved installing dependencies, initializing Git, and running a few commands to get everything up and running. ## How to Write Posts? I use Obsidian to write posts and sync them to the content/blog/ directory in my project. Writing in Markdown makes it easy to maintain posts. Here’s how I do it in a few steps: ### Step 1: Write the Post in Obsidian I create a folder in Vault's Obsidian name public will store my posts . Change setting Obsidian a little bit in File and links.
Turn off Use Wikilinks, 11ty only render image or link follow the format of .md not follow Obsidian.
Set Default location for new attachments: Choose Same folder as current file | Note: If a post doesn't contain images, you can create a single Markdown file. For posts with images, create a folder and name it the same as the Markdown file. #### Metadata for Posts You can add metadata for post with two ways:
File Property: Add each property individually in Obsidian.

Source Mode: Switch the file to source mode and add metadata like this:

---
title: "New Process Update"
description: "This blog about update my learn typing touch process"
date: 2025-01-05
tags:
  - touch-typing
---

| Tip: The file name serves as the slug for the post, so choose it carefully.

Step 2: Sync the posts from Obsidian to 11ty source

I use Windows, so I run the following bash command in the terminal to sync my posts:

robocopy "My Vaults Obsidian Public" "\eleventy-sample\content\blog" /MIR

pause

After syncing, check and test the build before proceeding to the next step.

Deployment

11ty is a simple static site generator. Once the site is built, the generated files are stored in the _site/ directory. You can deploy them using platforms like Vercel, Netlify, and others. Refer to the 11ty Deployment Guide for more details.

Deploying with Netlify

I use Netlify for my project. After signing in with GitHub or GitLab, I added the project to Netlify. The build process automatically starts, and the site is deployed with a subdomain provided by Netlify.

Adding a Custom Domain

In your 11ty project settings on Netlify, go to Domain Management and follow Netlify's instructions to add your custom domain.

Conclusion

This post shares my experience building a blog site with 11ty. If you notice any errors or have suggestions for improvement, feel free to contact me via Contact Page.

How to set up WordPress with Nginx and SSL

Văn Hiếu Lê — Wed, 12 Feb 2025 00:00:00 +0000

Introduction

As a front-end developer, I’ve always focused on building great user interfaces, but recently, I’ve been diving deeper into server management and deployment. In this blog, I’ll share my personal experience setting up WordPress on an Nginx server with SSL, a journey that has helped me understand web hosting, security, and performance optimization. Check me project here!.

Why I Chose This Setup

I wanted a reliable and secure setup for hosting WordPress sites, and after researching, I decided to use:

Ubuntu 22.04 LTS for stability and security
Nginx for better performance compared to Apache
SSL (Let’s Encrypt) for security and HTTPS support

This combination ensures that my WordPress sites are fast, secure, and scalable.

Step-by-Step Guide

1. Setting Up the Server

I started by updating my system and installing necessary packages:

sudo apt update && sudo apt upgrade -y

Then, I installed PHP, Nginx, and MySQL:

sudo apt install -y nginx mysql-server php-fpm php-mysql

This provided the foundation for running WordPress.

2. Installing and Configuring WordPress

I downloaded and extracted WordPress:

wget https://wordpress.org/latest.tar.gz
tar -xvzf latest.tar.gz
sudo mv wordpress /var/www/wordpress

I set the correct file permissions:

sudo chown -R www-data:www-data /var/www/wordpress/
sudo chmod -R 755 /var/www/wordpress/

3. Setting Up the Database

Using MySQL, I created a new database and user:

CREATE DATABASE wordpress_db;
CREATE USER 'wordpress_user'@'localhost' IDENTIFIED BY 'securepassword';
GRANT ALL PRIVILEGES ON wordpress_db.* TO 'wordpress_user'@'localhost';
FLUSH PRIVILEGES;

4. Configuring Nginx

I configured Nginx to serve WordPress efficiently. I edited the configuration file:

sudo nano /etc/nginx/sites-available/wordpress

Added the following configuration:

server {
    listen 80;
    server_name example.com;
    root /var/www/wordpress;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

After saving, I enabled the configuration and restarted Nginx:

sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/
sudo systemctl restart nginx

5. Enabling SSL with Let’s Encrypt

To secure the site with HTTPS, I installed Certbot:

sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot

I obtained an SSL certificate and configured Nginx:

sudo certbot --nginx -d example.com -d www.example.com

To ensure automatic renewal:

sudo certbot renew --dry-run

Lessons Learned

File Permissions Matter : WordPress won’t work correctly if permissions are wrong.
Database Security Is Important : Using a secure password and restricting privileges is crucial.
Nginx Configuration Can Be Tricky : Testing with nginx -t before restarting saved me a lot of debugging time.
SSL Is a Must : Modern websites need HTTPS for security and SEO benefits.

Conclusion

Setting up WordPress with Nginx and SSL was a rewarding experience. Not only did it help me understand backend technologies, but it also made me appreciate the work that goes into web hosting and security. I hope this guide helps anyone looking to set up their own WordPress site with a strong, secure foundation.

This is just the beginning—next, I plan to explore performance optimizations and caching strategies. Stay tuned! 🚀

DEV Community: Văn Hiếu Lê

Dockerizing a Django Backend with Multi-Container Images: A Step-by-Step Guide

Outline

1. Introduction

2. Project Structure Overview

3. Writing the Dockerfile

4. Composing Services with **docker-compose.yaml**

5. Service Breakdown

Database (MySQL)

Django Web App

Celery & Celery Beat

Redis

Nginx

6. Environment Variables and Secrets

7. Development and Production Tips

8. Running and Testing the Stack

1. Build and Start:

2. Run Migrations:

3. Open Your App:

4. Check Status:

9. Conclusion

10. References

Moving My Dockerized Backend from Azure VPS to a Cheaper VPS

Introduction

My Azure VPS Specs

Researching Affordable VPS Options

Why I Dockerized My Backend

Migration Steps

✅ On the Old VPS

🚚 On the New VPS

Final Thoughts

Feedback Welcome!

Set up Celery production for Django project

🚀 Background

🛠️ Approach

✅ Option 1: Using tmux

✅ Option 2: Using systemd Services

⚙️ 1. Create the Celery Worker Service

🕒 2. Create the Celery Beat Service

🧾 Conclusion

Practice Touch Typing with MonkeyType

🚀 Update Process

🎯 My Approach

⏳ Increasing Daily Typing Time

🛠️ Using Monkeytype Logger Error Extension

🔄 Alternating Between 15s and 60s Tests

🎖️ Conclusion & Next Steps

Building Multi-Tenant Applications with Next.js: A Custom Subdomain Approach

What is Multi-Tenant Architecture?

Building a Multi-Tenant Application with Next.js

Folder Structure

Middleware for Subdomain Handling

How It Works

Steps to Implement

Advantages of This Approach

Disclaimer

Reference

Building MonkeyType Logger: A Typing Tracker Error Extension

Table of Contents

My Journey to Faster and More Accurate Typing

The Beginning

Automating the Error Tracking Process

Extension for Tracking Typing Errors

Content.js (Capturing Typing Results)

background.js (Handling Events)

popup.html & popup.js (User Interface)

Analyzing Typing Errors

Jupyter Notebook (AI-Based Analysis)

Website for Data Visualization

Conclusion

Check Out My Work

Build personal blog easy with 11ty.js

Introduce

What is Eleventy?

Why I choose 11ty?

Step 2: Sync the posts from Obsidian to 11ty source

Deployment

Deploying with Netlify

Adding a Custom Domain

Conclusion

4. Composing Services with `docker-compose.yaml`