DEV Community

Cover image for AI Flashcard: Set up basic local docker with fullstack project
Taki
Taki

Posted on

AI Flashcard: Set up basic local docker with fullstack project

#docker #fullstack #nextjs #nestjs

Docker concept and command in a friendly, beginner-friendly way. Think of this like you're setting up a virtual workspace for each part of your app.

🐳 What Is Docker? (in plain terms)

Imagine you're a chef and you want to cook a recipe that needs:

  • Specific tools
  • Specific ingredients
  • A special oven

Docker is like a sealed cooking station with everything already prepped: ingredients, tools, oven — all packed into a neat box. You just plug it in anywhere, and boom! It works exactly the same.

In dev terms:

  • A container = an isolated workspace with everything your app needs
  • A Dockerfile = the recipe for building that container
  • Docker Compose = the cookbook that runs multiple containers together (like frontend and backend)

👷‍♂️ Step-by-Step: Understanding Docker Setup

Let’s walk through the setup of a NestJS backend and a Next.js frontend, and how Docker helps us run them together on your local machine.

🔹 Step 1: The Dockerfile – Your App’s Recipe

Let’s start with NestJS (backend).

Here’s the backend/Dockerfile again — now with beginner-friendly explanation:

# 1. Start from an official Node image (like installing Node.js on a fresh computer) FROM node:18-alpine # 2. Set the directory inside the container where code will live WORKDIR /app # 3. Copy dependency files into the container COPY package.json yarn.lock ./ # 4. Install dependencies inside the container using yarn RUN yarn install # 5. Copy all the rest of your backend code into the container COPY . . # 6. Tell Docker we’ll use port 3000 for this app EXPOSE 3000 # 7. Run the app in dev mode (just like yarn start:dev on your own computer) CMD ["yarn", "start:dev"]
Enter fullscreen mode Exit fullscreen mode

👀 So in short:

  • Think of this as setting up a little dev computer just for NestJS
  • When you docker build, it runs this step-by-step to create that environment

Do the same for the frontend/Next.js, just change the port and command:

FROM node:18-alpine WORKDIR /app COPY package.json yarn.lock ./ RUN yarn install COPY . . EXPOSE 3001 CMD ["yarn", "dev"]
Enter fullscreen mode Exit fullscreen mode

🔸 Step 2: docker-compose.yml – The Team Manager

This file lives at the root of your project and brings both frontend and backend containers to life together.

Here's what it looks like, again with full beginner-friendly explanation:

version: "3.9" # Version of Docker Compose services: # You can think of "services" as your different apps (like backend and frontend) backend: # Name of the service build: ./backend # Tells Docker to look in backend/ and use its Dockerfile ports: - "3000:3000" # Maps local port 3000 to container's port 3000 volumes: - ./backend:/app # Syncs your local backend folder into the container (for live updates!) - /app/node_modules # Exclude node_modules to avoid conflicts command: yarn start:dev # What to run when the container starts restart: unless-stopped # Restart if it crashes frontend: build: ./frontend ports: - "3001:3001" volumes: - ./frontend:/app - /app/node_modules command: yarn dev restart: unless-stopped depends_on: - backend # Make sure backend starts first
Enter fullscreen mode Exit fullscreen mode

💡 Think of docker-compose.yml as the orchestra conductor — it starts both backend and frontend, makes sure they talk to the right ports, and even restarts them if they crash.

🏁 Step 3: Build & Run Everything

Just open your terminal and run:

docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

🔍 What’s happening here?

  1. --build: Builds containers from your Dockerfiles.
  2. Starts both backend and frontend
  3. Maps their ports so you can visit:
  • 🧠 http://localhost:3000 → NestJS
  • 🎨 http://localhost:3001 → Next.js

🚀 Step 4: Live Code Changes (Hot Reload)

Because of this line in docker-compose.yml:

volumes: - ./frontend:/app
Enter fullscreen mode Exit fullscreen mode

It means:

Any changes you make on your local machine inside frontend/ or backend/ are instantly visible inside the container.

So you can code like normal, and the app will auto-reload (just like without Docker).

🧹 Step 5: Stop Everything

To stop the containers:

docker-compose down
Enter fullscreen mode Exit fullscreen mode

💡 Think of this as unplugging the cooking stations when you're done.

🔍 Quick Reference

