http://teacherworkforce.com/projects/tel-mo-report/Thu, 21 May 2026 00:00:00 +0000http://teacherworkforce.com/projects/tel-mo-report/<p><strong>ERRE Report · May 2026</strong> <strong>Authors:</strong> Tuan D. Nguyen, Yujia Liu, &amp; Cory Koedel <strong>Educator Recruitment, Retention, and Effectiveness (ERRE) Center, University of Missouri</strong></p> <p>This report presents a landscape analysis of teacher evaluation models used across Missouri school districts during the post-COVID period from the 2022–23 through 2024–25 school years. It offers a descriptive overview of the evaluation models, examines their geographic distribution, and explores variation across districts operating in different contexts. The analysis draws primarily on the annual Educator Evaluation Survey administered by the Missouri Department of Elementary and Secondary Education.</p> <h2 id="key-findings">Key Findings</h2> <ul> <li>Seven different teacher evaluation models are in use in Missouri districts, but four models account for nearly all adoptions.</li> <li>The NEE model is the most widely used model, especially in small and rural districts.</li> <li>City and suburban districts draw on a more diverse mix of evaluation models.</li> <li>Most evaluation models divide teachers into four or seven performance rating categories.</li> <li>Teachers are rated &ldquo;effective&rdquo; at consistently high levels under every model.</li> <li>Suburban districts report the highest average share of teachers rated effective; city districts report the lowest.</li> </ul> <h2 id="performance-rating-levels">Performance Rating Levels</h2> <p>Most evaluation models use either four or seven rating categories. The NEE model employs a scale with seven categories (about 96 percent). At the opposite extreme, the Danielson model uses a four-level scale across all adopting schools. The Marzano model, the Revised MO model, and district-developed standards also lean heavily toward four levels, with roughly two-thirds to four-fifths of their schools adopting that structure. The MO model and the MO T&amp;L model split almost evenly between four and seven levels.</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" > <img alt="Figure 2.1. Distribution of Performance Rating Levels by Teacher Evaluation Model (2024–25)" srcset="http://teacherworkforce.com/projects/tel-mo-report/featured_hu_e538d0640c449cba.webp 320w, http://teacherworkforce.com/projects/tel-mo-report/featured_hu_3df3f033d4d88e37.webp 480w, http://teacherworkforce.com/projects/tel-mo-report/featured_hu_85231e3e4226e92a.webp 760w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px" src="http://teacherworkforce.com/projects/tel-mo-report/featured_hu_e538d0640c449cba.webp" width="760" height="552" loading="lazy" data-zoomable /></div> </div></figure> </p> <p><em>Figure 2.1. Distribution of Performance Rating Levels by Teacher Evaluation Model (2024–25)</em></p> <h2 id="download">Download</h2> <p><strong> </strong></p> <p><strong> </strong> — a shorter summary of this report&rsquo;s findings.</p>http://teacherworkforce.com/blog/building-rest-api/Tue, 10 Dec 2024 00:00:00 +0000http://teacherworkforce.com/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>http://teacherworkforce.com/blog/react-performance/Fri, 22 Nov 2024 00:00:00 +0000http://teacherworkforce.com/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>http://teacherworkforce.com/blog/docker-deployment/Tue, 15 Oct 2024 00:00:00 +0000http://teacherworkforce.com/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>