[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-categories":3,"post-docker-for-frontend-developers":73,"parsed-post-8570ed3d-b1cf-4288-8578-aed5593f8c58":148},{"success":4,"data":5},true,{"items":6,"pagination":70},[7,16,24,32,40,48,56,63],{"id":8,"name":9,"description":10,"parentId":11,"createdAt":12,"updatedAt":12,"parent":11,"children":13,"_count":14},"ai-future","AI & The Future","Artificial intelligence and emerging technology",null,"2026-07-24T06:02:45.990Z",[],{"posts":15},1,{"id":17,"name":18,"description":19,"parentId":11,"createdAt":20,"updatedAt":20,"parent":11,"children":21,"_count":22},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":23},7,{"id":25,"name":26,"description":27,"parentId":11,"createdAt":28,"updatedAt":28,"parent":11,"children":29,"_count":30},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":31},3,{"id":33,"name":34,"description":35,"parentId":11,"createdAt":36,"updatedAt":36,"parent":11,"children":37,"_count":38},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":39},6,{"id":41,"name":42,"description":43,"parentId":11,"createdAt":44,"updatedAt":44,"parent":11,"children":45,"_count":46},"tutorials","Tutorials","Step-by-step learning guides","2026-07-24T06:02:44.965Z",[],{"posts":47},21,{"id":49,"name":50,"description":51,"parentId":11,"createdAt":52,"updatedAt":52,"parent":11,"children":53,"_count":54},"software-engineering","Software Engineering","Best practices, patterns, and principles","2026-07-24T06:02:44.689Z",[],{"posts":55},24,{"id":57,"name":58,"description":59,"parentId":11,"createdAt":60,"updatedAt":60,"parent":11,"children":61,"_count":62},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":39},{"id":64,"name":65,"description":66,"parentId":11,"createdAt":67,"updatedAt":67,"parent":11,"children":68,"_count":69},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":55},{"page":15,"limit":71,"total":71,"totalPages":15,"hasNext":72,"hasPrev":72},8,false,{"success":4,"data":74},{"id":75,"slug":76,"title":77,"excerpt":78,"content":79,"status":80,"visibility":81,"featuredImage":82,"canonicalUrl":11,"readingTime":83,"viewCount":84,"commentEnabled":4,"publishedAt":85,"scheduledAt":11,"createdAt":86,"updatedAt":87,"seoTitle":88,"seoDescription":78,"seoKeywords":11,"authorId":89,"author":90,"coAuthors":95,"tags":96,"categories":112,"comments":115,"_count":116,"relatedPosts":118},"8570ed3d-b1cf-4288-8578-aed5593f8c58","docker-for-frontend-developers","Docker for Frontend Developers: A Practical Introduction","Stop saying 'it works on my machine.' Learn Docker fundamentals through the lens of frontend development workflows.","## Why Frontend Devs Need Docker\n\nYou might think Docker is only for backend engineers. But if you've ever dealt with:\n\n- \"It works on my machine\" Node version conflicts\n- Inconsistent build environments between CI and local\n- Complex multi-service setups (API + DB + frontend)\n\nThen Docker solves your problems too.\n\n## Core Concepts in 60 Seconds\n\n- **Image**: A snapshot of your application and its environment\n- **Container**: A running instance of an image\n- **Dockerfile**: Instructions to build an image\n- **docker-compose**: Orchestrates multiple containers\n\n## A Production Nuxt Dockerfile\n\n```dockerfile\n# Stage 1: Dependencies\nFROM node:20-alpine AS deps\nWORKDIR \u002Fapp\nCOPY package.json pnpm-lock.yaml .\u002F\nRUN corepack enable && pnpm install --frozen-lockfile\n\n# Stage 2: Build\nFROM node:20-alpine AS builder\nWORKDIR \u002Fapp\nCOPY --from=deps \u002Fapp\u002Fnode_modules .\u002Fnode_modules\nCOPY . .\nRUN corepack enable && pnpm build\n\n# Stage 3: Production\nFROM node:20-alpine AS runner\nWORKDIR \u002Fapp\nENV NODE_ENV=production\n\nCOPY --from=builder \u002Fapp\u002F.output .\u002F.output\n\nEXPOSE 3000\nCMD [\"node\", \".output\u002Fserver\u002Findex.mjs\"]\n```\n\n::callout{icon=\"i-lucide-layers\" color=\"primary\"}\nMulti-stage builds keep your final image tiny. The above produces a ~150MB image instead of 1GB+ with all dev dependencies.\n::\n\n## Docker Compose for Full-Stack Dev\n\n```yaml\n# docker-compose.yml\nservices:\n  app:\n    build: .\n    ports:\n      - \"3000:3000\"\n    environment:\n      - DATABASE_URL=postgres:\u002F\u002Fuser:pass@db:5432\u002Fmydb\n    depends_on:\n      - db\n\n  db:\n    image: postgres:16-alpine\n    environment:\n      POSTGRES_USER: user\n      POSTGRES_PASSWORD: pass\n      POSTGRES_DB: mydb\n    volumes:\n      - pgdata:\u002Fvar\u002Flib\u002Fpostgresql\u002Fdata\n    ports:\n      - \"5432:5432\"\n\nvolumes:\n  pgdata:\n```\n\nRun everything with one command:\n\n```bash\ndocker compose up -d\n```\n\n## Tips for Frontend Workflows\n\n1. **Use `.dockerignore`** — Exclude `node_modules`, `.nuxt`, `.output`\n2. **Cache layers wisely** — Copy `package.json` before source code\n3. **Use Alpine images** — Smaller base = faster pulls\n4. **Bind mounts for dev** — Edit locally, see changes in container\n\nDocker isn't overhead — it's insurance that your app runs the same everywhere.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551288049-bebda4e38f71?w=1200&q=80",9,410,"2026-07-17T06:02:53.993Z","2026-07-24T06:02:53.997Z","2026-07-28T14:16:29.909Z","Docker for Frontend Developers: A Practical Introduction | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":91,"bio":92,"id":89,"name":93,"avatarUrl":94},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[97,102,107],{"id":98,"name":99,"color":100,"description":101},"nodejs","Node.js","#339933","JavaScript runtime built on V8",{"id":103,"name":104,"color":105,"description":106},"docker","Docker","#2496ed","Containerization platform",{"id":108,"name":109,"color":110,"description":111},"devops","DevOps","#ff6c37","Development and Operations",[113,114],{"id":57,"name":58,"description":59},{"id":41,"name":42,"description":43},[],{"comments":117},0,[119,128,138],{"id":120,"slug":121,"title":122,"excerpt":123,"featuredImage":124,"viewCount":125,"readingTime":71,"publishedAt":126,"author":127},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,"2026-07-23T06:02:46.910Z",{"id":89,"name":93,"avatarUrl":94},{"id":129,"slug":130,"title":131,"excerpt":132,"featuredImage":133,"viewCount":134,"readingTime":135,"publishedAt":136,"author":137},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,10,"2026-07-21T06:02:49.268Z",{"id":89,"name":93,"avatarUrl":94},{"id":139,"slug":140,"title":141,"excerpt":142,"featuredImage":143,"viewCount":144,"readingTime":145,"publishedAt":146,"author":147},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":89,"name":93,"avatarUrl":94},{"data":149,"body":151,"toc":400},{"title":150,"description":150},"",{"type":152,"children":153},"root",[154,163,169,189,194,200,244,250,263,274,280,290,295,305,311,390,395],{"type":155,"tag":156,"props":157,"children":159},"element","h2",{"id":158},"why-frontend-devs-need-docker",[160],{"type":161,"value":162},"text","Why Frontend Devs Need Docker",{"type":155,"tag":164,"props":165,"children":166},"p",{},[167],{"type":161,"value":168},"You might think Docker is only for backend engineers. But if you've ever dealt with:",{"type":155,"tag":170,"props":171,"children":172},"ul",{},[173,179,184],{"type":155,"tag":174,"props":175,"children":176},"li",{},[177],{"type":161,"value":178},"\"It works on my machine\" Node version conflicts",{"type":155,"tag":174,"props":180,"children":181},{},[182],{"type":161,"value":183},"Inconsistent build environments between CI and local",{"type":155,"tag":174,"props":185,"children":186},{},[187],{"type":161,"value":188},"Complex multi-service setups (API + DB + frontend)",{"type":155,"tag":164,"props":190,"children":191},{},[192],{"type":161,"value":193},"Then Docker solves your problems too.",{"type":155,"tag":156,"props":195,"children":197},{"id":196},"core-concepts-in-60-seconds",[198],{"type":161,"value":199},"Core Concepts in 60 Seconds",{"type":155,"tag":170,"props":201,"children":202},{},[203,214,224,234],{"type":155,"tag":174,"props":204,"children":205},{},[206,212],{"type":155,"tag":207,"props":208,"children":209},"strong",{},[210],{"type":161,"value":211},"Image",{"type":161,"value":213},": A snapshot of your application and its environment",{"type":155,"tag":174,"props":215,"children":216},{},[217,222],{"type":155,"tag":207,"props":218,"children":219},{},[220],{"type":161,"value":221},"Container",{"type":161,"value":223},": A running instance of an image",{"type":155,"tag":174,"props":225,"children":226},{},[227,232],{"type":155,"tag":207,"props":228,"children":229},{},[230],{"type":161,"value":231},"Dockerfile",{"type":161,"value":233},": Instructions to build an image",{"type":155,"tag":174,"props":235,"children":236},{},[237,242],{"type":155,"tag":207,"props":238,"children":239},{},[240],{"type":161,"value":241},"docker-compose",{"type":161,"value":243},": Orchestrates multiple containers",{"type":155,"tag":156,"props":245,"children":247},{"id":246},"a-production-nuxt-dockerfile",[248],{"type":161,"value":249},"A Production Nuxt Dockerfile",{"type":155,"tag":251,"props":252,"children":257},"pre",{"className":253,"code":254,"language":255,"meta":150,"style":256},"language-dockerfile","# Stage 1: Dependencies\nFROM node:20-alpine AS deps\nWORKDIR \u002Fapp\nCOPY package.json pnpm-lock.yaml .\u002F\nRUN corepack enable && pnpm install --frozen-lockfile\n\n# Stage 2: Build\nFROM node:20-alpine AS builder\nWORKDIR \u002Fapp\nCOPY --from=deps \u002Fapp\u002Fnode_modules .\u002Fnode_modules\nCOPY . .\nRUN corepack enable && pnpm build\n\n# Stage 3: Production\nFROM node:20-alpine AS runner\nWORKDIR \u002Fapp\nENV NODE_ENV=production\n\nCOPY --from=builder \u002Fapp\u002F.output .\u002F.output\n\nEXPOSE 3000\nCMD [\"node\", \".output\u002Fserver\u002Findex.mjs\"]\n","dockerfile","undefined",[258],{"type":155,"tag":259,"props":260,"children":261},"code",{"__ignoreMap":150},[262],{"type":161,"value":254},{"type":155,"tag":264,"props":265,"children":268},"callout",{"color":266,"icon":267},"primary","i-lucide-layers",[269],{"type":155,"tag":164,"props":270,"children":271},{},[272],{"type":161,"value":273},"Multi-stage builds keep your final image tiny. The above produces a ~150MB image instead of 1GB+ with all dev dependencies.",{"type":155,"tag":156,"props":275,"children":277},{"id":276},"docker-compose-for-full-stack-dev",[278],{"type":161,"value":279},"Docker Compose for Full-Stack Dev",{"type":155,"tag":251,"props":281,"children":285},{"className":282,"code":283,"language":284,"meta":150,"style":256},"language-yaml","# docker-compose.yml\nservices:\n  app:\n    build: .\n    ports:\n      - \"3000:3000\"\n    environment:\n      - DATABASE_URL=postgres:\u002F\u002Fuser:pass@db:5432\u002Fmydb\n    depends_on:\n      - db\n\n  db:\n    image: postgres:16-alpine\n    environment:\n      POSTGRES_USER: user\n      POSTGRES_PASSWORD: pass\n      POSTGRES_DB: mydb\n    volumes:\n      - pgdata:\u002Fvar\u002Flib\u002Fpostgresql\u002Fdata\n    ports:\n      - \"5432:5432\"\n\nvolumes:\n  pgdata:\n","yaml",[286],{"type":155,"tag":259,"props":287,"children":288},{"__ignoreMap":150},[289],{"type":161,"value":283},{"type":155,"tag":164,"props":291,"children":292},{},[293],{"type":161,"value":294},"Run everything with one command:",{"type":155,"tag":251,"props":296,"children":300},{"className":297,"code":298,"language":299,"meta":150,"style":256},"language-bash","docker compose up -d\n","bash",[301],{"type":155,"tag":259,"props":302,"children":303},{"__ignoreMap":150},[304],{"type":161,"value":298},{"type":155,"tag":156,"props":306,"children":308},{"id":307},"tips-for-frontend-workflows",[309],{"type":161,"value":310},"Tips for Frontend Workflows",{"type":155,"tag":312,"props":313,"children":314},"ol",{},[315,352,370,380],{"type":155,"tag":174,"props":316,"children":317},{},[318,329,331,337,339,345,346],{"type":155,"tag":207,"props":319,"children":320},{},[321,323],{"type":161,"value":322},"Use ",{"type":155,"tag":259,"props":324,"children":326},{"className":325},[],[327],{"type":161,"value":328},".dockerignore",{"type":161,"value":330}," — Exclude ",{"type":155,"tag":259,"props":332,"children":334},{"className":333},[],[335],{"type":161,"value":336},"node_modules",{"type":161,"value":338},", ",{"type":155,"tag":259,"props":340,"children":342},{"className":341},[],[343],{"type":161,"value":344},".nuxt",{"type":161,"value":338},{"type":155,"tag":259,"props":347,"children":349},{"className":348},[],[350],{"type":161,"value":351},".output",{"type":155,"tag":174,"props":353,"children":354},{},[355,360,362,368],{"type":155,"tag":207,"props":356,"children":357},{},[358],{"type":161,"value":359},"Cache layers wisely",{"type":161,"value":361}," — Copy ",{"type":155,"tag":259,"props":363,"children":365},{"className":364},[],[366],{"type":161,"value":367},"package.json",{"type":161,"value":369}," before source code",{"type":155,"tag":174,"props":371,"children":372},{},[373,378],{"type":155,"tag":207,"props":374,"children":375},{},[376],{"type":161,"value":377},"Use Alpine images",{"type":161,"value":379}," — Smaller base = faster pulls",{"type":155,"tag":174,"props":381,"children":382},{},[383,388],{"type":155,"tag":207,"props":384,"children":385},{},[386],{"type":161,"value":387},"Bind mounts for dev",{"type":161,"value":389}," — Edit locally, see changes in container",{"type":155,"tag":164,"props":391,"children":392},{},[393],{"type":161,"value":394},"Docker isn't overhead — it's insurance that your app runs the same everywhere.",{"type":155,"tag":396,"props":397,"children":398},"style",{},[399],{"type":161,"value":150},{"title":150,"searchDepth":401,"depth":401,"links":402},2,[403,404,405,406,407],{"id":158,"depth":401,"text":162},{"id":196,"depth":401,"text":199},{"id":246,"depth":401,"text":249},{"id":276,"depth":401,"text":279},{"id":307,"depth":401,"text":310}]