Concept Meaning (Friendly)
Dockerfile A recipe for building an app container
docker build Build the image based on the recipe
docker-compose A way to start multiple containers together
volumes Keeps your code changes synced in real time
ports Makes your app accessible on localhost
CMD The command that runs when the container starts

🧠 Final Thoughts

You’re not just “installing stuff in Docker” — you’re creating tiny, isolated computers for each part of your app. This is great because:

  • It works exactly the same on every computer (or server)
  • You avoid the “it works on my machine” problem
  • Easy to scale to production later

APPLY BASIC DOCKER TO PROJECT

Local development environment with Docker for a fullstack app using Next.js (frontend) and NestJS (backend).

🧱 App Architecture

📁 Folder Structure 

my-fullstack-app/ ├── backend/ # NestJS app │ ├── src/ │ └── ... ├── frontend/ # Next.js app │ ├── pages/ │ └── ... ├── docker-compose.yml
Enter fullscreen mode Exit fullscreen mode

You’ll have:

  • frontend/: your Next.js app
  • backend/: your NestJS app
  • docker-compose.yml: controls how containers work together

✅ Step-by-Step Setup

1. Scaffold Both Apps (using yarn)

🔧 Create backend (NestJS): 

npm i -g @nestjs/cli nest new backend # Choose yarn
Enter fullscreen mode Exit fullscreen mode

🎨 Create frontend (Next.js): 

npx create-next-app frontend --use-yarn # Choose TypeScript if you want
Enter fullscreen mode Exit fullscreen mode

2. Set Up Docker for Each App

🔸 backend/Dockerfile 

# Use Node image FROM node:18-alpine # Set working directory WORKDIR /app # Copy package and install deps COPY package.json yarn.lock ./ RUN yarn install # Copy all files COPY . . # Open port 3000 EXPOSE 3000 # Start NestJS in dev mode CMD ["yarn", "start:dev"]
Enter fullscreen mode Exit fullscreen mode

🔸 frontend/Dockerfile 

FROM node:18-alpine WORKDIR /app COPY package.json yarn.lock ./ RUN yarn install COPY . . EXPOSE 3001 CMD ["yarn", "dev"]
Enter fullscreen mode Exit fullscreen mode

3. Create docker-compose.yml

At root (my-fullstack-app/):

version: "3.9" services: backend: build: ./backend ports: - "3000:3000" volumes: - ./backend:/app - /app/node_modules command: yarn start:dev restart: unless-stopped frontend: build: ./frontend ports: - "3001:3001" volumes: - ./frontend:/app - /app/node_modules command: yarn dev restart: unless-stopped depends_on: - backend
Enter fullscreen mode Exit fullscreen mode

📝 Explanation:

  • volumes: Syncs local files → container (for live code change).
  • restart: unless-stopped: Restart if crashed.
  • depends_on: Makes sure backend starts first.

4. Update App Ports

In NestJS main.ts: 

// backend/src/main.ts await app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

In Next.js, default dev port is 3000. Change it in package.json: 

// frontend/package.json "scripts": { "dev": "next dev -p 3001" }
Enter fullscreen mode Exit fullscreen mode

5. Add .dockerignore (optional but recommended)

For both backend/ and frontend/:

node_modules .dockerignore Dockerfile docker-compose.yml
Enter fullscreen mode Exit fullscreen mode

6. Run the Apps

At the root of your project (my-fullstack-app/), run:

docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

✅ After Running

When you update your code (thanks to volumes), it reloads automatically 🎉

🧪 Test it

  1. Create a simple API route in backend/src/app.controller.ts: 
@Get('hello') getHello(): string { return 'Hello from NestJS!'; }
Enter fullscreen mode Exit fullscreen mode
  1. Call it in frontend/pages/index.tsx using fetch('http://localhost:3000/hello')

🔄 Stop Everything 

docker-compose down
Enter fullscreen mode Exit fullscreen mode

🛠 Tips

  • Use .env for managing environment variables
  • Mount volume node_modules as anonymous to avoid conflicts
  • If you're on Windows, Docker Desktop is required
  • If you want hot reload to work better with NestJS, install ts-node-dev 
yarn add --dev ts-node-dev # And in package.json "start:dev": "ts-node-dev --respawn --transpile-only src/main.ts"
Enter fullscreen mode Exit fullscreen mode

Top comments (0)