Dockerizing Strapi: A Complete Guide

        # Step 1: Create a Strapi project (if not already created)
        npx create-strapi-app my-project --quickstart --no-run
        
        # Step 2: Navigate into the project directory
        cd my-project
        
        # Step 3: After setting up the Strapi project, you can proceed with Docker configuration
            

# dev | prod
ARG RUN_MODE=dev

# === Dev Mode ===

FROM node:18 as dev


WORKDIR /app

ADD ./ /app

RUN npm install

ENTRYPOINT [ "npm", "run", "develop" ]



# === Dev Mode ===

FROM node:18 as prod

WORKDIR /app

ADD ./ /app

RUN npm install


ENTRYPOINT [ "npm", "start"]

# Pick the container from selected run mode
FROM {RUN_MODE}
            

version: "3.9"
services:
  strapi:
    build:
      context: ./server
      dockerfile: Dockerfile
    ports:
      - "24000:1337"
    environment:
      DATABASE_CLIENT: postgres
      DATABASE_NAME: strapi
      DATABASE_HOST: postgres
      DATABASE_PORT: 5432
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi
      NODE_ENV: development
    volumes:
      - ./server:/app
      - /app/node_modules
      - /app/build
    depends_on:
      - postgres

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    tty: true
    stdin_open: true

  postgres:
    image: postgres:15
    restart: always
    environment:
      POSTGRES_DB: strapi
      POSTGRES_USER: strapi
      POSTGRES_PASSWORD: strapi
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  postgres_data:

// Directory structure for a Strapi Project width Docker


strapi-docker-starter/
├── frontend/
│   └── Dockerfile
├── server/
│   ├── Dockerfile
│   ├── .strapi/
│   ├── .tmp/
│   ├── build/
│   ├── config/
│   ├── database/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   ├── types/
│   ├── .env
│   ├── package.json
│   └── ...
├── docker-compose.yml

            

**Installing Remote Development Extension:**

1. Open VS Code  
2. Go to Extensions (or press Ctrl+Shift+X)  
3. Search for "Remote - Containers"  
4. Install the extension from Microsoft  
   [VS Code Remote Development Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

**Working with Containers:**

After installing the extension:

1. Click on the green button in the bottom-left corner of VS Code  
2. Select "Remote-Containers: Attach to Running Container" from the options  
3. Choose your Strapi container from the list  

**Setting Up Auto Save:**

Auto Save is crucial for efficient development. To enable it:

*For Windows 10 Pro/Enterprise/Education:*

1. In VS Code (while connected to container), go to File > Auto Save  
2. Or go to Settings (Ctrl+,) and search for "Auto Save"  
3. Set "Auto Save" to "afterDelay" and adjust the delay time as needed  

*For Windows 10 Home:*

Since Windows 10 Home has some limitations with Docker, you might need to manually configure Auto Save:

1. Open VS Code Settings (Ctrl+,)  
2. Search for "Auto Save"  
3. Set "Files: Auto Save" to "afterDelay"  
4. Set "Files: Auto Save Delay" to your preferred value (e.g., 1000 for 1 second)  

This ensures your changes are automatically saved, which is particularly important when working with containerized applications.

> 💡 Remember that all file operations happen inside the container, so any changes you make will be reflected directly in the container environment without needing to rebuild.            
            
            
{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}