https://sabrina-henry.github.io/projects/sigma/Thu, 01 Jan 2026 00:00:00 +0000https://sabrina-henry.github.io/projects/sigma/<p>Modern neural networks can have very high confidence — but confidence alone does not tell us <em>why</em> a prediction was made.</p> <p>Feature attribution methods aim to answer this <em>why</em> by highlighting which parts of an input most influenced a model&rsquo;s decision. In practice, however, the way we choose to explain a prediction can actually shape the explanation itself.</p> <h2 id="what-does-it-mean-to-explain-a-prediction">What does it mean to explain a prediction?</h2> <p>Given an input and a trained model, an attribution method assigns importance scores to individual input features — pixels in an image, time points on a graph, or tokens in text — indicating how strongly each contributed to the final prediction.</p> <p>Among the most widely used approaches are <em>path-based</em> methods, which accumulate model gradients as the input is gradually transformed, telling us how sensitive each input feature is to the output prediction.</p> <div class="interactive-figure"> <div class="figure-frame"> <img src="Interactive_figs/ladybug.png" alt="Input image" class="figure-image base-image"> <img src="Interactive_figs/SIGMA_ladybug.png" alt="Integrated Gradients attribution" class="figure-image attribution-image"> </div> <button class="toggle-btn" onclick="toggleAttribution(this)">Click to Show Attribution</button> <figcaption>The model predicted the class 'Ladybug' for this input image, click to highlight which pixels were most important in this prediction.</figcaption> </div> <h2 id="the-baseline-assumption">The baseline assumption</h2> <p>Integrated Gradients explains a prediction by integrating gradients along a straight path from a <em>baseline</em> input to the image being explained. The baseline is intended to represent the absence of information — often a black or blurred image. However, different baselines can lead to noticeably different explanations, even when the model and input remain unchanged.</p> <figure class="interactive-figure" data-figure="baseline-1"> <div class="figure-frame-overlay"> <img src="Interactive_figs/ladybug.png" alt="Input image" class="figure-image base-image"> <img src="" alt="Attribution overlay" class="figure-image attribution-image" data-overlay> </div> <div class="toggle-row" role="group" aria-label="Choose baseline"> <button class="toggle-btn baseline-btn" aria-pressed="true" data-src="Interactive_figs/IG_black_baseline.png" onclick="setBaseline(this)">Black</button> <button class="toggle-btn baseline-btn" aria-pressed="false" data-src="Interactive_figs/IG_noise_baseline.png" onclick="setBaseline(this)">Noise</button> <button class="toggle-btn baseline-btn" aria-pressed="false" data-src="Interactive_figs/IG_blur_baseline.png" onclick="setBaseline(this)">Blurred</button> </div> <figcaption>Integrated Gradients attribution for the same input using different baselines.</figcaption> </figure> <h2 id="saturation-along-attribution-paths">Saturation along attribution paths</h2> <p>As the input moves away from the baseline, the model&rsquo;s confidence often increases rapidly before entering a saturated region where further changes have little effect on the output. Gradients accumulated in these flat regions can dominate the final attribution, despite contributing little to the actual decision.</p> <figure class="interactive-figure figure-large"> <div class="figure-frame"> <img src="Interactive_figs/saturation-01.png" alt="Saturation along attribution paths" class="figure-image"> </div> </figure> <h2 id="thinking-in-terms-of-confidence-landscapes">Thinking in terms of confidence landscapes</h2> <p>Rather than viewing attribution as interpolation between two images, it can be helpful to think of the model&rsquo;s output as a <em>confidence landscape</em> over input space. An informative explanation should focus on the regions where the model&rsquo;s belief actually changes — not where it is already certain.</p> <figure class="interactive-figure figure-large"> <div class="figure-frame"> <img src="Interactive_figs/conflandscape.png" alt="Confidence landscape" class="figure-image"> </div> </figure> <h2 id="a-self-guided-path">A self-guided path</h2> <p>SIGMA removes the need for a baseline entirely. Instead of following a predefined path, SIGMA constructs its own trajectory by iteratively perturbing the input in directions that reduce the model&rsquo;s confidence in the predicted class. Gradients are accumulated along this path and weighted by the corresponding drop in confidence.</p> <figure class="interactive-figure figure-video"> <div class="figure-frame"> <video class="article-video" autoplay muted loop playsinline controls preload="auto"> <source src="Interactive_figs/sigma_side_by_side.mp4" type="video/mp4"> Sorry — your browser can't play this video. </video> </div> <figcaption>SIGMA trajectory through a prediction landscape with corresponding perturbed input and attribution evolution.</figcaption> </figure> <figure class="interactive-figure figure-method"> <div class="figure-frame"> <img src="Interactive_figs/SIGMA.png" alt="SIGMA attribution method" class="figure-image"> </div> </figure> <h2 id="what-changes-in-practice">What changes in practice?</h2> <p>Because SIGMA follows the model&rsquo;s confidence downhill, it avoids early saturation and continues to collect informative gradients throughout the path. The resulting attribution maps tend to be more spatially coherent and less influenced by regions that have little effect on the prediction.</p> <figure class="interactive-figure figure-large"> <div class="figure-frame"> <img src="Interactive_figs/further_results_qualitative.png" alt="Further results" class="figure-image"> </div> </figure> <h2 id="faithfulness-to-model-behaviour">Faithfulness to model behaviour</h2> <p>By accumulating gradients in proportion to confidence change, SIGMA aligns attribution strength with the model&rsquo;s sensitivity. Revealing input features in order of attribution importance reconstructs the model&rsquo;s confidence more efficiently than random or saturated-gradient explanations.</p> <h2 id="beyond-explanation">Beyond explanation</h2> <p>Following confidence collapse naturally produces perturbed inputs that remain recognisable to humans but receive near-zero confidence from the model. These low-confidence variants expose decision boundaries and can be reused as training augmentations, linking interpretability and model reliability.</p> <div class="perturb-widget"> <div class="perturb-buttons" role="tablist" aria-label="Choose perturbation"> <button class="perturb-btn is-active" data-mode="clean" aria-selected="true"> <img src="Interactive_figs/clean_button.png" alt="Clean example"> </button> <button class="perturb-btn" data-mode="gaussian" aria-selected="false"> <img src="Interactive_figs/gaussian_button.png" alt="Gaussian example"> </button> <button class="perturb-btn" data-mode="fgsm" aria-selected="false"> <img src="Interactive_figs/fgsm_button.png" alt="FGSM example"> </button> <button class="perturb-btn" data-mode="sigma" aria-selected="false"> <img src="Interactive_figs/sigma_button.png" alt="SIGMA example"> </button> </div> <figure class="chart-figure"> <img id="chartImg" src="Interactive_figs/web_bar_original.png" alt="Bar chart for Clean perturbation"> <figcaption id="chartCap">Original network performance (Clean)</figcaption> </figure> </div> <script> (function () { const CHARTS = { clean: { src: "Interactive_figs/web_bar_original.png", cap: "Original network performance (Clean)" }, gaussian: { src: "Interactive_figs/web_bar_gaussian.png", cap: "Network performance under Gaussian noise augmentations" }, fgsm: { src: "Interactive_figs/web_bar_FGSM.png", cap: "Network performance under FGSM augmentations" }, sigma: { src: "Interactive_figs/web_bar_SIGMA.png", cap: "Network performance under SIGMA augmentations" } }; const chartImg = document.getElementById("chartImg"); const chartCap = document.getElementById("chartCap"); function setActive(btn) { document.querySelectorAll(".perturb-btn").forEach(b => { const active = (b === btn); b.classList.toggle("is-active", active); b.setAttribute("aria-selected", active ? "true" : "false"); }); } function swapChart(mode) { const d = CHARTS[mode]; chartImg.src = d.src; chartImg.alt = "Bar chart for " + mode; chartCap.textContent = d.cap; } document.querySelectorAll(".perturb-btn").forEach(btn => { btn.addEventListener("click", () => { setActive(btn); swapChart(btn.dataset.mode); }); }); })(); </script> <h2 id="conclusion">Conclusion</h2> <p>SIGMA offers a shift in perspective for attribution based interpretability — from explaining predictions relative to arbitrary references, to explaining them by following the model&rsquo;s own confidence. By treating explanations as paths shaped by the model itself, we gain both clearer attributions and a deeper understanding of how confidence emerges and collapses.</p> <script> function toggleAttribution(button) { const figure = button.closest(".interactive-figure"); if (!figure) return; const attribution = figure.querySelector(".attribution-image"); if (!attribution) return; const isVisible = attribution.classList.toggle("visible"); button.textContent = isVisible ? "Hide attribution" : "Show attribution"; button.setAttribute("aria-pressed", isVisible ? "true" : "false"); } function setBaseline(button) { const figure = button.closest(".interactive-figure"); if (!figure) return; const overlay = figure.querySelector("img[data-overlay]"); if (!overlay) return; const buttons = figure.querySelectorAll(".baseline-btn"); buttons.forEach(btn => { const isActive = btn === button; btn.classList.toggle("active", isActive); btn.setAttribute("aria-pressed", isActive ? "true" : "false"); }); const src = button.getAttribute("data-src").trim(); overlay.src = src; overlay.classList.add("visible"); } document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".interactive-figure").forEach(fig => { const overlay = fig.querySelector("img[data-overlay]"); const active = fig.querySelector(".baseline-btn.active"); if (overlay && active) setBaseline(active); }); }); </script> <hr> <p><strong>Paper:</strong> <br> <strong>Code:</strong> <br> <strong>Contact:</strong> </p>https://sabrina-henry.github.io/blog/building-rest-api/Tue, 10 Dec 2024 00:00:00 +0000https://sabrina-henry.github.io/blog/building-rest-api/<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">&amp;&amp;</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">&#34;compilerOptions&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;target&#34;</span><span class="p">:</span> <span class="s2">&#34;ES2020&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;module&#34;</span><span class="p">:</span> <span class="s2">&#34;commonjs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;lib&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;ES2020&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;outDir&#34;</span><span class="p">:</span> <span class="s2">&#34;./dist&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;rootDir&#34;</span><span class="p">:</span> <span class="s2">&#34;./src&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;strict&#34;</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">&#34;esModuleInterop&#34;</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">&#34;skipLibCheck&#34;</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">&#39;@prisma/client&#39;</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">&#39;development&#39;</span> <span class="o">?</span> <span class="p">[</span><span class="s1">&#39;query&#39;</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 &amp; 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">&#39;jsonwebtoken&#39;</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">&#39;express&#39;</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">=&gt;</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">&#39; &#39;</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">&#39;Authentication required&#39;</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">&#39;Invalid or expired token&#39;</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">&#39;express&#39;</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">=&gt;</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">&#39;error&#39;</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">&#39;Unexpected error:&#39;</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">&#39;error&#39;</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">&#39;Internal server error&#39;</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">&#39;zod&#39;</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">&#39;Invalid email address&#39;</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">&#39;Name must be at least 2 characters&#39;</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">&#39;Password must be at least 8 characters&#39;</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">=&gt;</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">=&gt;</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">&#39;error&#39;</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">&#39;swagger-jsdoc&#39;</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">&#39;3.0.0&#39;</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">&#39;My API&#39;</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">&#39;1.0.0&#39;</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">&#39;API documentation&#39;</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">&#39;http://localhost:3000&#39;</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">&#39;Development server&#39;</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">&#39;./src/routes/*.ts&#39;</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">&#39;/users&#39;</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">&#39;supertest&#39;</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">&#39;../src/app&#39;</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">&#39;../src/config/database&#39;</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">&#39;User API&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</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">=&gt;</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">=&gt;</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">&#39;POST /api/users&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</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">&#39;should create a new user&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=&gt;</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">&#39;/api/users&#39;</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">&#39;test@example.com&#39;</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">&#39;Test User&#39;</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">&#39;password123&#39;</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">&#39;id&#39;</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">&#39;test@example.com&#39;</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">&#39;should return 400 for invalid email&#39;</span><span class="p">,</span> <span class="kr">async</span> <span class="p">()</span> <span class="o">=&gt;</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">&#39;/api/users&#39;</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">&#39;invalid-email&#39;</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">&#39;Test User&#39;</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">&#39;password123&#39;</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">&#39;errors&#39;</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">&#39;express-rate-limit&#39;</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">&#39;/api/&#39;</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">&#39;helmet&#39;</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">&#39;cors&#39;</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">&#39;,&#39;</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">&#39;express-mongo-sanitize&#39;</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">&#39;compression&#39;</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">&#39;ioredis&#39;</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&#39;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">&#39;/health&#39;</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">=&gt;</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">&#39;healthy&#39;</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">&#39;unhealthy&#39;</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>https://sabrina-henry.github.io/blog/react-performance/Fri, 22 Nov 2024 00:00:00 +0000https://sabrina-henry.github.io/blog/react-performance/<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">&lt;</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="p">=&gt;</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">)}&gt;</span><span class="nx">Count</span><span class="o">:</span> <span class="p">{</span><span class="nx">count</span><span class="p">}&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">ExpensiveChild</span> <span class="p">/&gt;</span> <span class="p">{</span><span class="cm">/* Re-renders even though it doesn&#39;t use count! */</span><span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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">=&gt;</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">&#39;ExpensiveChild rendered&#39;</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;{</span><span class="cm">/* expensive rendering */</span><span class="p">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</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">=&gt;</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&#39;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">&lt;</span><span class="nt">ul</span><span class="p">&gt;{</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">=&gt;</span> <span class="p">&lt;</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">}&gt;{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;)}&lt;/</span><span class="nt">ul</span><span class="p">&gt;</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">=&gt;</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">=&gt;</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">&lt;</span><span class="nt">ul</span><span class="p">&gt;{</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">=&gt;</span> <span class="p">&lt;</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">}&gt;{</span><span class="nx">p</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;)}&lt;/</span><span class="nt">ul</span><span class="p">&gt;</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&rsquo;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">=&gt;</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">&lt;</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">/&gt;</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">=&gt;</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="p">&lt;</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">}&gt;</span><span class="nx">Click</span><span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</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">=&gt;</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">=&gt;</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">&lt;</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">/&gt;</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">&lt;</span><span class="nt">div</span><span class="p">&gt;</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">=&gt;</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}&gt;{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">))}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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">&#39;react-window&#39;</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">=&gt;</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}&gt;{</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">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</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">&lt;</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">&#34;100%&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">&gt;</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">&lt;/</span><span class="nt">FixedSizeList</span><span class="p">&gt;</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 &lt;50ms instead of 2000ms!</p> <h2 id="5-code-splitting--lazy-loading">5. Code Splitting &amp; 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">&#39;./AdminPanel&#39;</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">&#39;./UserDashboard&#39;</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">&lt;</span><span class="nt">AdminPanel</span> <span class="p">/&gt;</span> <span class="o">:</span> <span class="p">&lt;</span><span class="nt">UserDashboard</span> <span class="p">/&gt;</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">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./AdminPanel&#39;</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">=&gt;</span> <span class="kr">import</span><span class="p">(</span><span class="s1">&#39;./UserDashboard&#39;</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">&lt;</span><span class="nt">Suspense</span> <span class="na">fallback</span><span class="o">=</span><span class="p">{&lt;</span><span class="nt">Loading</span> <span class="p">/&gt;}&gt;</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">&lt;</span><span class="nt">AdminPanel</span> <span class="p">/&gt;</span> <span class="o">:</span> <span class="p">&lt;</span><span class="nt">UserDashboard</span> <span class="p">/&gt;}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">Suspense</span><span class="p">&gt;</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">&#39;light&#39;</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">&lt;</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">}}&gt;</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">&lt;/</span><span class="nt">AppContext.Provider</span><span class="p">&gt;</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">&#39;light&#39;</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">&lt;</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">}}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}}&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}}&gt;</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">&lt;/</span><span class="nt">NotificationContext.Provider</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ThemeContext.Provider</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">UserContext.Provider</span><span class="p">&gt;</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">&#39;&#39;</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">=&gt;</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 &#34;javascript&#34;! </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">&lt;</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">=&gt;</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">/&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">&#39;&#39;</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">=&gt;</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">&lt;</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">=&gt;</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">/&gt;</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">=&gt;</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}&gt;{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</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&#39;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">=&gt;</span> <span class="p">(</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</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">}&gt;{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}&lt;/</span><span class="nt">div</span><span class="p">&gt;</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 (&gt;50ms)</li> <li>Check FPS during animations</li> </ul> </li> <li> <p><strong>Lighthouse</strong></p> <ul> <li>Run audit</li> <li>Focus on &ldquo;Time to Interactive&rdquo;</li> <li>Check bundle sizes</li> </ul> </li> </ol> <h2 id="common-pitfalls">Common Pitfalls</h2> <p>❌ <strong>Don&rsquo;t</strong> optimize prematurely<br> ✅ <strong>Do</strong> measure first, optimize bottlenecks</p> <p>❌ <strong>Don&rsquo;t</strong> memo everything<br> ✅ <strong>Do</strong> memo expensive components</p> <p>❌ <strong>Don&rsquo;t</strong> use useMemo for simple calculations<br> ✅ <strong>Do</strong> use for actual performance issues</p> <p>❌ <strong>Don&rsquo;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 &amp; 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&rsquo;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>https://sabrina-henry.github.io/blog/docker-deployment/Tue, 15 Oct 2024 00:00:00 +0000https://sabrina-henry.github.io/blog/docker-deployment/<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>❌ &ldquo;Works on my machine&rdquo; 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">&#34;node&#34;</span><span class="p">,</span> <span class="s2">&#34;server.js&#34;</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">&#34;node&#34;</span><span class="p">,</span> <span class="s2">&#34;dist/server.js&#34;</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">&#39;3.8&#39;</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">&#34;3000:3000&#34;</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">&#34;5432:5432&#34;</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">&#34;6379:6379&#34;</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">&amp;&amp;</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">&#34;node&#34;</span><span class="p">,</span> <span class="s2">&#34;dist/server.js&#34;</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&#39;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">&amp;&amp;</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get install -y curl <span class="o">&amp;&amp;</span> <span class="se">\ </span></span></span><span class="line"><span class="cl"> apt-get clean <span class="o">&amp;&amp;</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">&#34;family&#34;</span><span class="p">:</span> <span class="s2">&#34;my-app&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;networkMode&#34;</span><span class="p">:</span> <span class="s2">&#34;awsvpc&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;requiresCompatibilities&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;FARGATE&#34;</span><span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;cpu&#34;</span><span class="p">:</span> <span class="s2">&#34;256&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;memory&#34;</span><span class="p">:</span> <span class="s2">&#34;512&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;containerDefinitions&#34;</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">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;my-app&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;image&#34;</span><span class="p">:</span> <span class="s2">&#34;123456789.dkr.ecr.us-east-1.amazonaws.com/my-app:latest&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;portMappings&#34;</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">&#34;containerPort&#34;</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">&#34;protocol&#34;</span><span class="p">:</span> <span class="s2">&#34;tcp&#34;</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">&#34;environment&#34;</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">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;NODE_ENV&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;value&#34;</span><span class="p">:</span> <span class="s2">&#34;production&#34;</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">&#34;secrets&#34;</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">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;DATABASE_URL&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;valueFrom&#34;</span><span class="p">:</span> <span class="s2">&#34;arn:aws:secretsmanager:...&#34;</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">&#34;logConfiguration&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;logDriver&#34;</span><span class="p">:</span> <span class="s2">&#34;awslogs&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;options&#34;</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;awslogs-group&#34;</span><span class="p">:</span> <span class="s2">&#34;/ecs/my-app&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;awslogs-region&#34;</span><span class="p">:</span> <span class="s2">&#34;us-east-1&#34;</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">&#34;awslogs-stream-prefix&#34;</span><span class="p">:</span> <span class="s2">&#34;ecs&#34;</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">&amp;&amp;</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 &#39;latest&#39; 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">&#39;http&#39;</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">&#39;localhost&#39;</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">&#39;/health&#39;</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">=&gt;</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">&#39;error&#39;</span><span class="p">,</span> <span class="p">()</span> <span class="p">=&gt;</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 &amp; 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 &amp; 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&rsquo;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 (&lt;500MB)</li> <li><input disabled="" type="checkbox"> Tag images properly (not just &rsquo;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>