<link>https://nicopietroni.github.io/</link></image><item><title>Building a Production-Ready REST API with Node.js and Express</h1> <article> <h1>Building a Production-Ready REST API with Node.js and Express</h1> <p>Tue, 10 Dec 2024 00:00:00 +0000</p> <p>Building a REST API seems straightforward until you need to handle authentication, validation, error handling, and documentation. This guide covers best practices for production-ready APIs.</p> <h2 id="table-of-contents">Table of Contents</h2> <ol> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ol> <h2 id="project-setup">Project Setup</h2> <p>Start with a solid foundation:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">mkdir my-api <span class="o">&&</span> <span class="nb">cd</span> my-api </span></span><span class="line"><span class="cl">npm init -y </span></span><span class="line"><span class="cl">npm install express dotenv cors helmet compression </span></span><span class="line"><span class="cl">npm install -D typescript @types/node @types/express ts-node-dev </span></span></code></pre></div><p>Create <code>tsconfig.json</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"compilerOptions"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"target"</span><span class="p">:</span> <span class="s2">"ES2020"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"module"</span><span class="p">:</span> <span class="s2">"commonjs"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"lib"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"ES2020"</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"outDir"</span><span class="p">:</span> <span class="s2">"./dist"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"rootDir"</span><span class="p">:</span> <span class="s2">"./src"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"strict"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"esModuleInterop"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"skipLibCheck"</span><span class="p">:</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="folder-structure">Folder Structure</h2> <p>Organize your code for maintainability:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">src/ </span></span><span class="line"><span class="cl">├── config/ # Configuration files </span></span><span class="line"><span class="cl">├── controllers/ # Route controllers </span></span><span class="line"><span class="cl">├── middleware/ # Custom middleware </span></span><span class="line"><span class="cl">├── models/ # Database models </span></span><span class="line"><span class="cl">├── routes/ # API routes </span></span><span class="line"><span class="cl">├── services/ # Business logic </span></span><span class="line"><span class="cl">├── utils/ # Helper functions </span></span><span class="line"><span class="cl">├── validators/ # Input validation </span></span><span class="line"><span class="cl">└── app.ts # App setup </span></span></code></pre></div><h2 id="database">Database Integration</h2> <p>Using Prisma for type-safe database access:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// prisma/schema.prisma </span></span></span><span class="line"><span class="cl"><span class="nx">model</span> <span class="nx">User</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span> <span class="nb">String</span> <span class="kd">@id</span> <span class="kd">@default</span><span class="p">(</span><span class="nx">uuid</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span> <span class="nb">String</span> <span class="kd">@unique</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span> <span class="nb">String</span> </span></span><span class="line"><span class="cl"> <span class="nx">createdAt</span> <span class="nx">DateTime</span> <span class="kd">@default</span><span class="p">(</span><span class="nx">now</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="nx">updatedAt</span> <span class="nx">DateTime</span> <span class="kd">@updatedAt</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/config/database.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'@prisma/client'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">prisma</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">log</span>: <span class="kt">process.env.NODE_ENV</span> <span class="o">===</span> <span class="s1">'development'</span> <span class="o">?</span> <span class="p">[</span><span class="s1">'query'</span><span class="p">]</span> <span class="o">:</span> <span class="p">[]</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">prisma</span> </span></span></code></pre></div><h2 id="auth">Authentication & Authorization</h2> <p>Implement JWT-based authentication:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/middleware/auth.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">jwt</span> <span class="kr">from</span> <span class="s1">'jsonwebtoken'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'express'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">interface</span> <span class="nx">JWTPayload</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">userId</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">string</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">authenticate</span> <span class="o">=</span> <span class="kr">async</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span>: <span class="kt">NextFunction</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">token</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">authorization</span><span class="o">?</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">)[</span><span class="mi">1</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">401</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">error</span><span class="o">:</span> <span class="s1">'Authentication required'</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">payload</span> <span class="o">=</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">verify</span><span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">token</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">JWT_SECRET</span><span class="o">!</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="kr">as</span> <span class="nx">JWTPayload</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">req</span><span class="p">.</span><span class="nx">user</span> <span class="o">=</span> <span class="nx">payload</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">401</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">error</span><span class="o">:</span> <span class="s1">'Invalid or expired token'</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="errors">Error Handling</h2> <p>Centralized error handling:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/middleware/errorHandler.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Request</span><span class="p">,</span> <span class="nx">Response</span><span class="p">,</span> <span class="nx">NextFunction</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'express'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">class</span> <span class="nx">AppError</span> <span class="kr">extends</span> <span class="nb">Error</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">statusCode</span>: <span class="kt">number</span> </span></span><span class="line"><span class="cl"> <span class="nx">isOperational</span>: <span class="kt">boolean</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">constructor</span><span class="p">(</span><span class="nx">message</span>: <span class="kt">string</span><span class="p">,</span> <span class="nx">statusCode</span>: <span class="kt">number</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">super</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">statusCode</span> <span class="o">=</span> <span class="nx">statusCode</span> </span></span><span class="line"><span class="cl"> <span class="k">this</span><span class="p">.</span><span class="nx">isOperational</span> <span class="o">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="nb">Error</span><span class="p">.</span><span class="nx">captureStackTrace</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kr">constructor</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">errorHandler</span> <span class="o">=</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="nx">err</span>: <span class="kt">Error</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span>: <span class="kt">NextFunction</span> </span></span><span class="line"><span class="cl"><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">err</span> <span class="k">instanceof</span> <span class="nx">AppError</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="nx">err</span><span class="p">.</span><span class="nx">statusCode</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span>: <span class="kt">err.message</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="c1">// Log unexpected errors </span></span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'Unexpected error:'</span><span class="p">,</span> <span class="nx">err</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">500</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">message</span><span class="o">:</span> <span class="s1">'Internal server error'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="p">{</span> <span class="nx">AppError</span> <span class="p">}</span> </span></span></code></pre></div><h2 id="validation">Validation</h2> <p>Use Zod for runtime validation:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/validators/userValidator.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">z</span> <span class="p">}</span> <span class="kr">from</span> <span class="s1">'zod'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">createUserSchema</span> <span class="o">=</span> <span class="nx">z</span><span class="p">.</span><span class="kt">object</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span>: <span class="kt">z.object</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">email</span><span class="p">(</span><span class="s1">'Invalid email address'</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="s1">'Name must be at least 2 characters'</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span>: <span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span> <span class="s1">'Password must be at least 8 characters'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">validate</span> <span class="o">=</span> <span class="p">(</span><span class="nx">schema</span>: <span class="kt">any</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">req</span>: <span class="kt">Request</span><span class="p">,</span> <span class="nx">res</span>: <span class="kt">Response</span><span class="p">,</span> <span class="nx">next</span>: <span class="kt">NextFunction</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">schema</span><span class="p">.</span><span class="nx">parseAsync</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">body</span>: <span class="kt">req.body</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">query</span>: <span class="kt">req.query</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">params</span>: <span class="kt">req.params</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">error</span> <span class="k">instanceof</span> <span class="nx">z</span><span class="p">.</span><span class="nx">ZodError</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">400</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">status</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">errors</span>: <span class="kt">error.errors</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="nx">next</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="docs">API Documentation</h2> <p>Auto-generate docs with Swagger:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// src/config/swagger.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">swaggerJsdoc</span> <span class="kr">from</span> <span class="s1">'swagger-jsdoc'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">definition</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">openapi</span><span class="o">:</span> <span class="s1">'3.0.0'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">info</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">title</span><span class="o">:</span> <span class="s1">'My API'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">version</span><span class="o">:</span> <span class="s1">'1.0.0'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">description</span><span class="o">:</span> <span class="s1">'API documentation'</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">servers</span><span class="o">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span><span class="o">:</span> <span class="s1">'http://localhost:3000'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">description</span><span class="o">:</span> <span class="s1">'Development server'</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> </span></span><span class="line"><span class="cl"> <span class="nx">apis</span><span class="o">:</span> <span class="p">[</span><span class="s1">'./src/routes/*.ts'</span><span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="kr">const</span> <span class="nx">swaggerSpec</span> <span class="o">=</span> <span class="nx">swaggerJsdoc</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> </span></span></code></pre></div><p>Document endpoints in route files:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="cm">/** </span></span></span><span class="line"><span class="cl"><span class="cm"> * @openapi </span></span></span><span class="line"><span class="cl"><span class="cm"> * /api/users: </span></span></span><span class="line"><span class="cl"><span class="cm"> * post: </span></span></span><span class="line"><span class="cl"><span class="cm"> * summary: Create a new user </span></span></span><span class="line"><span class="cl"><span class="cm"> * tags: [Users] </span></span></span><span class="line"><span class="cl"><span class="cm"> * requestBody: </span></span></span><span class="line"><span class="cl"><span class="cm"> * required: true </span></span></span><span class="line"><span class="cl"><span class="cm"> * content: </span></span></span><span class="line"><span class="cl"><span class="cm"> * application/json: </span></span></span><span class="line"><span class="cl"><span class="cm"> * schema: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: object </span></span></span><span class="line"><span class="cl"><span class="cm"> * properties: </span></span></span><span class="line"><span class="cl"><span class="cm"> * email: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * name: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * password: </span></span></span><span class="line"><span class="cl"><span class="cm"> * type: string </span></span></span><span class="line"><span class="cl"><span class="cm"> * responses: </span></span></span><span class="line"><span class="cl"><span class="cm"> * 201: </span></span></span><span class="line"><span class="cl"><span class="cm"> * description: User created successfully </span></span></span><span class="line"><span class="cl"><span class="cm"> */</span> </span></span><span class="line"><span class="cl"><span class="nx">router</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/users'</span><span class="p">,</span> <span class="nx">validate</span><span class="p">(</span><span class="nx">createUserSchema</span><span class="p">),</span> <span class="nx">createUser</span><span class="p">)</span> </span></span></code></pre></div><h2 id="testing">Testing</h2> <p>Write tests with Jest and Supertest:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// tests/users.test.ts </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">request</span> <span class="kr">from</span> <span class="s1">'supertest'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">app</span> <span class="kr">from</span> <span class="s1">'../src/app'</span> </span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">prisma</span> <span class="kr">from</span> <span class="s1">'../src/config/database'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">describe</span><span class="p">(</span><span class="s1">'User API'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">beforeEach</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">deleteMany</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">afterAll</span><span class="p">(</span><span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">$disconnect</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">describe</span><span class="p">(</span><span class="s1">'POST /api/users'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">'should create a new user'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">request</span><span class="p">(</span><span class="nx">app</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/api/users'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">send</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">'test@example.com'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Test User'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">'password123'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">expect</span><span class="p">(</span><span class="mi">201</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">'id'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">email</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="s1">'test@example.com'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">it</span><span class="p">(</span><span class="s1">'should return 400 for invalid email'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">request</span><span class="p">(</span><span class="nx">app</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/api/users'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">send</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span><span class="o">:</span> <span class="s1">'invalid-email'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Test User'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">password</span><span class="o">:</span> <span class="s1">'password123'</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">expect</span><span class="p">(</span><span class="mi">400</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">expect</span><span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">toHaveProperty</span><span class="p">(</span><span class="s1">'errors'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">})</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h2 id="security-best-practices">Security Best Practices</h2> <ol> <li> <p><strong>Rate Limiting</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">rateLimit</span> <span class="kr">from</span> <span class="s1">'express-rate-limit'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">limiter</span> <span class="o">=</span> <span class="nx">rateLimit</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">windowMs</span>: <span class="kt">15</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">,</span> <span class="c1">// 15 minutes </span></span></span><span class="line"><span class="cl"> <span class="nx">max</span>: <span class="kt">100</span> <span class="c1">// limit each IP to 100 requests per windowMs </span></span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="s1">'/api/'</span><span class="p">,</span> <span class="nx">limiter</span><span class="p">)</span> </span></span></code></pre></div></li> <li> <p><strong>Helmet</strong> for security headers</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">helmet</span> <span class="kr">from</span> <span class="s1">'helmet'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">helmet</span><span class="p">())</span> </span></span></code></pre></div></li> <li> <p><strong>CORS</strong> configuration</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">cors</span> <span class="kr">from</span> <span class="s1">'cors'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">cors</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">origin</span>: <span class="kt">process.env.ALLOWED_ORIGINS?.split</span><span class="p">(</span><span class="s1">','</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">credentials</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"><span class="p">}))</span> </span></span></code></pre></div></li> <li> <p><strong>Input Sanitization</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">mongoSanitize</span> <span class="kr">from</span> <span class="s1">'express-mongo-sanitize'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">mongoSanitize</span><span class="p">())</span> </span></span></code></pre></div></li> </ol> <h2 id="performance-optimization">Performance Optimization</h2> <h3 id="1-response-compression">1. Response Compression</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">compression</span> <span class="kr">from</span> <span class="s1">'compression'</span> </span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span><span class="nx">compression</span><span class="p">())</span> </span></span></code></pre></div><h3 id="2-caching">2. Caching</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">Redis</span> <span class="kr">from</span> <span class="s1">'ioredis'</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">redis</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Redis</span><span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">REDIS_URL</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">async</span> <span class="kd">function</span> <span class="nx">getCachedData</span><span class="p">(</span><span class="nx">key</span>: <span class="kt">string</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">cached</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">redis</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">cached</span><span class="p">)</span> <span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">cached</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchFromDatabase</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">redis</span><span class="p">.</span><span class="nx">setex</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="mi">3600</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">data</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">data</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="3-database-query-optimization">3. Database Query Optimization</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Use pagination </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">users</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">findMany</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="nx">skip</span><span class="o">:</span> <span class="p">(</span><span class="nx">page</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="nx">limit</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">take</span>: <span class="kt">limit</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">select</span><span class="o">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">id</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">email</span>: <span class="kt">true</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span>: <span class="kt">true</span> </span></span><span class="line"><span class="cl"> <span class="c1">// Don't select sensitive fields like password </span></span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// Use indexes </span></span></span><span class="line"><span class="cl"><span class="err">@</span><span class="kd">@index</span><span class="p">([</span><span class="nx">email</span><span class="p">])</span> </span></span><span class="line"><span class="cl"><span class="err">@</span><span class="kd">@index</span><span class="p">([</span><span class="nx">createdAt</span><span class="p">])</span> </span></span></code></pre></div><h2 id="deployment-checklist">Deployment Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Environment variables configured</li> <li><input disabled="" type="checkbox"> Database migrations run</li> <li><input disabled="" type="checkbox"> SSL/TLS certificates installed</li> <li><input disabled="" type="checkbox"> Rate limiting enabled</li> <li><input disabled="" type="checkbox"> Logging configured (Winston, Morgan)</li> <li><input disabled="" type="checkbox"> Error tracking (Sentry)</li> <li><input disabled="" type="checkbox"> Health check endpoint</li> <li><input disabled="" type="checkbox"> API documentation deployed</li> <li><input disabled="" type="checkbox"> Load testing completed</li> <li><input disabled="" type="checkbox"> Backup strategy implemented</li> </ul> <h2 id="monitoring">Monitoring</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="c1">// Health check endpoint </span></span></span><span class="line"><span class="cl"><span class="nx">app</span><span class="p">.</span><span class="kr">get</span><span class="p">(</span><span class="s1">'/health'</span><span class="p">,</span> <span class="kr">async</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">try</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">$queryRaw</span><span class="sb">`SELECT 1`</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">200</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">status</span><span class="o">:</span> <span class="s1">'healthy'</span><span class="p">,</span> <span class="nx">timestamp</span>: <span class="kt">new</span> <span class="nb">Date</span><span class="p">()</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">503</span><span class="p">).</span><span class="nx">json</span><span class="p">({</span> <span class="nx">status</span><span class="o">:</span> <span class="s1">'unhealthy'</span><span class="p">,</span> <span class="nx">error</span>: <span class="kt">error.message</span> <span class="p">})</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h2 id="conclusion">Conclusion</h2> <p>Building production-ready APIs requires attention to:</p> <ul> <li><strong>Structure</strong>: Organized code is maintainable code</li> <li><strong>Security</strong>: Authentication, validation, and rate limiting</li> <li><strong>Errors</strong>: Proper error handling and logging</li> <li><strong>Testing</strong>: Comprehensive test coverage</li> <li><strong>Documentation</strong>: Clear API docs for consumers</li> <li><strong>Performance</strong>: Caching and optimization</li> </ul> <p>The complete example code is available on .</p> <h2 id="resources">Resources</h2> <ul> <li> </li> <li> </li> <li> </li> </ul> <hr> <p>Questions? Leave a comment below or reach out on !</p> </article> <article> <h1>React Performance Optimization: A Practical Guide</h1> <p>Fri, 22 Nov 2024 00:00:00 +0000</p> <p>React apps can become slow as they grow. This guide covers practical techniques to identify bottlenecks and optimize performance, backed by real-world examples.</p> <h2 id="common-performance-issues">Common Performance Issues</h2> <p>Before optimizing, measure. Use React DevTools Profiler to identify:</p> <ul> <li>Unnecessary re-renders</li> <li>Heavy computations</li> <li>Large component trees</li> <li>Inefficient list rendering</li> </ul> <h2 id="1-prevent-unnecessary-re-renders">1. Prevent Unnecessary Re-renders</h2> <h3 id="problem-parent-re-renders-cascade">Problem: Parent Re-renders Cascade</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Child re-renders on every parent update </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=></span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)}></span><span class="nx">Count</span><span class="o">:</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ExpensiveChild</span> <span class="p">/></span> <span class="p">{</span><span class="cm">/* Re-renders even though it doesn't use count! */</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-reactmemo">Solution: React.memo</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Child only re-renders when props change </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ExpensiveChild</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">memo</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'ExpensiveChild rendered'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">div</span><span class="p">>{</span><span class="cm">/* expensive rendering */</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><p><strong>When to use</strong>: Components that render often but rarely change props.</p> <h2 id="2-optimize-expensive-calculations">2. Optimize Expensive Calculations</h2> <h3 id="problem-recalculating-on-every-render">Problem: Recalculating on Every Render</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: filterItems runs on every render </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">ProductList</span><span class="p">({</span> <span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">filtered</span> <span class="o">=</span> <span class="nx">products</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> <span class="c1">// Runs even when products/searchTerm haven't changed! </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">ul</span><span class="p">>{</span><span class="nx">filtered</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">p</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">li</span><span class="p">>)}</</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-usememo">Solution: useMemo</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Only recalculates when dependencies change </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">ProductList</span><span class="p">({</span> <span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">filtered</span> <span class="o">=</span> <span class="nx">useMemo</span><span class="p">(()</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">products</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> </span></span><span class="line"><span class="cl"> <span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">searchTerm</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> </span></span><span class="line"><span class="cl"> <span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">products</span><span class="p">,</span> <span class="nx">searchTerm</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">ul</span><span class="p">>{</span><span class="nx">filtered</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">p</span> <span class="p">=></span> <span class="p"><</span><span class="nt">li</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">p</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">li</span><span class="p">>)}</</span><span class="nt">ul</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>When to use</strong>: Expensive calculations that don’t need to run on every render.</p> <h2 id="3-stabilize-function-references">3. Stabilize Function References</h2> <h3 id="problem-new-function-on-every-render">Problem: New Function on Every Render</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: handleClick creates new function every render </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">setCount</span><span class="p">(</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">Child</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="p">/></span> <span class="c1">// Child re-renders! </span></span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">Child</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">memo</span><span class="p">(({</span> <span class="nx">onClick</span> <span class="p">})</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">onClick</span><span class="p">}></span><span class="nx">Click</span><span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></div><h3 id="solution-usecallback">Solution: useCallback</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: handleClick reference stays stable </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">Parent</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">count</span><span class="p">,</span> <span class="nx">setCount</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="nx">useCallback</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">setCount</span><span class="p">(</span><span class="nx">c</span> <span class="p">=></span> <span class="nx">c</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="c1">// Use functional update! </span></span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[])</span> <span class="c1">// Empty deps because we use functional update </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">Child</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>When to use</strong>: Passing callbacks to memoized child components.</p> <h2 id="4-virtual-lists-for-large-datasets">4. Virtual Lists for Large Datasets</h2> <h3 id="problem-rendering-10000-items">Problem: Rendering 10,000 Items</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Renders all 10,000 items (slow!) </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">LargeList</span><span class="p">({</span> <span class="nx">items</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">))}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-react-window">Solution: react-window</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Only renders visible items </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">FixedSizeList</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'react-window'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">LargeList</span><span class="p">({</span> <span class="nx">items</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">Row</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">style</span> <span class="p">})</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="p">{</span><span class="nx">style</span><span class="p">}>{</span><span class="nx">items</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">FixedSizeList</span> </span></span><span class="line"><span class="cl"> <span class="na">height</span><span class="o">=</span><span class="p">{</span><span class="mi">600</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">itemCount</span><span class="o">=</span><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">itemSize</span><span class="o">=</span><span class="p">{</span><span class="mi">50</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="na">width</span><span class="o">=</span><span class="s">"100%"</span> </span></span><span class="line"><span class="cl"> <span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">Row</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">FixedSizeList</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: 10,000 items render in <50ms instead of 2000ms!</p> <h2 id="5-code-splitting--lazy-loading">5. Code Splitting & Lazy Loading</h2> <h3 id="problem-large-bundle-size">Problem: Large Bundle Size</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Everything loads upfront </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">AdminPanel</span> <span class="nx">from</span> <span class="s1">'./AdminPanel'</span> <span class="c1">// 500KB! </span></span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">UserDashboard</span> <span class="nx">from</span> <span class="s1">'./UserDashboard'</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">isAdmin</span> <span class="o">?</span> <span class="p"><</span><span class="nt">AdminPanel</span> <span class="p">/></span> <span class="o">:</span> <span class="p"><</span><span class="nt">UserDashboard</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-reactlazy">Solution: React.lazy</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Load components on demand </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AdminPanel</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">lazy</span><span class="p">(()</span> <span class="p">=></span> <span class="kr">import</span><span class="p">(</span><span class="s1">'./AdminPanel'</span><span class="p">))</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">UserDashboard</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">lazy</span><span class="p">(()</span> <span class="p">=></span> <span class="kr">import</span><span class="p">(</span><span class="s1">'./UserDashboard'</span><span class="p">))</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">Suspense</span> <span class="na">fallback</span><span class="o">=</span><span class="p">{<</span><span class="nt">Loading</span> <span class="p">/>}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">isAdmin</span> <span class="o">?</span> <span class="p"><</span><span class="nt">AdminPanel</span> <span class="p">/></span> <span class="o">:</span> <span class="p"><</span><span class="nt">UserDashboard</span> <span class="p">/>}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">Suspense</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: Initial bundle: 150KB instead of 650KB!</p> <h2 id="6-optimize-context-usage">6. Optimize Context Usage</h2> <h3 id="problem-context-causes-mass-re-renders">Problem: Context Causes Mass Re-renders</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Every consumer re-renders on any state change </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">AppContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">AppProvider</span><span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">'light'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">notifications</span><span class="p">,</span> <span class="nx">setNotifications</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">([])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">AppContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">theme</span><span class="p">,</span> <span class="nx">notifications</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">,</span> <span class="nx">setTheme</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">children</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">AppContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-split-contexts">Solution: Split Contexts</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Separate contexts for different concerns </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">UserContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">ThemeContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">NotificationContext</span> <span class="o">=</span> <span class="nx">createContext</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">AppProvider</span><span class="p">({</span> <span class="nx">children</span> <span class="p">})</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">'light'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">notifications</span><span class="p">,</span> <span class="nx">setNotifications</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">([])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">UserContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">user</span><span class="p">,</span> <span class="nx">setUser</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ThemeContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">theme</span><span class="p">,</span> <span class="nx">setTheme</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">NotificationContext.Provider</span> <span class="na">value</span><span class="o">=</span><span class="p">{{</span> <span class="nx">notifications</span> <span class="p">}}></span> </span></span><span class="line"><span class="cl"> <span class="p">{</span><span class="nx">children</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">NotificationContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ThemeContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">UserContext.Provider</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p><strong>Result</strong>: Components only re-render when their specific context changes!</p> <h2 id="7-debounce-expensive-operations">7. Debounce Expensive Operations</h2> <h3 id="problem-search-triggers-on-every-keystroke">Problem: Search Triggers on Every Keystroke</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: API call on every keystroke </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">SearchBox</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">query</span><span class="p">,</span> <span class="nx">setQuery</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">''</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">searchAPI</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="c1">// Called 10+ times as user types "javascript"! </span></span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">query</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">input</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">query</span><span class="p">}</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span> <span class="p">=></span> <span class="nx">setQuery</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h3 id="solution-custom-debounce-hook">Solution: Custom Debounce Hook</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: API call only after user stops typing </span></span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">useDebounce</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">debouncedValue</span><span class="p">,</span> <span class="nx">setDebouncedValue</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">handler</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=></span> <span class="nx">setDebouncedValue</span><span class="p">(</span><span class="nx">value</span><span class="p">),</span> <span class="nx">delay</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">handler</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">value</span><span class="p">,</span> <span class="nx">delay</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">debouncedValue</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kd">function</span> <span class="nx">SearchBox</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="p">[</span><span class="nx">query</span><span class="p">,</span> <span class="nx">setQuery</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="s1">''</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">debouncedQuery</span> <span class="o">=</span> <span class="nx">useDebounce</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="mi">300</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nx">useEffect</span><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">debouncedQuery</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">searchAPI</span><span class="p">(</span><span class="nx">debouncedQuery</span><span class="p">)</span> <span class="c1">// Called once after 300ms pause! </span></span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">},</span> <span class="p">[</span><span class="nx">debouncedQuery</span><span class="p">])</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p"><</span><span class="nt">input</span> <span class="na">value</span><span class="o">=</span><span class="p">{</span><span class="nx">query</span><span class="p">}</span> <span class="na">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span> <span class="p">=></span> <span class="nx">setQuery</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span> <span class="p">/></span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="8-key-props-matter">8. Key Props Matter</h2> <h3 id="problem-poor-key-choices">Problem: Poor Key Choices</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ❌ Bad: Using index as key causes issues </span></span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">index</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">))}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1">// When items reorder, React thinks they're different components! </span></span></span></code></pre></div><h3 id="solution-stable-unique-keys">Solution: Stable, Unique Keys</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="line"><span class="cl"><span class="c1">// ✅ Good: Use stable IDs </span></span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="p">=></span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="p">}>{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</</span><span class="nt">div</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p">))}</span> </span></span></code></pre></div><h2 id="real-world-example-optimizing-a-dashboard">Real-World Example: Optimizing a Dashboard</h2> <p><strong>Before</strong>: Dashboard with 20 widgets, each fetching data, all re-rendering on any state change.</p> <p><strong>After optimization</strong>:</p> <ol> <li>Split into separate contexts for user, theme, data</li> <li>Memoized individual widgets with React.memo</li> <li>Used useMemo for data transformations</li> <li>Lazy loaded heavy charts</li> <li>Debounced filter inputs</li> </ol> <p><strong>Result</strong>:</p> <ul> <li>Initial render: 3000ms → 800ms</li> <li>Interactions: 200ms → 50ms</li> <li>Bundle size: 800KB → 250KB (initial) + 550KB (lazy)</li> </ul> <h2 id="profiling-workflow">Profiling Workflow</h2> <ol> <li> <p><strong>React DevTools Profiler</strong></p> <ul> <li>Record interaction</li> <li>Identify components taking longest</li> <li>Check why they rendered (props change? parent render?)</li> </ul> </li> <li> <p><strong>Chrome DevTools Performance</strong></p> <ul> <li>Record performance</li> <li>Look for long tasks (>50ms)</li> <li>Check FPS during animations</li> </ul> </li> <li> <p><strong>Lighthouse</strong></p> <ul> <li>Run audit</li> <li>Focus on “Time to Interactive”</li> <li>Check bundle sizes</li> </ul> </li> </ol> <h2 id="common-pitfalls">Common Pitfalls</h2> <p>❌ <strong>Don’t</strong> optimize prematurely<br> ✅ <strong>Do</strong> measure first, optimize bottlenecks</p> <p>❌ <strong>Don’t</strong> memo everything<br> ✅ <strong>Do</strong> memo expensive components</p> <p>❌ <strong>Don’t</strong> use useMemo for simple calculations<br> ✅ <strong>Do</strong> use for actual performance issues</p> <p>❌ <strong>Don’t</strong> forget dependency arrays<br> ✅ <strong>Do</strong> include all dependencies (or use ESLint plugin)</p> <h2 id="performance-checklist">Performance Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Use React DevTools Profiler to identify issues</li> <li><input disabled="" type="checkbox"> Memoize expensive child components</li> <li><input disabled="" type="checkbox"> Use useMemo for heavy calculations</li> <li><input disabled="" type="checkbox"> Use useCallback for callbacks to memoized children</li> <li><input disabled="" type="checkbox"> Implement code splitting for large components</li> <li><input disabled="" type="checkbox"> Use virtual lists for large datasets</li> <li><input disabled="" type="checkbox"> Debounce expensive operations (search, API calls)</li> <li><input disabled="" type="checkbox"> Use proper key props for lists</li> <li><input disabled="" type="checkbox"> Split contexts to minimize re-renders</li> <li><input disabled="" type="checkbox"> Optimize bundle size (tree shaking, minification)</li> </ul> <h2 id="tools--resources">Tools & Resources</h2> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h2 id="conclusion">Conclusion</h2> <p>Performance optimization is about:</p> <ol> <li><strong>Measuring</strong> before optimizing</li> <li><strong>Identifying</strong> actual bottlenecks</li> <li><strong>Applying</strong> targeted fixes</li> <li><strong>Verifying</strong> improvements</li> </ol> <p>Don’t optimize blindly—profile, fix, measure, repeat!</p> <hr> <p><strong>Want to dive deeper?</strong> Check out my .</p> <p>Questions? Reach out on !</p> </article> <article> <h1>Docker Deployment Guide: From Development to Production</h1> <p>Tue, 15 Oct 2024 00:00:00 +0000</p> <p>Docker simplifies deployment by packaging your application with all dependencies. This guide covers containerizing apps, optimizing images, and production deployment.</p> <h2 id="why-docker">Why Docker?</h2> <p><strong>Problems Docker solves</strong>:</p> <ul> <li>❌ “Works on my machine” syndrome</li> <li>❌ Complex dependency management</li> <li>❌ Environment inconsistencies</li> <li>❌ Difficult scaling</li> </ul> <p><strong>Benefits</strong>:</p> <ul> <li>✅ Consistent environments (dev = prod)</li> <li>✅ Easy scaling</li> <li>✅ Simplified deployment</li> <li>✅ Isolation and security</li> </ul> <h2 id="basic-dockerfile">Basic Dockerfile</h2> <p>For a Node.js application:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Use official Node image</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Set working directory</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy package files</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Install dependencies</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci --only<span class="o">=</span>production<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy application code</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Expose port</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Start application</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><p>Build and run:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker build -t my-app . </span></span><span class="line"><span class="cl">docker run -p 3000:3000 my-app </span></span></code></pre></div><h2 id="multi-stage-builds-optimization">Multi-Stage Builds (Optimization)</h2> <p>Reduce image size with multi-stage builds:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Stage 1: Build</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Stage 2: Production</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy only necessary files from builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder /app/dist ./dist<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder /app/node_modules ./node_modules<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"dist/server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><p><strong>Result</strong>: Image size reduced from 800MB → 150MB!</p> <h2 id="docker-compose-for-local-development">Docker Compose for Local Development</h2> <p><code>docker-compose.yml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">version</span><span class="p">:</span><span class="w"> </span><span class="s1">'3.8'</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">build</span><span class="p">:</span><span class="w"> </span><span class="l">.</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"3000:3000"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">environment</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">NODE_ENV=development</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">DATABASE_URL=postgresql://user:pass@db:5432/mydb</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">.:/app</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">/app/node_modules</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">depends_on</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">db</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">redis</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">db</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l">postgres:15-alpine</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">environment</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_USER=user</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_PASSWORD=pass</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">POSTGRES_DB=mydb</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">postgres_data:/var/lib/postgresql/data</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"5432:5432"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">redis</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l">redis:7-alpine</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ports</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="s2">"6379:6379"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">volumes</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">postgres_data</span><span class="p">:</span><span class="w"> </span></span></span></code></pre></div><p>Start everything:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker-compose up -d </span></span></code></pre></div><h2 id="environment-variables">Environment Variables</h2> <p>Never hardcode secrets! Use <code>.env</code> file:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-env" data-lang="env"><span class="line"><span class="cl"><span class="c1"># .env (add to .gitignore!)</span> </span></span><span class="line"><span class="cl"><span class="nv">DATABASE_URL</span><span class="o">=</span>postgresql://user:pass@localhost:5432/mydb </span></span><span class="line"><span class="cl"><span class="nv">JWT_SECRET</span><span class="o">=</span>your-secret-key </span></span><span class="line"><span class="cl"><span class="nv">API_KEY</span><span class="o">=</span>your-api-key </span></span></code></pre></div><p>Reference in docker-compose:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">env_file</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">.env</span><span class="w"> </span></span></span></code></pre></div><h2 id="production-dockerfile">Production Dockerfile</h2> <p>Optimized for production:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="w"> </span><span class="k">AS</span><span class="w"> </span><span class="s">builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy package files</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Install all dependencies (including devDependencies)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy source</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Build application</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm run build<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Remove devDependencies</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm prune --production<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Production stage</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Add non-root user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> addgroup -g <span class="m">1001</span> -S nodejs <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> adduser -S nodejs -u <span class="m">1001</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">WORKDIR</span><span class="w"> </span><span class="s">/app</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Copy built app from builder</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/dist ./dist<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/node_modules ./node_modules<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> --from<span class="o">=</span>builder --chown<span class="o">=</span>nodejs:nodejs /app/package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Use non-root user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">USER</span><span class="w"> </span><span class="s">nodejs</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Health check</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">HEALTHCHECK</span> --interval<span class="o">=</span>30s --timeout<span class="o">=</span>3s --start-period<span class="o">=</span>5s --retries<span class="o">=</span><span class="m">3</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> CMD node healthcheck.js<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">EXPOSE</span><span class="w"> </span><span class="s">3000</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">CMD</span> <span class="p">[</span><span class="s2">"node"</span><span class="p">,</span> <span class="s2">"dist/server.js"</span><span class="p">]</span><span class="err"> </span></span></span></code></pre></div><h2 id="image-optimization-tips">Image Optimization Tips</h2> <h3 id="1-use-dockerignore">1. Use .dockerignore</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">node_modules </span></span><span class="line"><span class="cl">npm-debug.log </span></span><span class="line"><span class="cl">.git </span></span><span class="line"><span class="cl">.env </span></span><span class="line"><span class="cl">.DS_Store </span></span><span class="line"><span class="cl">*.md </span></span><span class="line"><span class="cl">.vscode </span></span><span class="line"><span class="cl">coverage </span></span><span class="line"><span class="cl">.github </span></span></code></pre></div><h3 id="2-layer-caching">2. Layer Caching</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ❌ Bad: Changes to code invalidate ALL layers</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ✅ Good: Package changes don't rebuild code</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> package*.json ./<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> npm ci<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">COPY</span> . .<span class="err"> </span></span></span></code></pre></div><h3 id="3-use-alpine-images">3. Use Alpine Images</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Large: node:18 (900MB)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Small: node:18-alpine (150MB)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18-alpine</span><span class="err"> </span></span></span></code></pre></div><h3 id="4-combine-run-commands">4. Combine RUN Commands</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ❌ Bad: Multiple layers</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get update<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get install -y curl<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get clean<span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ✅ Good: Single layer</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> apt-get update <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get install -y curl <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get clean <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> rm -rf /var/lib/apt/lists/*<span class="err"> </span></span></span></code></pre></div><h2 id="deploying-to-aws-ecs">Deploying to AWS ECS</h2> <h3 id="1-build-and-push-to-ecr">1. Build and Push to ECR</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Authenticate Docker to ECR</span> </span></span><span class="line"><span class="cl">aws ecr get-login-password --region us-east-1 <span class="p">|</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> docker login --username AWS --password-stdin 123456789.dkr.ecr.us-east-1.amazonaws.com </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Build image</span> </span></span><span class="line"><span class="cl">docker build -t my-app . </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Tag image</span> </span></span><span class="line"><span class="cl">docker tag my-app:latest 123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Push to ECR</span> </span></span><span class="line"><span class="cl">docker push 123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest </span></span></code></pre></div><h3 id="2-ecs-task-definition">2. ECS Task Definition</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"family"</span><span class="p">:</span> <span class="s2">"my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"networkMode"</span><span class="p">:</span> <span class="s2">"awsvpc"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"requiresCompatibilities"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"FARGATE"</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"cpu"</span><span class="p">:</span> <span class="s2">"256"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"memory"</span><span class="p">:</span> <span class="s2">"512"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"containerDefinitions"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"image"</span><span class="p">:</span> <span class="s2">"123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"portMappings"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"containerPort"</span><span class="p">:</span> <span class="mi">3000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"protocol"</span><span class="p">:</span> <span class="s2">"tcp"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"environment"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"NODE_ENV"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"value"</span><span class="p">:</span> <span class="s2">"production"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"secrets"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"name"</span><span class="p">:</span> <span class="s2">"DATABASE_URL"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"valueFrom"</span><span class="p">:</span> <span class="s2">"arn:aws:secretsmanager:..."</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"logConfiguration"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"logDriver"</span><span class="p">:</span> <span class="s2">"awslogs"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"options"</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-group"</span><span class="p">:</span> <span class="s2">"/ecs/my-app"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-region"</span><span class="p">:</span> <span class="s2">"us-east-1"</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"awslogs-stream-prefix"</span><span class="p">:</span> <span class="s2">"ecs"</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><h2 id="docker-security-best-practices">Docker Security Best Practices</h2> <h3 id="1-use-non-root-user">1. Use Non-Root User</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># Add user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">RUN</span> addgroup -g <span class="m">1001</span> -S nodejs <span class="o">&&</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> adduser -S nodejs -u <span class="m">1001</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># Switch to user</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">USER</span><span class="w"> </span><span class="s">nodejs</span><span class="err"> </span></span></span></code></pre></div><h3 id="2-scan-for-vulnerabilities">2. Scan for Vulnerabilities</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Using Trivy</span> </span></span><span class="line"><span class="cl">docker run --rm -v /var/run/docker.sock:/var/run/docker.sock <span class="se">\ </span></span></span><span class="line"><span class="cl"> aquasec/trivy image my-app:latest </span></span></code></pre></div><h3 id="3-keep-base-images-updated">3. Keep Base Images Updated</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-dockerfile" data-lang="dockerfile"><span class="line"><span class="cl"><span class="c"># ✅ Pin specific version, update regularly</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:18.19.0-alpine</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="c"># ❌ Avoid 'latest' tag</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="k">FROM</span><span class="w"> </span><span class="s">node:latest</span><span class="err"> </span></span></span></code></pre></div><h3 id="4-read-only-filesystem">4. Read-Only Filesystem</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">services</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">app</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">read_only</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">tmpfs</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="l">/tmp</span><span class="w"> </span></span></span></code></pre></div><h2 id="health-checks">Health Checks</h2> <p>Simple health check endpoint:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="c1">// healthcheck.js </span></span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'http'</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">host</span><span class="o">:</span> <span class="s1">'localhost'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">port</span><span class="o">:</span> <span class="mi">3000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">path</span><span class="o">:</span> <span class="s1">'/health'</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nx">timeout</span><span class="o">:</span> <span class="mi">2000</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">request</span><span class="p">(</span><span class="nx">options</span><span class="p">,</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">res</span><span class="p">.</span><span class="nx">statusCode</span> <span class="o">===</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'error'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="nx">request</span><span class="p">.</span><span class="nx">end</span><span class="p">()</span> </span></span></code></pre></div><h2 id="monitoring--logging">Monitoring & Logging</h2> <h3 id="container-logs">Container Logs</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># View logs</span> </span></span><span class="line"><span class="cl">docker logs my-app </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Follow logs</span> </span></span><span class="line"><span class="cl">docker logs -f my-app </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Last 100 lines</span> </span></span><span class="line"><span class="cl">docker logs --tail <span class="m">100</span> my-app </span></span></code></pre></div><h3 id="docker-stats">Docker Stats</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># View resource usage</span> </span></span><span class="line"><span class="cl">docker stats </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Specific container</span> </span></span><span class="line"><span class="cl">docker stats my-app </span></span></code></pre></div><h2 id="common-issues--solutions">Common Issues & Solutions</h2> <h3 id="issue-image-too-large">Issue: Image Too Large</h3> <p><strong>Solution</strong>: Multi-stage builds, Alpine images, .dockerignore</p> <h3 id="issue-slow-builds">Issue: Slow Builds</h3> <p><strong>Solution</strong>: Optimize layer caching, use BuildKit</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nv">DOCKER_BUILDKIT</span><span class="o">=</span><span class="m">1</span> docker build -t my-app . </span></span></code></pre></div><h3 id="issue-container-wont-start">Issue: Container Won’t Start</h3> <p><strong>Solution</strong>: Check logs, verify CMD/ENTRYPOINT</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">docker logs container-id </span></span><span class="line"><span class="cl">docker inspect container-id </span></span></code></pre></div><h2 id="cicd-pipeline-example-github-actions">CI/CD Pipeline Example (GitHub Actions)</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Deploy</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">on</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">push</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">branches</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">main]</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">jobs</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">deploy</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">runs-on</span><span class="p">:</span><span class="w"> </span><span class="l">ubuntu-latest</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">steps</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">actions/checkout@v3</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Configure AWS credentials</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">aws-actions/configure-aws-credentials@v2</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">with</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-access-key-id</span><span class="p">:</span><span class="w"> </span><span class="l">${{ secrets.AWS_ACCESS_KEY_ID }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-secret-access-key</span><span class="p">:</span><span class="w"> </span><span class="l">${{ secrets.AWS_SECRET_ACCESS_KEY }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">aws-region</span><span class="p">:</span><span class="w"> </span><span class="l">us-east-1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Login to Amazon ECR</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">id</span><span class="p">:</span><span class="w"> </span><span class="l">login-ecr</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l">aws-actions/amazon-ecr-login@v1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Build and push image</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">env</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ECR_REGISTRY</span><span class="p">:</span><span class="w"> </span><span class="l">${{ steps.login-ecr.outputs.registry }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ECR_REPOSITORY</span><span class="p">:</span><span class="w"> </span><span class="l">my-app</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">IMAGE_TAG</span><span class="p">:</span><span class="w"> </span><span class="l">${{ github.sha }}</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">run</span><span class="p">:</span><span class="w"> </span><span class="p">|</span><span class="sd"> </span></span></span><span class="line"><span class="cl"><span class="sd"> docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG . </span></span></span><span class="line"><span class="cl"><span class="sd"> docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">Update ECS service</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">run</span><span class="p">:</span><span class="w"> </span><span class="p">|</span><span class="sd"> </span></span></span><span class="line"><span class="cl"><span class="sd"> aws ecs update-service --cluster my-cluster \ </span></span></span><span class="line"><span class="cl"><span class="sd"> --service my-app --force-new-deployment</span><span class="w"> </span></span></span></code></pre></div><h2 id="best-practices-checklist">Best Practices Checklist</h2> <ul> <li><input disabled="" type="checkbox"> Use multi-stage builds</li> <li><input disabled="" type="checkbox"> Use .dockerignore</li> <li><input disabled="" type="checkbox"> Run as non-root user</li> <li><input disabled="" type="checkbox"> Pin base image versions</li> <li><input disabled="" type="checkbox"> Scan for vulnerabilities</li> <li><input disabled="" type="checkbox"> Implement health checks</li> <li><input disabled="" type="checkbox"> Use environment variables for config</li> <li><input disabled="" type="checkbox"> Keep images small (<500MB)</li> <li><input disabled="" type="checkbox"> Tag images properly (not just ’latest')</li> <li><input disabled="" type="checkbox"> Set up logging and monitoring</li> </ul> <h2 id="resources">Resources</h2> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <h2 id="conclusion">Conclusion</h2> <p>Docker streamlines deployment by:</p> <ol> <li>Creating consistent environments</li> <li>Simplifying dependency management</li> <li>Enabling easy scaling</li> <li>Improving security through isolation</li> </ol> <p>Start small, optimize incrementally, and always test in staging before production!</p> <hr> <p><strong>Example repo</strong>: </p> <p>Questions? Reach out on !</p> </article> <article> <h1>LoopyCuts</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <h1 id="loopycuts">LoopyCuts</h1> <h2 id="loopycuts-practical-feature-preserving-block-decomposition">LoopyCuts: Practical Feature-Preserving Block Decomposition</h2> <div style="margin:1.5rem 0;"> </div> <div style="margin:1rem 0;"> <a href="https://vcgdata.isti.cnr.it/Publications/2020/LPPSC20/LPPSC20.pdf" target="_blank" style="margin-right:1rem;">📄 PDF</a> <a href="http://vcg.isti.cnr.it/publication/2020/LPPSC20/" target="_blank" style="margin-right:1rem;">🔗 VCG Page</a> <a href="https://github.com/mlivesu/LoopyCuts" target="_blank">💻 Source Code</a> </div> <p><strong> </strong>, <strong> </strong>, <strong> </strong>, <strong> </strong>, <strong> </strong></p> <p><em>ACM Transactions on Graphics — Siggraph 2020</em></p> <h2 id="abstract">Abstract</h2> <p>We present a new fully automatic block-decomposition algorithm for feature-preserving, strongly hex-dominant meshing, that yields results with a drastically larger percentage of hex elements than prior art. Our method is guided by a surface field that conforms to both surface curvature and feature lines, and exploits an ordered set of cutting loops that evenly cover the input surface, defining an arrangement of loops suitable for hex-element generation. We decompose the solid into coarse blocks by iteratively cutting it with surfaces bounded by these loops. The vast majority of the obtained blocks can be turned into hexahedral cells via simple midpoint subdivision.</p> </article> <article> <h1>Parafashion</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <h1 id="parafashion">Parafashion</h1> <h2 id="computational-pattern-making-from-3d-garment-models">Computational Pattern Making from 3D Garment Models</h2> <div style="margin:1.5rem 0;"> </div> <div style="margin:1rem 0;"> <a href="https://dl.acm.org/doi/10.1145/3528223.3530145" target="_blank" style="margin-right:1rem;">📄 Siggraph Paper</a> <a href="https://www.dropbox.com/scl/fi/xcv29rxthxu64umpal5yp/parafashion_final_talk.pptx?rlkey=gbellvc3lusj0rkn0s96nn6k1&st=hrj3ytay&dl=0" target="_blank" style="margin-right:1rem;">🎞️ Presentation</a> <a href="https://github.com/nicopietroni/parafashion" target="_blank">💻 Source Code</a> </div> <p><strong> </strong>, <strong>C Dumery</strong>, <strong>R Guenot-Falque</strong>, <strong>M Liu</strong>, <strong>T Vidal-Calleja</strong>, <strong> </strong></p> <h2 id="automatic-pattern-layout-decomposition">Automatic Pattern Layout Decomposition</h2> <p>Our algorithm segments an input 3D garment shape into patches and computes their 2D parameterization, resulting in pattern pieces that can be cut out of fabric and sewn together to manufacture the garment. Unlike the general state-of-the-art approaches for surface cutting and flattening, our method explicitly targets garment fabrication.</p> <h2 id="fabrication-aware">Fabrication Aware</h2> <p>It accounts for the unique properties and constraints of tailoring, such as seam symmetry, the usage of darts, fabric grain alignment, and a flattening distortion measure that models woven fabric deformation, respecting its anisotropic behavior.</p> <h2 id="interactive">Interactive</h2> <p>While our algorithm can automatically produce the sewing patterns, it is fast enough to admit user input to creatively iterate on the pattern design. Our method can take several target poses of the 3D garment into account.</p> </article> <article> <h1>QuadMixer</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <h1 id="quadmixer">QuadMixer</h1> <h2 id="layout-preserving-blending-of-quadrilateral-meshes">Layout Preserving Blending of Quadrilateral Meshes</h2> <div style="margin:1.5rem 0;"> </div> <div style="margin:1rem 0 2rem 0;"> <a href="http://vcg.isti.cnr.it/Publications/2019/NHESCP19/quadmixer_author_version.pdf" target="_blank" style="margin-right:1rem;">📄 Siggraph Paper</a> <a href="https://www.dropbox.com/scl/fi/10yu97rqzmds7fkkcgm9a/quadmixer.pptx?rlkey=6bk8cesranngj92u45uvj0e13&st=whlwcs12&dl=0" target="_blank" style="margin-right:1rem;">🎞️ Presentation</a> <a href="https://nicopietroni.github.io/publications/quadmixer_results.zip" target="_blank" style="margin-right:1rem;">📦 Dataset</a> <a href="https://github.com/stefanonuvoli/quadmixer" target="_blank">💻 Source Code</a> </div> <p><strong> </strong>, <strong>A Hernandez</strong>, <strong>C Esperanca</strong>, <strong> </strong>, <strong> </strong>, <strong> </strong></p> <p><em>ACM Transactions on Graphics — Siggraph Asia 2019</em></p> <hr> <h2 id="model-by-composition">Model-by-Composition</h2> <div style="display:flex;gap:2rem;align-items:flex-start;margin:1.5rem 0;"> <div> Our modeling principles take inspiration from the classical boolean operations defined on triangle meshes, but with operators redesigned to work on quadrilateral meshes. QuadMixer mimics all the conventional boolean operations that are available for triangle meshes such as union, intersection, and difference. </div> </div> <h2 id="a-novel-modelling-approach">A Novel Modelling Approach</h2> <div style="display:flex;gap:2rem;align-items:flex-start;margin:1.5rem 0;"> <div> QuadMixer is a novel interactive technique to compose quad mesh components preserving the majority of the original layouts. Our technique keeps untouched all the quads in the patches which are not involved in the blending. The resulting mesh preserves the designed edge flow that, by construction, is captured and incorporated to the new quads as much as possible. </div> </div> <h2 id="interactive">Interactive</h2> <div style="display:flex;gap:2rem;align-items:flex-start;margin:1.5rem 0;"> <div> QuadMixer works in real-time, allowing the artist to see and adjust the results of the modifications interactively. </div> </div> </article> <article> <h1>SkinMixer</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <h1 id="skinmixer">SkinMixer</h1> <h2 id="skinmixer-blending-3d-animated-models">SkinMixer: Blending 3D Animated Models</h2> <div style="margin:1rem 0;"> <a href="https://dl.acm.org/doi/10.1145/3550454.3555503" target="_blank" style="margin-right:1rem;">📄 Siggraph Paper</a> <a href="https://www.dropbox.com/scl/fi/rgeg4oc6r4nrgq38lg3qt/talk_FINAL.pptx?rlkey=ftqi182tl5t80cyjlp8enloxm&st=0gzqvc1z&dl=0" target="_blank" style="margin-right:1rem;">🎞️ Presentation</a> <a href="https://www.dropbox.com/scl/fi/r9tllmt7shf91lyrh2yd5/Animation_Videos_Compr.zip?rlkey=7jddhnjf5b6qg8qkpgy1qx6uu&st=3yv0abq8&dl=0" target="_blank" style="margin-right:1rem;">📦 Dataset</a> <a href="https://github.com/stefanonuvoli/skinmixer" target="_blank">💻 Source Code</a> </div> <p><strong> </strong>, <strong> </strong>, <strong> </strong>, <strong> </strong>, <strong> </strong></p> <h2 id="mix-and-match-animated-models">Mix and Match Animated Models</h2> <p>Skinmixer is a novel technique to compose new 3D animated models, such as videogame characters, by combining pieces from existing ones. Our method works on production-ready rigged, skinned, and animated 3D models to reassemble new ones. The resulting model preserves the quality of the input meshings (which can be quad-dominant and semi-regular), skinning weights (inducing believable deformation), and animations, featuring coherent movements of the new skeleton.</p> <h2 id="model-by-composition">Model-by-Composition</h2> <p>Our method enables content creators to reuse valuable, carefully designed assets by assembling new ready-to-use characters while preserving most of the hand-crafted subtleties of models authored by digital artists. Skinmixer allows for drastically cutting the time needed to obtain the final result.</p> <div style="display:flex;flex-direction:column;gap:1.5rem;margin:2rem 0;"> </div> </article> </main></body></html>