Git Meets Docker: Turbocharge Your Local Web Dev Workflow

Git Meets Docker: Turbocharge Your Local Web Dev Workflow

When building a web app with Docker on a local server (e.g., a Raspberry Pi or your dev machine), integrating Git version control streamlines development, tracks changes, and ensures smooth deployment. This guide shows how to combine Git and Docker effectively, using a Node.js web app as an example.

Why Combine Git and Docker?

• Git: Tracks code changes, enables experimentation (branches), and supports collaboration or backups (remote repos).
• Docker: Ensures consistent environments and simplifies deployment.
• Interplay: Git manages your source code, while Docker builds and runs it. Volume mounting in Docker syncs live changes without rebuilding, and Git commits lock in stable versions.

Step 1: Set Up Git Locally

1. Install Git: On Ubuntu:

   sudo apt install git

   Verify:

   git --version

2. Initialize a Git Repository: In your project folder (e.g., /path/to/webapp):

   git init

3. Add Files: Stage your web app files (server.js, Dockerfile, etc.):

   git add .

4. Exclude Sensitive Files: Create .gitignore:

   node_modules/
   .env

   Re-stage:

   git add .gitignore

5. Commit: Save your initial state:

   git commit -m "Initial commit: Web app setup"

Step 2: Dockerize Your Web App

Assume a Node.js app with this Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4000
CMD ["npm", "run", "dev"]  # Assumes nodemon in package.json

• Build Once:

  docker build -t webapp .

• Run with Volume:

  docker run -d -p 4000:4000 --name webapp-container --env-file .env -v $(pwd):/app webapp

  -v $(pwd):/app: Syncs local files to the container, enabling live updates.

Step 3: Git and Docker Workflow

Here’s how they interplay:

1. Develop with Live Updates: Edit server.js or HTML files. Docker’s volume mount syncs changes instantly. nodemon (if used) restarts the app—no rebuild needed. Test: http://localhost:4000.
2. Commit Changes: When satisfied:

   git add server.js
   git commit -m "Added new endpoint"

3. Handle Dependencies or Dockerfile Changes: Update package.json or Dockerfile? Rebuild:

   docker stop webapp-container
   docker rm webapp-container
   docker build -t webapp .
   docker run -d -p 4000:4000 --name webapp-container --env-file .env -v $(pwd):/app webapp

   Commit:

   git commit -m "Added dependency X"

4. Branch for Features: Experiment safely:

   git checkout -b feature/new-ui
   # Edit files, test in Docker
   git commit -m "Updated UI"
   git checkout main
   git merge feature/new-ui

Step 4: Backup with a Remote Repo (Optional)

• Push to GitHub: Create a repo on GitHub, then:

  git remote add origin https://github.com/yourusername/webapp.git
  git push -u origin main

  After changes:

  git push

Step 5: Version Your Docker Images

• Tag with Git Commit: After a commit:

  git rev-parse --short HEAD  # e.g., "a1b2c3d"
  docker build -t webapp:a1b2c3d .

• Deploy: Run the tagged image without -v for production.

How Git and Docker Interplay

• Development: Git tracks source code (server.js, etc.). Docker runs the app, syncing changes via -v. No rebuilds for code edits—commit when stable.
• Stabilization: Git branches isolate features; Docker tests them live.
• Deployment: Git pushes a stable version; Docker builds a final image.

Example Workflow

1. Start:

   docker run ... -v $(pwd):/app ...

2. Edit server.js, see changes at localhost:4000.
3. Commit:

   git commit -m "Feature done"

4. Push:

   git push

5. Deploy: Rebuild and run without -v.

Tips

• .env: Never commit—keep it local.
• Rebuilds: Only for dependencies or Dockerfile.
• Logs: Check

  docker logs webapp-container

  if stuck.

With Git and Docker, you get fast iteration and reliable versioning for your web app—happy coding!