<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Shivam Yadav</title>
    <description>The latest articles on DEV Community by Shivam Yadav (@shivam_yadav_8e22bf5bf987).</description>
    <link>https://dev.to/shivam_yadav_8e22bf5bf987</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3799641%2Fe1602dec-3997-4bdc-be38-7884d78bde4f.png</url>
      <title>DEV Community: Shivam Yadav</title>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/shivam_yadav_8e22bf5bf987"/>
    <language>en</language>
    <item>
      <title>The Node.js Event Loop Explained</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:35:25 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/the-nodejs-event-loop-explained-17k4</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/the-nodejs-event-loop-explained-17k4</guid>
      <description>&lt;h1&gt;
  
  
  The Node.js Event Loop Explained
&lt;/h1&gt;

&lt;p&gt;If you spend even 15 minutes learning Node.js, eventually someone says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Everything works because of the event loop.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And suddenly beginners are expected to understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;asynchronous execution&lt;/li&gt;
&lt;li&gt;task queues&lt;/li&gt;
&lt;li&gt;call stacks&lt;/li&gt;
&lt;li&gt;callbacks&lt;/li&gt;
&lt;li&gt;timers&lt;/li&gt;
&lt;li&gt;I/O operations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;all at once.&lt;/p&gt;

&lt;p&gt;Which usually results in:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;brain buffering indefinitely.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The funny part?&lt;/p&gt;

&lt;p&gt;The event loop is actually based on a very simple idea.&lt;/p&gt;

&lt;p&gt;It is basically:&lt;/p&gt;

&lt;h1&gt;
  
  
  a smart task manager.
&lt;/h1&gt;

&lt;p&gt;That’s it.&lt;/p&gt;

&lt;p&gt;In this article, we will understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what the event loop is&lt;/li&gt;
&lt;li&gt;why Node.js needs it&lt;/li&gt;
&lt;li&gt;call stack vs task queue&lt;/li&gt;
&lt;li&gt;how async operations work&lt;/li&gt;
&lt;li&gt;timers vs I/O callbacks&lt;/li&gt;
&lt;li&gt;why the event loop makes Node.js scalable&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And we will keep things conceptual and beginner-friendly instead of diving into terrifying internal phases immediately.&lt;/p&gt;

&lt;p&gt;Because surviving the basics matters first.&lt;/p&gt;




&lt;h1&gt;
  
  
  First Understand the Main Problem
&lt;/h1&gt;

&lt;p&gt;Node.js is:&lt;/p&gt;

&lt;h1&gt;
  
  
  single-threaded
&lt;/h1&gt;

&lt;p&gt;Meaning:&lt;br&gt;
JavaScript mainly runs on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one main thread&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now logically this sounds dangerous.&lt;/p&gt;

&lt;p&gt;Because if one thread handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;requests&lt;/li&gt;
&lt;li&gt;file reading&lt;/li&gt;
&lt;li&gt;database calls&lt;/li&gt;
&lt;li&gt;timers&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;then shouldn’t everything freeze constantly?&lt;/p&gt;

&lt;p&gt;That would be true…&lt;/p&gt;

&lt;p&gt;if Node.js executed everything synchronously.&lt;/p&gt;

&lt;p&gt;But Node.js uses:&lt;/p&gt;
&lt;h1&gt;
  
  
  asynchronous execution
&lt;/h1&gt;

&lt;p&gt;And the event loop is what manages that system.&lt;/p&gt;


&lt;h1&gt;
  
  
  Real-Life Restaurant Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine a restaurant with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one super-efficient manager&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Customers continuously place orders.&lt;/p&gt;

&lt;p&gt;Now if manager personally:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;cooks food&lt;/li&gt;
&lt;li&gt;waits for oven&lt;/li&gt;
&lt;li&gt;washes dishes&lt;/li&gt;
&lt;li&gt;handles billing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;restaurant collapses instantly.&lt;/p&gt;

&lt;p&gt;Instead manager:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;delegates slow work&lt;/li&gt;
&lt;li&gt;keeps taking new orders&lt;/li&gt;
&lt;li&gt;handles completed tasks later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This manager is basically:&lt;/p&gt;
&lt;h1&gt;
  
  
  the event loop
&lt;/h1&gt;


&lt;h1&gt;
  
  
  What Is the Event Loop?
&lt;/h1&gt;

&lt;p&gt;The event loop is:&lt;/p&gt;
&lt;h1&gt;
  
  
  a mechanism that continuously checks and executes tasks.
&lt;/h1&gt;

&lt;p&gt;Its main job is:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="a81ks2"&lt;br&gt;
"Is there any task ready to run?"&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


If yes:

* execute it

If no:

* continue checking

Simple idea.
Massive impact.

---

# Why Node.js Needs an Event Loop

Without event loop,
Node.js would behave like traditional blocking systems.

Example:



```text id="b72ms1"
Read File
↓
WAIT
↓
Continue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;During waiting:&lt;br&gt;
everything stops.&lt;/p&gt;

&lt;p&gt;Bad for servers.&lt;/p&gt;

&lt;p&gt;Very bad.&lt;/p&gt;

&lt;p&gt;The event loop allows Node.js to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;avoid unnecessary waiting&lt;/li&gt;
&lt;li&gt;continue handling requests&lt;/li&gt;
&lt;li&gt;process async tasks later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is why Node.js scales efficiently.&lt;/p&gt;


&lt;h1&gt;
  
  
  First Understand the Call Stack
&lt;/h1&gt;

&lt;p&gt;The call stack is:&lt;/p&gt;
&lt;h1&gt;
  
  
  where JavaScript executes functions.
&lt;/h1&gt;

&lt;p&gt;Think of it like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;current work desk.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Whenever function runs,&lt;br&gt;
it goes onto stack.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="c63ps2"&lt;br&gt;
function one() {&lt;br&gt;
    console.log("One");&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;function two() {&lt;br&gt;
    console.log("Two");&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;one();&lt;br&gt;
two();&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Execution flow:



```text id="d54jd1"
one()
↓
print "One"
↓
remove one()

two()
↓
print "Two"
↓
remove two()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Functions enter and leave stack one by one.&lt;/p&gt;


&lt;h1&gt;
  
  
  Call Stack Is Synchronous
&lt;/h1&gt;

&lt;p&gt;Important rule:&lt;/p&gt;
&lt;h1&gt;
  
  
  Call stack executes one thing at a time.
&lt;/h1&gt;

&lt;p&gt;That is why JavaScript is called:&lt;/p&gt;
&lt;h1&gt;
  
  
  single-threaded
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Now Comes the Problem
&lt;/h1&gt;

&lt;p&gt;What happens if task takes long time?&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="e45ks2"&lt;br&gt;
setTimeout(() =&amp;gt; {&lt;br&gt;
    console.log("Done");&lt;br&gt;
}, 2000);&lt;/p&gt;

&lt;p&gt;console.log("Hello");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Question:
Why does `"Hello"` print first?

Because async tasks do not stay blocking inside call stack.

That is where event loop enters.

---

# Understanding Async Operations

Operations like:

* timers
* file reads
* database calls
* API requests

are handled outside main execution flow.

Node.js delegates them to:

* browser APIs (in browsers)
* libuv/OS system (in Node.js)

Meanwhile:
call stack continues executing other code.

---

# Event Loop Core Flow



```text id="f36ms1"
Call Stack Executes Code
         ↓
Async Task Starts
         ↓
Task Delegated
         ↓
Call Stack Continues
         ↓
Task Completes
         ↓
Callback Added to Queue
         ↓
Event Loop Pushes Callback to Stack
         ↓
Callback Executes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is the heart of async JavaScript.&lt;/p&gt;


&lt;h1&gt;
  
  
  Understanding Task Queue
&lt;/h1&gt;

&lt;p&gt;Task queue stores:&lt;/p&gt;
&lt;h1&gt;
  
  
  completed async callbacks waiting to execute
&lt;/h1&gt;

&lt;p&gt;Think of it like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;waiting room.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Callbacks wait there until:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;call stack becomes empty&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Only then:&lt;br&gt;
event loop moves them into stack.&lt;/p&gt;


&lt;h1&gt;
  
  
  Simple Visualization
&lt;/h1&gt;



&lt;p&gt;```text id="g27ps2"&lt;br&gt;
CALL STACK&lt;br&gt;
     ↓&lt;br&gt;
EVENT LOOP&lt;br&gt;
     ↓&lt;br&gt;
TASK QUEUE&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Event loop constantly checks:



```text id="h18ks1"
"Is stack empty?"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If yes:&lt;br&gt;
move callback from queue to stack.&lt;/p&gt;


&lt;h1&gt;
  
  
  Example Step-by-Step
&lt;/h1&gt;

&lt;p&gt;Code:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="i09jd2"&lt;br&gt;
console.log("Start");&lt;/p&gt;

&lt;p&gt;setTimeout(() =&amp;gt; {&lt;br&gt;
    console.log("Timer Done");&lt;br&gt;
}, 2000);&lt;/p&gt;

&lt;p&gt;console.log("End");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Step 1



```text id="j90ms2"
console.log("Start")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="k81ps1"&lt;br&gt;
Start&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Step 2

`setTimeout()` starts timer.

Timer handled separately.

Callback waits.

---

# Step 3



```text id="l72ks2"
console.log("End")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="m63ms1"&lt;br&gt;
End&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Step 4

After 2 seconds:
callback enters task queue.

---

# Step 5

Event loop checks:

* stack empty?

Yes.

Moves callback to stack.

---

# Final Output



```text id="n54ps2"
Start
End
Timer Done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is event loop behavior.&lt;/p&gt;


&lt;h1&gt;
  
  
  Queue Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine food court token system.&lt;/p&gt;

&lt;p&gt;Customers wait in queue.&lt;/p&gt;

&lt;p&gt;Manager only calls next customer when:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;counter becomes free&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Similarly:&lt;br&gt;
callbacks wait until:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;call stack becomes empty&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Timers vs I/O Callbacks
&lt;/h1&gt;

&lt;p&gt;Node.js handles different async operations.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;timers&lt;/li&gt;
&lt;li&gt;file operations&lt;/li&gt;
&lt;li&gt;database calls&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Timer Example
&lt;/h1&gt;



&lt;p&gt;```js id="o45ks1"&lt;br&gt;
setTimeout(() =&amp;gt; {&lt;/p&gt;

&lt;p&gt;}, 1000);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Executes after delay.

---

# I/O Callback Example



```js id="p36jd1"
fs.readFile("data.txt", () =&amp;gt; {

});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Executes after file reading finishes.&lt;/p&gt;

&lt;p&gt;Both use async behavior,&lt;br&gt;
but internally they originate differently.&lt;/p&gt;

&lt;p&gt;For beginners,&lt;br&gt;
important understanding is:&lt;/p&gt;
&lt;h1&gt;
  
  
  async tasks complete later and return via queue system.
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Why Event Loop Makes Node.js Scalable
&lt;/h1&gt;

&lt;p&gt;This is the most important real-world point.&lt;/p&gt;

&lt;p&gt;Traditional blocking systems may:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;waste threads waiting&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js avoids that.&lt;/p&gt;

&lt;p&gt;Instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;async operations happen separately&lt;/li&gt;
&lt;li&gt;event loop keeps server responsive&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meaning:&lt;br&gt;
one thread can manage many users efficiently.&lt;/p&gt;


&lt;h1&gt;
  
  
  Traditional Blocking Server
&lt;/h1&gt;



&lt;p&gt;```text id="q27ms2"&lt;br&gt;
User 1 → Processing&lt;br&gt;
User 2 → Waiting&lt;br&gt;
User 3 → Waiting&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Node.js Event Loop Model



```text id="r18ps1"
User 1 → Async Task Started
User 2 → Processing
User 3 → Processing
User 4 → Processing
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Huge difference in scalability.&lt;/p&gt;


&lt;h1&gt;
  
  
  Event Loop as Task Manager
&lt;/h1&gt;

&lt;p&gt;Best beginner mental model:&lt;/p&gt;

&lt;p&gt;The event loop is:&lt;/p&gt;
&lt;h1&gt;
  
  
  a smart manager coordinating tasks.
&lt;/h1&gt;

&lt;p&gt;It:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;checks stack&lt;/li&gt;
&lt;li&gt;checks queue&lt;/li&gt;
&lt;li&gt;schedules callbacks&lt;/li&gt;
&lt;li&gt;keeps system moving&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without it,&lt;br&gt;
Node.js async behavior would not exist.&lt;/p&gt;


&lt;h1&gt;
  
  
  Important Truth About the Event Loop
&lt;/h1&gt;

&lt;p&gt;The event loop itself does not magically make code faster.&lt;/p&gt;

&lt;p&gt;It makes Node.js efficient by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reducing idle waiting&lt;/li&gt;
&lt;li&gt;enabling concurrency&lt;/li&gt;
&lt;li&gt;managing async execution smartly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That distinction matters.&lt;/p&gt;


&lt;h1&gt;
  
  
  Common Beginner Confusions
&lt;/h1&gt;


&lt;h1&gt;
  
  
  “setTimeout Executes Exactly On Time”
&lt;/h1&gt;

&lt;p&gt;No.&lt;/p&gt;

&lt;p&gt;Minimum delay only.&lt;/p&gt;

&lt;p&gt;If stack busy,&lt;br&gt;
callback waits longer.&lt;/p&gt;


&lt;h1&gt;
  
  
  Async Means Parallelism?
&lt;/h1&gt;

&lt;p&gt;Not exactly.&lt;/p&gt;

&lt;p&gt;Node.js mainly focuses on:&lt;/p&gt;
&lt;h1&gt;
  
  
  concurrency
&lt;/h1&gt;

&lt;p&gt;not true multi-core parallelism.&lt;/p&gt;


&lt;h1&gt;
  
  
  Event Loop Executes Multiple Things Simultaneously?
&lt;/h1&gt;

&lt;p&gt;No.&lt;/p&gt;

&lt;p&gt;Call stack still executes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one task at a time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Event loop simply manages scheduling.&lt;/p&gt;


&lt;h1&gt;
  
  
  What Happens If Stack Never Clears?
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="s09ks2"&lt;br&gt;
while(true){&lt;/p&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Event loop cannot process queue.

Everything freezes.

Because call stack never becomes empty.

---

# Visual Event Loop Cycle



```text id="t90jd1"
Execute Stack
      ↓
Check Queue
      ↓
Move Ready Callback
      ↓
Execute Callback
      ↓
Repeat Forever
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This loop continuously runs during application lifetime.&lt;/p&gt;




&lt;h1&gt;
  
  
  Real-World Example
&lt;/h1&gt;

&lt;p&gt;Imagine social media app.&lt;/p&gt;

&lt;p&gt;Users continuously:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;send messages&lt;/li&gt;
&lt;li&gt;fetch posts&lt;/li&gt;
&lt;li&gt;upload content&lt;/li&gt;
&lt;li&gt;receive notifications&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most tasks involve:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;waiting for network&lt;/li&gt;
&lt;li&gt;database operations&lt;/li&gt;
&lt;li&gt;async events&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Event loop helps Node.js handle all this efficiently without blocking everything.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Event Loop Is:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;task manager&lt;/li&gt;
&lt;li&gt;async execution coordinator&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Call Stack:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;executes functions&lt;/li&gt;
&lt;li&gt;synchronous&lt;/li&gt;
&lt;li&gt;one task at a time&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Task Queue:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;stores completed async callbacks&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Event Loop Checks:
&lt;/h2&gt;



&lt;p&gt;```text id="u81ms2"&lt;br&gt;
Is call stack empty?&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Async Operations Include:

* timers
* file reads
* database calls
* API requests

---

# Final Thoughts

The Node.js event loop sounds complicated mostly because of the terminology around it.

But the core idea is actually simple:

&amp;gt; JavaScript executes one thing at a time, while the event loop smartly manages asynchronous tasks around it.

That system allows Node.js to:

* stay responsive
* avoid blocking
* handle many users efficiently

And honestly,
once the event loop finally clicks in your brain,
a huge portion of Node.js suddenly starts making sense together.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Blocking vs Non-Blocking Code in Node.js</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:33:45 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/blocking-vs-non-blocking-code-in-nodejs-2m8j</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/blocking-vs-non-blocking-code-in-nodejs-2m8j</guid>
      <description>&lt;h1&gt;
  
  
  Blocking vs Non-Blocking Code in Node.js
&lt;/h1&gt;

&lt;p&gt;One of the biggest reasons Node.js became popular is this phrase:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Node.js is non-blocking.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And beginners usually react with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Okay… sounds important.”&lt;br&gt;
“But what exactly is being blocked?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Fair question.&lt;/p&gt;

&lt;p&gt;Because terms like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;blocking&lt;/li&gt;
&lt;li&gt;non-blocking&lt;/li&gt;
&lt;li&gt;asynchronous&lt;/li&gt;
&lt;li&gt;event loop&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;often get explained in ways that sound more confusing than helpful.&lt;/p&gt;

&lt;p&gt;So in this article, we will understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what blocking code actually means&lt;/li&gt;
&lt;li&gt;what non-blocking code means&lt;/li&gt;
&lt;li&gt;why blocking hurts server performance&lt;/li&gt;
&lt;li&gt;how Node.js handles async operations&lt;/li&gt;
&lt;li&gt;real-world examples using file handling and database calls&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And yes, we are going to use real-life analogies because software concepts become much easier once humans stop explaining them like robot manuals.&lt;/p&gt;




&lt;h1&gt;
  
  
  First Understand: What Does “Blocking” Mean?
&lt;/h1&gt;

&lt;p&gt;Blocking simply means:&lt;/p&gt;

&lt;h1&gt;
  
  
  “Execution has to wait.”
&lt;/h1&gt;

&lt;p&gt;The program cannot continue until current task finishes.&lt;/p&gt;

&lt;p&gt;Imagine standing in line at a small shop.&lt;/p&gt;

&lt;p&gt;Shopkeeper serves:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one customer fully&lt;/li&gt;
&lt;li&gt;then next customer&lt;/li&gt;
&lt;li&gt;then next customer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everyone behind must wait.&lt;/p&gt;

&lt;p&gt;That is blocking behavior.&lt;/p&gt;




&lt;h1&gt;
  
  
  Simple Blocking Example
&lt;/h1&gt;

&lt;p&gt;Imagine this code:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="a82ks1"&lt;br&gt;
console.log("Start");&lt;/p&gt;

&lt;p&gt;for(let i = 0; i &amp;lt; 10000000000; i++) {&lt;/p&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;p&gt;console.log("End");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


What happens?



```text id="b73ms2"
Start
(wait...)
(wait...)
End
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Program gets stuck in loop before continuing.&lt;/p&gt;

&lt;p&gt;Because JavaScript executes code line by line.&lt;/p&gt;

&lt;p&gt;The heavy loop blocks execution.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Blocking Is Dangerous in Servers
&lt;/h1&gt;

&lt;p&gt;Now imagine this happening in a server.&lt;/p&gt;

&lt;p&gt;One request arrives.&lt;/p&gt;

&lt;p&gt;Server blocks while processing it.&lt;/p&gt;

&lt;p&gt;Meanwhile:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;other users wait&lt;/li&gt;
&lt;li&gt;requests pile up&lt;/li&gt;
&lt;li&gt;performance drops&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Suddenly your backend behaves like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;a government office before lunch break.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Real-Life Restaurant Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine restaurant with one chef.&lt;/p&gt;

&lt;p&gt;Customer 1 orders pasta.&lt;/p&gt;

&lt;p&gt;Chef does this:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="c64ps1"&lt;br&gt;
Start Cooking&lt;br&gt;
↓&lt;br&gt;
Stand and stare at boiling pasta&lt;br&gt;
↓&lt;br&gt;
Ignore all other customers&lt;br&gt;
↓&lt;br&gt;
Finish pasta&lt;br&gt;
↓&lt;br&gt;
Take next order&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Terrible system.

Other customers suffer unnecessarily.

This is blocking behavior.

---

# What Is Non-Blocking Code?

Non-blocking means:

# “Start task and continue doing other work.”

Instead of waiting,
program moves forward and returns later when task finishes.

---

# Non-Blocking Restaurant Version

Smart chef does this:



```text id="d55jd1"
Start Pasta
↓
While pasta cooks → take more orders
↓
Serve completed dishes later
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;One chef.&lt;br&gt;
Many customers.&lt;br&gt;
Efficient workflow.&lt;/p&gt;

&lt;p&gt;That is Node.js philosophy.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Node.js Loves Non-Blocking Operations
&lt;/h1&gt;

&lt;p&gt;Modern applications spend huge amounts of time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;waiting for database&lt;/li&gt;
&lt;li&gt;waiting for files&lt;/li&gt;
&lt;li&gt;waiting for APIs&lt;/li&gt;
&lt;li&gt;waiting for network&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Why waste entire thread waiting?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;delegate slow tasks&lt;/li&gt;
&lt;li&gt;continue execution&lt;/li&gt;
&lt;li&gt;process callback later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes Node.js highly efficient.&lt;/p&gt;


&lt;h1&gt;
  
  
  Blocking File Read Example
&lt;/h1&gt;

&lt;p&gt;Node.js has synchronous functions.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="e46ks2"&lt;br&gt;
const fs = require("fs");&lt;/p&gt;

&lt;p&gt;console.log("Start");&lt;/p&gt;

&lt;p&gt;const data = fs.readFileSync("data.txt", "utf8");&lt;/p&gt;

&lt;p&gt;console.log(data);&lt;/p&gt;

&lt;p&gt;console.log("End");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# What Happens Here?

Flow:



```text id="f37ms1"
Start
↓
Read File
↓
WAIT
↓
File Loaded
↓
Print Data
↓
End
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Execution stops completely while file loads.&lt;/p&gt;

&lt;p&gt;This is:&lt;/p&gt;
&lt;h1&gt;
  
  
  blocking code
&lt;/h1&gt;

&lt;p&gt;Because:&lt;br&gt;
&lt;code&gt;readFileSync()&lt;/code&gt; blocks thread.&lt;/p&gt;


&lt;h1&gt;
  
  
  Non-Blocking File Read Example
&lt;/h1&gt;

&lt;p&gt;Now async version:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="g28ps2"&lt;br&gt;
const fs = require("fs");&lt;/p&gt;

&lt;p&gt;console.log("Start");&lt;/p&gt;

&lt;p&gt;fs.readFile("data.txt", "utf8", (err, data) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(data);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;

&lt;p&gt;console.log("End");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Output:



```text id="h19ks1"
Start
End
[file content]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Interesting difference.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Did “End” Print First?
&lt;/h1&gt;

&lt;p&gt;Because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;file reading started&lt;/li&gt;
&lt;li&gt;Node.js did not wait&lt;/li&gt;
&lt;li&gt;execution continued immediately&lt;/li&gt;
&lt;li&gt;callback executed later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is:&lt;/p&gt;
&lt;h1&gt;
  
  
  non-blocking behavior
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Blocking vs Non-Blocking Timeline
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Blocking Execution Timeline
&lt;/h1&gt;



&lt;p&gt;```text id="i00jd2"&lt;br&gt;
Start&lt;br&gt;
 ↓&lt;br&gt;
Read File&lt;br&gt;
 ↓&lt;br&gt;
WAIT...&lt;br&gt;
 ↓&lt;br&gt;
Continue&lt;br&gt;
 ↓&lt;br&gt;
End&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Non-Blocking Execution Timeline



```text id="j91ms2"
Start
 ↓
Start File Read
 ↓
Continue Execution
 ↓
End
 ↓
File Finished
 ↓
Callback Runs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Huge difference in performance behavior.&lt;/p&gt;


&lt;h1&gt;
  
  
  Understanding Async Operations
&lt;/h1&gt;

&lt;p&gt;Non-blocking operations are usually:&lt;/p&gt;
&lt;h1&gt;
  
  
  asynchronous
&lt;/h1&gt;

&lt;p&gt;Meaning:&lt;br&gt;
they complete later.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;file reading&lt;/li&gt;
&lt;li&gt;database calls&lt;/li&gt;
&lt;li&gt;API requests&lt;/li&gt;
&lt;li&gt;timers&lt;/li&gt;
&lt;li&gt;network operations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These tasks take time.&lt;/p&gt;

&lt;p&gt;Node.js handles them asynchronously.&lt;/p&gt;


&lt;h1&gt;
  
  
  Async Does NOT Mean Parallel Magic
&lt;/h1&gt;

&lt;p&gt;Important clarification.&lt;/p&gt;

&lt;p&gt;Beginners often think:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Async means everything happens simultaneously.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Not exactly.&lt;/p&gt;

&lt;p&gt;Node.js mainly uses:&lt;/p&gt;
&lt;h1&gt;
  
  
  concurrency
&lt;/h1&gt;

&lt;p&gt;not heavy parallelism.&lt;/p&gt;


&lt;h1&gt;
  
  
  Concurrency vs Parallelism
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Parallelism
&lt;/h1&gt;

&lt;p&gt;Doing multiple tasks literally at same time.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;4 chefs cooking 4 dishes simultaneously&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Concurrency
&lt;/h1&gt;

&lt;p&gt;Managing many tasks efficiently without unnecessary waiting.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one chef handling multiple orders smartly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js focuses heavily on:&lt;/p&gt;
&lt;h1&gt;
  
  
  concurrency
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Event Loop Role
&lt;/h1&gt;

&lt;p&gt;The event loop is what makes non-blocking behavior possible.&lt;/p&gt;

&lt;p&gt;Flow:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="k82ps1"&lt;br&gt;
Task Starts&lt;br&gt;
    ↓&lt;br&gt;
Background Worker Handles It&lt;br&gt;
    ↓&lt;br&gt;
Event Loop Continues Running&lt;br&gt;
    ↓&lt;br&gt;
Task Finishes&lt;br&gt;
    ↓&lt;br&gt;
Callback Added to Queue&lt;br&gt;
    ↓&lt;br&gt;
Event Loop Executes Callback&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This architecture is core Node.js behavior.

---

# Real-World Database Example

Imagine login request.

Server must:

* query database
* verify user

Database operations are slow compared to CPU speed.

Blocking version would freeze server while waiting.

Non-blocking version:

* sends DB query
* continues handling other requests
* processes result later

This is why Node.js scales well.

---

# Example Database Analogy

Bad waiter:



```text id="l73ks2"
Take Order
↓
Go to kitchen
↓
Stand there silently until food ready
↓
Return
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Good waiter:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="m64ps1"&lt;br&gt;
Take Order&lt;br&gt;
↓&lt;br&gt;
Give order to kitchen&lt;br&gt;
↓&lt;br&gt;
Handle other tables&lt;br&gt;
↓&lt;br&gt;
Return when food ready&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Node.js behaves like second waiter.

---

# Why Blocking Slows Servers

Node.js uses:

# single main thread

Meaning:
if blocking task occurs,
entire server responsiveness suffers.

Example:

* one heavy synchronous operation
* all users affected

That is dangerous in production systems.

---

# Example of Dangerous Blocking



```js id="n55jd2"
while(true){

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This infinite loop blocks event loop completely.&lt;/p&gt;

&lt;p&gt;Result:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;server freezes&lt;/li&gt;
&lt;li&gt;requests stop responding&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Backend officially enters emotional collapse.&lt;/p&gt;


&lt;h1&gt;
  
  
  Common Blocking Mistakes Beginners Make
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Using Sync File Methods Everywhere
&lt;/h1&gt;

&lt;p&gt;Bad for servers:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="o46ks2"&lt;br&gt;
fs.readFileSync()&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Better:



```js id="p37ms1"
fs.readFile()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Heavy CPU Loops
&lt;/h1&gt;

&lt;p&gt;Large calculations block event loop.&lt;/p&gt;


&lt;h1&gt;
  
  
  Blocking Inside Request Handlers
&lt;/h1&gt;

&lt;p&gt;Very dangerous because:&lt;br&gt;
every incoming request gets delayed.&lt;/p&gt;


&lt;h1&gt;
  
  
  When Blocking Code Is Actually Fine
&lt;/h1&gt;

&lt;p&gt;Now important honesty section.&lt;/p&gt;

&lt;p&gt;Blocking code is not always evil.&lt;/p&gt;

&lt;p&gt;Sometimes sync code is acceptable:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;startup scripts&lt;/li&gt;
&lt;li&gt;command line tools&lt;/li&gt;
&lt;li&gt;tiny local scripts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Problem starts when:&lt;br&gt;
blocking happens in active server handling multiple users.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Non-Blocking Makes Node.js Fast
&lt;/h1&gt;

&lt;p&gt;Because Node.js avoids wasting time.&lt;/p&gt;

&lt;p&gt;Instead of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;sitting idle&lt;/li&gt;
&lt;li&gt;waiting for slow operations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;it continues handling requests efficiently.&lt;/p&gt;

&lt;p&gt;That efficiency is the reason Node.js became popular for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;chat apps&lt;/li&gt;
&lt;li&gt;streaming&lt;/li&gt;
&lt;li&gt;realtime systems&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Real-World Apps That Benefit
&lt;/h1&gt;

&lt;p&gt;Applications with lots of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API requests&lt;/li&gt;
&lt;li&gt;database queries&lt;/li&gt;
&lt;li&gt;network communication&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;benefit heavily from non-blocking architecture.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;messaging apps&lt;/li&gt;
&lt;li&gt;dashboards&lt;/li&gt;
&lt;li&gt;live notifications&lt;/li&gt;
&lt;li&gt;realtime tracking&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Simple Mental Model
&lt;/h1&gt;

&lt;p&gt;Blocking:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="q28ps2"&lt;br&gt;
Wait first → continue later&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Non-blocking:



```text id="r19ks1"
Start task → continue immediately
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is the core difference.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Blocking Code Means:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;execution waits&lt;/li&gt;
&lt;li&gt;thread gets occupied&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Non-Blocking Code Means:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;execution continues&lt;/li&gt;
&lt;li&gt;task handled asynchronously&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Blocking Hurts Servers Because:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;requests wait&lt;/li&gt;
&lt;li&gt;event loop freezes&lt;/li&gt;
&lt;li&gt;responsiveness drops&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Async Operations Include:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;file reading&lt;/li&gt;
&lt;li&gt;database calls&lt;/li&gt;
&lt;li&gt;API requests&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Node.js Uses:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;event loop&lt;/li&gt;
&lt;li&gt;non-blocking I/O&lt;/li&gt;
&lt;li&gt;asynchronous execution&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;Blocking vs non-blocking is one of the most important Node.js concepts.&lt;/p&gt;

&lt;p&gt;Because this behavior directly explains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;why Node.js feels fast&lt;/li&gt;
&lt;li&gt;why it handles many users efficiently&lt;/li&gt;
&lt;li&gt;why asynchronous programming matters&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At first,&lt;br&gt;
non-blocking execution feels strange because humans naturally think:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Start task → wait until done.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Node.js changed that idea completely.&lt;/p&gt;

&lt;p&gt;Its philosophy is basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Why stand idle while work is happening somewhere else?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And honestly,&lt;br&gt;
that is exactly why Node.js became so powerful for modern web applications.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>REST API Design Made Simple with Express.js</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:32:17 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/rest-api-design-made-simple-with-expressjs-51jl</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/rest-api-design-made-simple-with-expressjs-51jl</guid>
      <description>&lt;h1&gt;
  
  
  REST API Design Made Simple with Express.js
&lt;/h1&gt;

&lt;p&gt;Every backend developer reaches a point where they hear this sentence:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Build a REST API.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And suddenly everyone starts pretending they fully understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;REST&lt;/li&gt;
&lt;li&gt;resources&lt;/li&gt;
&lt;li&gt;endpoints&lt;/li&gt;
&lt;li&gt;CRUD&lt;/li&gt;
&lt;li&gt;status codes&lt;/li&gt;
&lt;li&gt;HTTP methods&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meanwhile beginners are sitting there like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Brother I just learned &lt;code&gt;app.get()&lt;/code&gt; yesterday.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The good news?&lt;/p&gt;

&lt;p&gt;REST APIs are actually based on very simple ideas.&lt;/p&gt;

&lt;p&gt;Most of the scary terminology comes from people explaining it in the most robotic way possible.&lt;/p&gt;

&lt;p&gt;So in this article, we are going to understand REST APIs properly using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;simple language&lt;/li&gt;
&lt;li&gt;real-world examples&lt;/li&gt;
&lt;li&gt;Express.js&lt;/li&gt;
&lt;li&gt;one resource (&lt;code&gt;users&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;practical route design&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By the end, REST APIs will stop looking like mysterious backend rituals.&lt;/p&gt;




&lt;h1&gt;
  
  
  First Understand: What Is an API?
&lt;/h1&gt;

&lt;p&gt;API stands for:&lt;/p&gt;

&lt;h1&gt;
  
  
  Application Programming Interface
&lt;/h1&gt;

&lt;p&gt;Sounds complicated.&lt;/p&gt;

&lt;p&gt;But the real idea is simple.&lt;/p&gt;

&lt;p&gt;An API allows:&lt;/p&gt;

&lt;h1&gt;
  
  
  two systems to communicate.
&lt;/h1&gt;




&lt;h1&gt;
  
  
  Real-Life API Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine a restaurant.&lt;/p&gt;

&lt;p&gt;You:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;place order to waiter&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Waiter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;takes request to kitchen&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Kitchen:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;prepares food&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Waiter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;brings response back&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you = client&lt;/li&gt;
&lt;li&gt;kitchen = server&lt;/li&gt;
&lt;li&gt;waiter = API&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The API acts as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;communication bridge between client and server.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  What Is REST?
&lt;/h1&gt;

&lt;p&gt;REST stands for:&lt;/p&gt;

&lt;h1&gt;
  
  
  Representational State Transfer
&lt;/h1&gt;

&lt;p&gt;Yes.&lt;br&gt;
That name sounds like it was invented by someone who hated beginners.&lt;/p&gt;

&lt;p&gt;Thankfully:&lt;br&gt;
you do not need to memorize the full form to understand REST.&lt;/p&gt;

&lt;p&gt;REST is basically:&lt;/p&gt;
&lt;h1&gt;
  
  
  a standard way to design APIs.
&lt;/h1&gt;

&lt;p&gt;It focuses on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;clean routes&lt;/li&gt;
&lt;li&gt;proper HTTP methods&lt;/li&gt;
&lt;li&gt;predictable structure&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  REST APIs Work Around Resources
&lt;/h1&gt;

&lt;p&gt;This is the most important REST concept.&lt;/p&gt;
&lt;h1&gt;
  
  
  Resource = Anything your application manages
&lt;/h1&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;users&lt;/li&gt;
&lt;li&gt;products&lt;/li&gt;
&lt;li&gt;orders&lt;/li&gt;
&lt;li&gt;posts&lt;/li&gt;
&lt;li&gt;comments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If your app stores or manages something,&lt;br&gt;
it becomes a resource.&lt;/p&gt;


&lt;h1&gt;
  
  
  Example Resource: Users
&lt;/h1&gt;

&lt;p&gt;We will use:&lt;/p&gt;
&lt;h1&gt;
  
  
  users
&lt;/h1&gt;

&lt;p&gt;throughout this article.&lt;/p&gt;

&lt;p&gt;Example user object:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```json id="a81ks2"&lt;br&gt;
{&lt;br&gt;
    "id": 1,&lt;br&gt;
    "name": "Shivam",&lt;br&gt;
    "email": "&lt;a href="mailto:shivam@gmail.com"&gt;shivam@gmail.com&lt;/a&gt;"&lt;br&gt;
}&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# REST API Structure Idea

REST focuses on:

* resources
* actions performed on resources

Instead of routes like:



```text id="b72ms1"
/getUsers
/createUser
/deleteUser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;REST prefers:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="c63ps2"&lt;br&gt;
/users&lt;br&gt;
/users/:id&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Cleaner.
Predictable.
Industry standard.

---

# Understanding HTTP Methods

REST APIs mainly use:

* GET
* POST
* PUT
* DELETE

These methods define:

&amp;gt; what action should happen.

---

# CRUD Operations

REST APIs usually map to CRUD operations.

CRUD means:

| Operation | Meaning     |
| --------- | ----------- |
| Create    | Add data    |
| Read      | Fetch data  |
| Update    | Modify data |
| Delete    | Remove data |

---

# CRUD vs HTTP Methods

| CRUD   | HTTP Method |
| ------ | ----------- |
| Create | POST        |
| Read   | GET         |
| Update | PUT         |
| Delete | DELETE      |

This mapping is core REST design.

---

# Setting Up Express Server

First install Express:



```bash id="d54jd1"
npm install express
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now create:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="e45ks2"&lt;br&gt;
app.js&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Basic setup:



```js id="f36ms1"
const express = require("express");

const app = express();

app.use(express.json());

app.listen(3000, () =&amp;gt; {
    console.log("Server Running");
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Why &lt;code&gt;express.json()&lt;/code&gt;?
&lt;/h1&gt;

&lt;p&gt;It parses incoming JSON data.&lt;/p&gt;

&lt;p&gt;Without it:&lt;br&gt;
&lt;code&gt;req.body&lt;/code&gt; becomes undefined.&lt;/p&gt;

&lt;p&gt;And beginners spend 45 minutes questioning reality.&lt;/p&gt;


&lt;h1&gt;
  
  
  GET Method — Fetching Users
&lt;/h1&gt;

&lt;p&gt;GET is used for:&lt;/p&gt;
&lt;h1&gt;
  
  
  reading data
&lt;/h1&gt;

&lt;p&gt;Example route:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="g27ps2"&lt;br&gt;
app.get("/users", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;res.send("All Users");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


When client requests:



```text id="h18ks1"
GET /users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;server returns users.&lt;/p&gt;


&lt;h1&gt;
  
  
  Fetch Single User
&lt;/h1&gt;



&lt;p&gt;```js id="i09jd2"&lt;br&gt;
app.get("/users/:id", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;res.send(`User ID: ${req.params.id}`);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Example request:



```text id="j90ms2"
GET /users/5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Response:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="k81ps1"&lt;br&gt;
User ID: 5&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Understanding Route Parameters



```js id="l72ks2"
:id
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;means:&lt;/p&gt;
&lt;h1&gt;
  
  
  dynamic value
&lt;/h1&gt;

&lt;p&gt;Useful for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;user IDs&lt;/li&gt;
&lt;li&gt;product IDs&lt;/li&gt;
&lt;li&gt;order IDs&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  POST Method — Creating Data
&lt;/h1&gt;

&lt;p&gt;POST is used for:&lt;/p&gt;
&lt;h1&gt;
  
  
  creating resources
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="m63ms1"&lt;br&gt;
app.post("/users", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const user = req.body;

res.send("User Created");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Request body example:



```json id="n54ps2"
{
    "name": "Shivam",
    "email": "shivam@gmail.com"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This creates new user.&lt;/p&gt;


&lt;h1&gt;
  
  
  PUT Method — Updating Data
&lt;/h1&gt;

&lt;p&gt;PUT is used for:&lt;/p&gt;
&lt;h1&gt;
  
  
  updating existing resource
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="o45ks1"&lt;br&gt;
app.put("/users/:id", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;res.send(`Updated User ${req.params.id}`);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Request:



```text id="p36jd1"
PUT /users/2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Meaning:&lt;br&gt;
update user with ID 2.&lt;/p&gt;


&lt;h1&gt;
  
  
  DELETE Method — Removing Data
&lt;/h1&gt;

&lt;p&gt;DELETE removes resource.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="q27ms2"&lt;br&gt;
app.delete("/users/:id", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;res.send(`Deleted User ${req.params.id}`);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Request:



```text id="r18ps1"
DELETE /users/2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  REST Route Design Principles
&lt;/h1&gt;

&lt;p&gt;Good REST APIs follow clean naming conventions.&lt;/p&gt;


&lt;h1&gt;
  
  
  Good Routes
&lt;/h1&gt;



&lt;p&gt;```text id="s09ks2"&lt;br&gt;
GET    /users&lt;br&gt;
GET    /users/:id&lt;br&gt;
POST   /users&lt;br&gt;
PUT    /users/:id&lt;br&gt;
DELETE /users/:id&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Bad Routes



```text id="t90jd1"
/getAllUsers
/createNewUser
/updateUserData
/deleteThisUser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;REST prefers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;nouns&lt;/li&gt;
&lt;li&gt;resources&lt;/li&gt;
&lt;li&gt;clean structure&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Not action-heavy route names.&lt;/p&gt;

&lt;p&gt;Because HTTP methods already define action.&lt;/p&gt;


&lt;h1&gt;
  
  
  REST Request-Response Lifecycle
&lt;/h1&gt;



&lt;p&gt;```text id="u81ms2"&lt;br&gt;
Client Sends Request&lt;br&gt;
         ↓&lt;br&gt;
Express Route Matches&lt;br&gt;
         ↓&lt;br&gt;
Controller Logic Runs&lt;br&gt;
         ↓&lt;br&gt;
Response Sent Back&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This cycle powers modern web applications.

---

# Status Codes Basics

Status codes tell client:

&amp;gt; what happened.

Very important in APIs.

---

# Common Status Codes

| Code | Meaning          |
| ---- | ---------------- |
| 200  | Success          |
| 201  | Resource Created |
| 400  | Bad Request      |
| 401  | Unauthorized     |
| 404  | Not Found        |
| 500  | Server Error     |

---

# Sending Status Codes

Example:



```js id="v72ps1"
res.status(200).send("Success");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Example: Resource Created
&lt;/h1&gt;



&lt;p&gt;```js id="w63ks2"&lt;br&gt;
res.status(201).send("User Created");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


201 means:
new resource successfully created.

---

# Example: Not Found



```js id="x54ms1"
res.status(404).send("User Not Found");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Useful when requested data does not exist.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Status Codes Matter
&lt;/h1&gt;

&lt;p&gt;Without status codes,&lt;br&gt;
client cannot properly understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;success&lt;/li&gt;
&lt;li&gt;failure&lt;/li&gt;
&lt;li&gt;permission issues&lt;/li&gt;
&lt;li&gt;validation errors&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They are basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;backend communication signals.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Real-World REST API Example
&lt;/h1&gt;

&lt;p&gt;Imagine building social media app.&lt;/p&gt;

&lt;p&gt;Possible REST routes:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="y45ps2"&lt;br&gt;
GET    /posts&lt;br&gt;
POST   /posts&lt;br&gt;
GET    /posts/:id&lt;br&gt;
PUT    /posts/:id&lt;br&gt;
DELETE /posts/:id&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Same REST principles everywhere.

---

# Full Example Together



```js id="z36ks1"
const express = require("express");

const app = express();

app.use(express.json());

app.get("/users", (req, res) =&amp;gt; {
    res.send("All Users");
});

app.get("/users/:id", (req, res) =&amp;gt; {
    res.send(`User ${req.params.id}`);
});

app.post("/users", (req, res) =&amp;gt; {
    res.status(201).send("User Created");
});

app.put("/users/:id", (req, res) =&amp;gt; {
    res.send(`Updated User ${req.params.id}`);
});

app.delete("/users/:id", (req, res) =&amp;gt; {
    res.send(`Deleted User ${req.params.id}`);
});

app.listen(3000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Simple REST API structure.&lt;/p&gt;

&lt;p&gt;Clean.&lt;br&gt;
Readable.&lt;br&gt;
Scalable.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why REST Became Popular
&lt;/h1&gt;

&lt;p&gt;REST APIs are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;simple&lt;/li&gt;
&lt;li&gt;predictable&lt;/li&gt;
&lt;li&gt;scalable&lt;/li&gt;
&lt;li&gt;easy for frontend/backend communication&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Almost every modern application:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;mobile apps&lt;/li&gt;
&lt;li&gt;web apps&lt;/li&gt;
&lt;li&gt;dashboards&lt;/li&gt;
&lt;li&gt;frontend frameworks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;communicates using APIs.&lt;/p&gt;

&lt;p&gt;And REST became one of the most common standards.&lt;/p&gt;


&lt;h1&gt;
  
  
  Common Beginner Mistakes
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Using Verbs in Routes
&lt;/h1&gt;

&lt;p&gt;Bad:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="a25jd2"&lt;br&gt;
/createUser&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Good:



```text id="b16ms1"
/users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Forgetting HTTP Method Meaning
&lt;/h1&gt;

&lt;p&gt;Using GET for deletion?&lt;/p&gt;

&lt;p&gt;Backend police arriving soon.&lt;/p&gt;




&lt;h1&gt;
  
  
  Ignoring Status Codes
&lt;/h1&gt;

&lt;p&gt;Always send meaningful responses.&lt;/p&gt;




&lt;h1&gt;
  
  
  Confusing PUT and POST
&lt;/h1&gt;

&lt;p&gt;Remember:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Create&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PUT&lt;/td&gt;
&lt;td&gt;Update&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h1&gt;
  
  
  REST Is About Consistency
&lt;/h1&gt;

&lt;p&gt;The biggest strength of REST APIs is:&lt;/p&gt;

&lt;h1&gt;
  
  
  predictability
&lt;/h1&gt;

&lt;p&gt;When APIs follow proper conventions,&lt;br&gt;
developers instantly understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;routes&lt;/li&gt;
&lt;li&gt;actions&lt;/li&gt;
&lt;li&gt;behavior&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without reading entire backend code.&lt;/p&gt;

&lt;p&gt;That consistency matters heavily in real-world systems.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  REST Means:
&lt;/h2&gt;



&lt;p&gt;```text id="c07ps1"&lt;br&gt;
Representational State Transfer&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Standard API design approach.

---

## Resource Example:



```text id="d98ks2"
/users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  HTTP Methods:
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;GET&lt;/td&gt;
&lt;td&gt;Fetch&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;Create&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PUT&lt;/td&gt;
&lt;td&gt;Update&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DELETE&lt;/td&gt;
&lt;td&gt;Remove&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Common Status Codes:
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Code&lt;/th&gt;
&lt;th&gt;Meaning&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;200&lt;/td&gt;
&lt;td&gt;Success&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;201&lt;/td&gt;
&lt;td&gt;Created&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;404&lt;/td&gt;
&lt;td&gt;Not Found&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;REST APIs look complicated only because of the terminology.&lt;/p&gt;

&lt;p&gt;At its core,&lt;br&gt;
REST is simply:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;organizing communication between client and server properly.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Client asks for resource.&lt;br&gt;
Server processes request.&lt;br&gt;
Server returns response.&lt;/p&gt;

&lt;p&gt;That’s the entire game.&lt;/p&gt;

&lt;p&gt;Once you understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;resources&lt;/li&gt;
&lt;li&gt;routes&lt;/li&gt;
&lt;li&gt;HTTP methods&lt;/li&gt;
&lt;li&gt;status codes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;backend development starts feeling far more structured and logical.&lt;/p&gt;

&lt;p&gt;And honestly,&lt;br&gt;
most modern applications are basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;different systems sending requests to each other all day long.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Why Node.js is Perfect for Building Fast Web Applications</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:30:27 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/why-nodejs-is-perfect-for-building-fast-web-applications-440p</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/why-nodejs-is-perfect-for-building-fast-web-applications-440p</guid>
      <description>&lt;h1&gt;
  
  
  Why Node.js is Perfect for Building Fast Web Applications
&lt;/h1&gt;

&lt;p&gt;Every technology has that one sentence people repeat endlessly.&lt;/p&gt;

&lt;p&gt;For Node.js, it is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Node.js is fast.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Cool.&lt;/p&gt;

&lt;p&gt;But beginners immediately ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Fast compared to what?”&lt;br&gt;
“Why is it fast?”&lt;br&gt;
“What is actually happening internally?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And then somebody explains it using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event loops&lt;/li&gt;
&lt;li&gt;threads&lt;/li&gt;
&lt;li&gt;asynchronous execution&lt;/li&gt;
&lt;li&gt;non-blocking I/O&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At which point half the room mentally exits the conversation.&lt;/p&gt;

&lt;p&gt;So let’s simplify everything properly.&lt;/p&gt;

&lt;p&gt;In this article, we will understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what actually makes Node.js fast&lt;/li&gt;
&lt;li&gt;how non-blocking I/O works&lt;/li&gt;
&lt;li&gt;event-driven architecture&lt;/li&gt;
&lt;li&gt;single-threaded model&lt;/li&gt;
&lt;li&gt;concurrency vs parallelism&lt;/li&gt;
&lt;li&gt;where Node.js performs best&lt;/li&gt;
&lt;li&gt;companies using Node.js in production&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And yes, we are absolutely using the restaurant analogy because Node.js education would collapse without it.&lt;/p&gt;




&lt;h1&gt;
  
  
  First Understand: Fast Does NOT Mean “Powerful Computer”
&lt;/h1&gt;

&lt;p&gt;When people say:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Node.js is fast”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;they usually mean:&lt;/p&gt;

&lt;h1&gt;
  
  
  “Node.js handles many requests efficiently.”
&lt;/h1&gt;

&lt;p&gt;Not:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;magical CPU speed&lt;/li&gt;
&lt;li&gt;superhero hardware&lt;/li&gt;
&lt;li&gt;NASA-level processing power&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js wins because of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;smart request handling&lt;/li&gt;
&lt;li&gt;non-blocking behavior&lt;/li&gt;
&lt;li&gt;efficient concurrency&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It wastes less time waiting.&lt;/p&gt;

&lt;p&gt;And modern web applications spend a massive amount of time:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;waiting.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Waiting for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;database&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;files&lt;/li&gt;
&lt;li&gt;network&lt;/li&gt;
&lt;li&gt;external services&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js handles that waiting extremely well.&lt;/p&gt;




&lt;h1&gt;
  
  
  The Traditional Server Problem
&lt;/h1&gt;

&lt;p&gt;Imagine a normal blocking server.&lt;/p&gt;

&lt;p&gt;User sends request.&lt;/p&gt;

&lt;p&gt;Server starts processing it.&lt;/p&gt;

&lt;p&gt;While processing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;everyone else waits.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="a82ks1"&lt;br&gt;
User 1 → Processing...&lt;br&gt;
User 2 → Waiting&lt;br&gt;
User 3 → Waiting&lt;br&gt;
User 4 → Waiting&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This becomes slow very quickly.

Especially when requests involve:

* database calls
* file reading
* API fetching

Because those operations take time.

---

# Real-Life Restaurant Analogy

Imagine a restaurant with one chef.

Customer 1 orders pasta.

Now imagine chef does this:



```text id="b73ms2"
Take Order
↓
Stand and watch pasta boil for 10 minutes
↓
Then take next order
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Restaurant destroyed.&lt;br&gt;
Business gone.&lt;br&gt;
Chef arrested emotionally.&lt;/p&gt;

&lt;p&gt;This is blocking behavior.&lt;/p&gt;


&lt;h1&gt;
  
  
  Node.js Does It Differently
&lt;/h1&gt;

&lt;p&gt;Node.js chef works smarter.&lt;/p&gt;

&lt;p&gt;Flow becomes:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="c64ps1"&lt;br&gt;
Take Order&lt;br&gt;
↓&lt;br&gt;
Start Cooking&lt;br&gt;
↓&lt;br&gt;
While food cooks → take more orders&lt;br&gt;
↓&lt;br&gt;
Serve completed dishes when ready&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


One chef.
Many customers.
Nobody feels ignored.

That is Node.js.

---

# What Makes Node.js Fast?

Main reasons:

* non-blocking I/O
* event-driven architecture
* efficient concurrency
* lightweight execution
* V8 engine performance

Let’s understand them one by one.

---

# Non-Blocking I/O Concept

This is the heart of Node.js.

---

# First Understand I/O

I/O means:

# Input / Output

Examples:

* reading files
* database queries
* API requests
* network operations

These operations are usually slow compared to CPU speed.

---

# Blocking I/O

Example:



```text id="d55jd1"
Read File
↓
Wait...
↓
Wait...
↓
Continue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;During waiting:&lt;br&gt;
server cannot handle other tasks efficiently.&lt;/p&gt;


&lt;h1&gt;
  
  
  Non-Blocking I/O
&lt;/h1&gt;

&lt;p&gt;Node.js says:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="e46ks2"&lt;br&gt;
Start Task&lt;br&gt;
↓&lt;br&gt;
Don't Wait&lt;br&gt;
↓&lt;br&gt;
Handle Other Requests&lt;br&gt;
↓&lt;br&gt;
Come Back When Task Finishes&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This is why Node.js handles traffic efficiently.

---

# Example in Code



```js id="f37ms1"
const fs = require("fs");

console.log("Start");

fs.readFile("data.txt", "utf8", (err, data) =&amp;gt; {
    console.log(data);
});

console.log("End");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="g28ps2"&lt;br&gt;
Start&lt;br&gt;
End&lt;br&gt;
[file content]&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Why?

Because Node.js does not block execution while reading file.

Instead:

* file operation happens separately
* event loop continues running

---

# Event-Driven Architecture

Another major reason Node.js feels fast.

Node.js works using:

# events

Instead of waiting continuously,
Node.js listens for events.

Examples:

* request received
* file loaded
* timer completed
* database response returned

When event occurs:
callback executes.

---

# Simple Event Flow



```text id="h19ks1"
Request Arrives
      ↓
Event Registered
      ↓
Node.js Continues Working
      ↓
Task Completes
      ↓
Callback Executes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Efficient.&lt;br&gt;
Lightweight.&lt;br&gt;
Scalable.&lt;/p&gt;


&lt;h1&gt;
  
  
  The Event Loop: The Real Hero
&lt;/h1&gt;

&lt;p&gt;The event loop is basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Node.js traffic manager.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It continuously checks:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="i00jd2"&lt;br&gt;
"Is any task ready?"&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


If yes:
execute callback.

If not:
keep moving.

The event loop never stops.

Unlike developers after debugging for 6 hours.

---

# Event Loop Visualization



```text id="j91ms2"
Incoming Requests
        ↓
Event Queue
        ↓
Event Loop
        ↓
Callback Execution
        ↓
Response Sent
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is the backbone of Node.js.&lt;/p&gt;


&lt;h1&gt;
  
  
  Single-Threaded Model Explanation
&lt;/h1&gt;

&lt;p&gt;Now comes the confusing part.&lt;/p&gt;

&lt;p&gt;Node.js is:&lt;/p&gt;
&lt;h1&gt;
  
  
  single-threaded
&lt;/h1&gt;

&lt;p&gt;Beginners hear this and panic.&lt;/p&gt;

&lt;p&gt;Because logically:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="k82ps1"&lt;br&gt;
One Thread = One Task?&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


No.

That is misunderstanding.

---

# Single Thread ≠ Single User

Node.js uses:

* one main thread
* asynchronous handling

Meaning:
one thread can manage many connections concurrently.

---

# Concurrency vs Parallelism

This is extremely important.

---

# Parallelism

Doing multiple tasks literally at same time.

Example:

* 4 chefs cooking 4 dishes simultaneously

---

# Concurrency

Managing multiple tasks efficiently without waiting unnecessarily.

Example:

* one chef managing many orders smartly

Node.js focuses on:

# concurrency

Not heavy parallel processing.

---

# Why This Makes Node.js Efficient

Traditional systems often create:

* one thread per request

More users:

* more threads
* more memory
* more CPU usage

Node.js avoids this overhead.

Instead:

* lightweight request handling
* async processing
* event-driven execution

Result:
better scalability for many applications.

---

# Where Node.js Performs Best

Node.js is excellent for:

* APIs
* realtime applications
* chat apps
* streaming
* notifications
* collaborative apps
* websocket systems

Basically:
applications with lots of I/O operations.

---

# Examples of Perfect Node.js Use Cases

---

# Chat Applications

Like:

* WhatsApp Web
* Discord-like systems

Need:

* constant connections
* realtime communication

Node.js handles this beautifully.

---

# Streaming Applications

Example:

* Netflix-like services

Streaming involves:

* constant data transfer
* asynchronous delivery

Perfect for Node.js.

---

# API Servers

Modern frontend apps constantly make:

* API requests
* database calls

Node.js handles these efficiently.

---

# Where Node.js Is NOT Ideal

Important honesty section.

Node.js is not best for:

* heavy CPU calculations
* video rendering
* machine learning computation
* massive image processing

Why?

Because CPU-heavy tasks can block event loop.

And once event loop blocks:
everyone suffers equally.

Like group punishment in school.

---

# Blocking Example



```js id="l73ks2"
while(true){

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This blocks everything.&lt;/p&gt;

&lt;p&gt;Server becomes unresponsive.&lt;/p&gt;

&lt;p&gt;Because:&lt;br&gt;
event loop cannot continue.&lt;/p&gt;




&lt;h1&gt;
  
  
  Real-World Companies Using Node.js
&lt;/h1&gt;

&lt;p&gt;Many huge companies use Node.js.&lt;/p&gt;

&lt;p&gt;Examples include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Netflix&lt;/li&gt;
&lt;li&gt;PayPal&lt;/li&gt;
&lt;li&gt;LinkedIn&lt;/li&gt;
&lt;li&gt;Uber&lt;/li&gt;
&lt;li&gt;Walmart&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Because they need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;scalability&lt;/li&gt;
&lt;li&gt;realtime communication&lt;/li&gt;
&lt;li&gt;efficient APIs&lt;/li&gt;
&lt;li&gt;high concurrency&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Why Developers Love Node.js
&lt;/h1&gt;

&lt;p&gt;Besides performance,&lt;br&gt;
Node.js also offers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript everywhere&lt;/li&gt;
&lt;li&gt;huge ecosystem&lt;/li&gt;
&lt;li&gt;npm packages&lt;/li&gt;
&lt;li&gt;fast development&lt;/li&gt;
&lt;li&gt;strong community&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Frontend and backend using same language became a massive advantage.&lt;/p&gt;

&lt;p&gt;Before Node.js:&lt;br&gt;
developers often had:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript frontend&lt;/li&gt;
&lt;li&gt;different backend language&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now:&lt;br&gt;
full-stack JavaScript became possible.&lt;/p&gt;

&lt;p&gt;That changed web development completely.&lt;/p&gt;




&lt;h1&gt;
  
  
  Blocking vs Non-Blocking Comparison
&lt;/h1&gt;




&lt;h1&gt;
  
  
  Traditional Blocking Server
&lt;/h1&gt;



&lt;p&gt;```text id="m64ps1"&lt;br&gt;
Request 1 → Processing&lt;br&gt;
Request 2 → Waiting&lt;br&gt;
Request 3 → Waiting&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Node.js Non-Blocking Server



```text id="n55jd2"
Request 1 → Delegated
Request 2 → Processing
Request 3 → Processing
Request 4 → Processing
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Much more efficient for modern web traffic.&lt;/p&gt;




&lt;h1&gt;
  
  
  Important Truth About Performance
&lt;/h1&gt;

&lt;p&gt;Node.js is not magically faster at:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;calculations&lt;/li&gt;
&lt;li&gt;raw computation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Its real strength is:&lt;/p&gt;

&lt;h1&gt;
  
  
  handling many concurrent I/O operations efficiently
&lt;/h1&gt;

&lt;p&gt;That distinction matters a lot.&lt;/p&gt;




&lt;h1&gt;
  
  
  Common Beginner Misunderstanding
&lt;/h1&gt;

&lt;p&gt;People sometimes think:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Single-threaded means weak.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Not true.&lt;/p&gt;

&lt;p&gt;Node.js succeeds because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;most web apps wait more than they calculate&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And Node.js handles waiting extremely efficiently.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Node.js Is Fast Because Of:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;non-blocking I/O&lt;/li&gt;
&lt;li&gt;event-driven architecture&lt;/li&gt;
&lt;li&gt;efficient concurrency&lt;/li&gt;
&lt;li&gt;lightweight request handling&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Non-Blocking Means:
&lt;/h2&gt;



&lt;p&gt;```text id="o46ks2"&lt;br&gt;
Start Task&lt;br&gt;
↓&lt;br&gt;
Do Other Work&lt;br&gt;
↓&lt;br&gt;
Return Later&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Event Loop:

* manages callbacks
* processes events
* keeps server responsive

---

## Node.js Performs Best For:

* APIs
* realtime apps
* streaming
* chat systems

---

## Node.js Is Not Best For:

* CPU-heavy tasks
* blocking calculations

---

# Final Thoughts

Node.js became popular because it solved a massive modern web problem:

&amp;gt; handling huge numbers of users efficiently.

It does not win by brute force.

It wins by:

* wasting less time
* avoiding unnecessary waiting
* managing concurrency intelligently

That is why Node.js became one of the biggest technologies in modern backend development.

And honestly,
once you understand:

* non-blocking I/O
* event loop
* asynchronous execution

Node.js stops feeling magical.

You realize it is simply:

&amp;gt; a very smart system designed around efficient waiting.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What is Middleware in Express and How It Works</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:28:31 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/what-is-middleware-in-express-and-how-it-works-1kgb</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/what-is-middleware-in-express-and-how-it-works-1kgb</guid>
      <description>&lt;h1&gt;
  
  
  What is Middleware in Express and How It Works
&lt;/h1&gt;

&lt;p&gt;Every Express beginner eventually reaches this moment:&lt;/p&gt;

&lt;p&gt;You open some backend project and suddenly see this mysterious thing everywhere:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="a72ks1"&lt;br&gt;
app.use()&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Then somebody says:

&amp;gt; “Oh that’s middleware.”

And beginners immediately pretend they understood.

Meanwhile internally:

&amp;gt; “What even is this creature?”

Because middleware sounds complicated.

But the reality is surprisingly simple.

Middleware is basically:

&amp;gt; a checkpoint system between request and response.

That’s it.

In this article, we will understand:

* what middleware actually is
* where it sits in Express
* how request flow works
* execution order
* role of `next()`
* types of middleware
* real-world examples like:

  * logging
  * authentication
  * validation

And no, we are not diving into Express internals deep enough to summon ancient backend demons.

---

# First Understand How Request Flow Works

When a user sends request:



```text id="b81ms2"
Browser → Server
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;the request does not magically teleport to route handler.&lt;/p&gt;

&lt;p&gt;Express processes it step by step.&lt;/p&gt;

&lt;p&gt;Think of it like airport security.&lt;/p&gt;

&lt;p&gt;Before boarding:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ID check&lt;/li&gt;
&lt;li&gt;baggage check&lt;/li&gt;
&lt;li&gt;security check&lt;/li&gt;
&lt;li&gt;ticket verification&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Only then:&lt;br&gt;
you reach your gate.&lt;/p&gt;

&lt;p&gt;Middleware works similarly.&lt;/p&gt;


&lt;h1&gt;
  
  
  What Is Middleware?
&lt;/h1&gt;

&lt;p&gt;Middleware is:&lt;/p&gt;
&lt;h1&gt;
  
  
  a function that runs between request and response.
&lt;/h1&gt;

&lt;p&gt;It gets access to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;request object (&lt;code&gt;req&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;response object (&lt;code&gt;res&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;next function (&lt;code&gt;next&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="c92ps1"&lt;br&gt;
function middleware(req, res, next) {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("Middleware running");

next();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This function executes before final response is sent.

---

# Middleware Position in Request Lifecycle



```text id="d73ks2"
Client Request
       ↓
Middleware
       ↓
Middleware
       ↓
Route Handler
       ↓
Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This chain is called:&lt;/p&gt;
&lt;h1&gt;
  
  
  middleware pipeline
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Request Pipeline Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine a restaurant.&lt;/p&gt;

&lt;p&gt;Customer places order.&lt;/p&gt;

&lt;p&gt;Before food reaches table:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;waiter checks order&lt;/li&gt;
&lt;li&gt;kitchen prepares food&lt;/li&gt;
&lt;li&gt;manager verifies bill&lt;/li&gt;
&lt;li&gt;staff serves plate&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Many checkpoints exist before final output.&lt;/p&gt;

&lt;p&gt;Middleware works the same way.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Middleware Exists
&lt;/h1&gt;

&lt;p&gt;Middleware helps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;organize logic&lt;/li&gt;
&lt;li&gt;reuse functionality&lt;/li&gt;
&lt;li&gt;separate responsibilities&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of writing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;authentication&lt;/li&gt;
&lt;li&gt;logging&lt;/li&gt;
&lt;li&gt;validation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;inside every route repeatedly.&lt;/p&gt;

&lt;p&gt;Without middleware,&lt;br&gt;
backend code becomes:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;copy-paste Olympics.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Basic Middleware Example
&lt;/h1&gt;



&lt;p&gt;```js id="e84js1"&lt;br&gt;
const express = require("express");&lt;/p&gt;

&lt;p&gt;const app = express();&lt;/p&gt;

&lt;p&gt;function logger(req, res, next) {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("Request received");

next();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;}&lt;/p&gt;

&lt;p&gt;app.use(logger);&lt;/p&gt;

&lt;p&gt;app.get("/", (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;res.send("Homepage");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;

&lt;p&gt;app.listen(3000);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# What Happens Here?

When request comes:



```text id="f75ls1"
GET /
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Flow becomes:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="g66kd2"&lt;br&gt;
Request&lt;br&gt;
   ↓&lt;br&gt;
logger middleware&lt;br&gt;
   ↓&lt;br&gt;
Route Handler&lt;br&gt;
   ↓&lt;br&gt;
Response&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Understanding `next()` Function

This is the most important middleware concept.



```js id="h57ps2"
next()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;means:&lt;/p&gt;
&lt;h1&gt;
  
  
  “Move to the next middleware or route.”
&lt;/h1&gt;

&lt;p&gt;Without &lt;code&gt;next()&lt;/code&gt;,&lt;br&gt;
request gets stuck forever.&lt;/p&gt;

&lt;p&gt;Like customer support calls placed on eternal hold.&lt;/p&gt;


&lt;h1&gt;
  
  
  Example Without &lt;code&gt;next()&lt;/code&gt;
&lt;/h1&gt;



&lt;p&gt;```js id="i48ms1"&lt;br&gt;
function middleware(req, res, next) {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("Blocked");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Problem:

* request never reaches route
* browser keeps loading

Because middleware stopped the pipeline.

---

# Middleware Execution Sequence

Multiple middleware run in order.

Example:



```js id="j39ks2"
app.use((req, res, next) =&amp;gt; {
    console.log("Middleware 1");
    next();
});

app.use((req, res, next) =&amp;gt; {
    console.log("Middleware 2");
    next();
});

app.get("/", (req, res) =&amp;gt; {
    console.log("Route Handler");
    res.send("Done");
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="k20jd1"&lt;br&gt;
Middleware 1&lt;br&gt;
Middleware 2&lt;br&gt;
Route Handler&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Execution order matters a lot.

---

# Middleware Execution Flow



```text id="l11ps2"
Request
   ↓
Middleware 1
   ↓
Middleware 2
   ↓
Middleware 3
   ↓
Route Handler
   ↓
Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is Express middleware chaining.&lt;/p&gt;


&lt;h1&gt;
  
  
  Types of Middleware in Express
&lt;/h1&gt;

&lt;p&gt;Express mainly has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Application-level middleware&lt;/li&gt;
&lt;li&gt;Router-level middleware&lt;/li&gt;
&lt;li&gt;Built-in middleware&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let’s understand them one by one.&lt;/p&gt;


&lt;h1&gt;
  
  
  1. Application-Level Middleware
&lt;/h1&gt;

&lt;p&gt;Applied to entire app.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="m02ks1"&lt;br&gt;
app.use((req, res, next) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("Runs for every request");

next();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This runs for:

* `/`
* `/about`
* `/login`
* every route

Useful for:

* logging
* authentication
* request parsing

---

# Route-Specific Middleware

You can also apply middleware only to certain routes.

Example:



```js id="n93ms2"
app.get(
    "/profile",
    authMiddleware,
    (req, res) =&amp;gt; {
        res.send("Profile Page");
    }
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;middleware runs only for &lt;code&gt;/profile&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  2. Router-Level Middleware
&lt;/h1&gt;

&lt;p&gt;Express allows separate routers.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="o84ps1"&lt;br&gt;
const router = express.Router();&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Middleware can be attached specifically to router.

Example:



```js id="p75ks2"
router.use((req, res, next) =&amp;gt; {

    console.log("Router Middleware");

    next();

});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Useful for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;modular backend structure&lt;/li&gt;
&lt;li&gt;large applications&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Real-World Router Example
&lt;/h1&gt;

&lt;p&gt;Imagine:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="q66jd1"&lt;br&gt;
/admin&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


All admin routes may require:

* authentication
* admin permission

Instead of repeating middleware everywhere,
router-level middleware handles all of them together.

---

# 3. Built-In Middleware

Express already provides some middleware.

Most common:



```js id="r57ms2"
express.json()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Used for:&lt;/p&gt;
&lt;h1&gt;
  
  
  parsing JSON request body
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="s48ks1"&lt;br&gt;
app.use(express.json());&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Without this,
`req.body` will be undefined for JSON requests.

And debugging that for 40 minutes is basically Express beginner tradition.

---

# Another Built-In Middleware



```js id="t39ps2"
express.static()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Used for serving:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;images&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JavaScript files&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="u20ms1"&lt;br&gt;
app.use(express.static("public"));&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Real-World Middleware Examples

Now let’s see actual practical use cases.

---

# 1. Logging Middleware

Tracks requests.

Example:



```js id="v11ks2"
function logger(req, res, next) {

    console.log(`${req.method} ${req.url}`);

    next();
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="w02jd1"&lt;br&gt;
GET /&lt;br&gt;
POST /login&lt;br&gt;
GET /profile&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Useful for:

* debugging
* monitoring traffic
* tracking API usage

---

# 2. Authentication Middleware

Protects private routes.

Example:



```js id="x93ms2"
function auth(req, res, next) {

    const token = req.headers.authorization;

    if (!token) {
        return res.send("Access Denied");
    }

    next();
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Flow:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="y84ks1"&lt;br&gt;
Request&lt;br&gt;
   ↓&lt;br&gt;
Check Token&lt;br&gt;
   ↓&lt;br&gt;
Valid?&lt;br&gt;
 ↓       ↓&lt;br&gt;
Yes      No&lt;br&gt;
 ↓        ↓&lt;br&gt;
Next     Reject&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# 3. Request Validation Middleware

Checks incoming data.

Example:



```js id="z75ps2"
function validate(req, res, next) {

    const { username } = req.body;

    if (!username) {
        return res.send("Username Required");
    }

    next();
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Prevents bad data from entering application.&lt;/p&gt;


&lt;h1&gt;
  
  
  Combining Multiple Middleware
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="a66ms1"&lt;br&gt;
app.post(&lt;br&gt;
    "/dashboard",&lt;br&gt;
    logger,&lt;br&gt;
    auth,&lt;br&gt;
    validate,&lt;br&gt;
    (req, res) =&amp;gt; {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    res.send("Welcome");

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Execution order:



```text id="b57ks2"
Request
   ↓
Logger
   ↓
Authentication
   ↓
Validation
   ↓
Route Handler
   ↓
Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Very clean structure.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why Middleware Makes Express Powerful
&lt;/h1&gt;

&lt;p&gt;Middleware allows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reusable code&lt;/li&gt;
&lt;li&gt;modular architecture&lt;/li&gt;
&lt;li&gt;cleaner backend structure&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of giant messy route handlers doing everything.&lt;/p&gt;

&lt;p&gt;Without middleware,&lt;br&gt;
large applications become:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;giant spaghetti code disasters.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Important Middleware Rule
&lt;/h1&gt;

&lt;p&gt;Order matters.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="c48ps1"&lt;br&gt;
app.use(express.json());&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


must come before routes using `req.body`.

Wrong order:



```js id="d39ms2"
app.post("/login", (req, res) =&amp;gt; {
    console.log(req.body);
});

app.use(express.json());
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Result:&lt;br&gt;
&lt;code&gt;req.body&lt;/code&gt; becomes undefined.&lt;/p&gt;

&lt;p&gt;Because middleware executed too late.&lt;/p&gt;


&lt;h1&gt;
  
  
  Common Beginner Mistakes
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Forgetting &lt;code&gt;next()&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;Result:&lt;br&gt;
request hangs forever.&lt;/p&gt;


&lt;h1&gt;
  
  
  Sending Multiple Responses
&lt;/h1&gt;

&lt;p&gt;Bad example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="e20ks1"&lt;br&gt;
res.send("Hello");&lt;/p&gt;

&lt;p&gt;next();&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Can create errors because response already ended.

---

# Wrong Middleware Order

Execution sequence matters heavily in Express.

---

# Middleware Is Not Only for Authentication

Beginners often think:

&amp;gt; middleware = auth only

No.

Middleware can:

* modify requests
* log data
* validate forms
* parse JSON
* handle errors
* compress responses

It is basically:

&amp;gt; backend traffic control.

---

# Simple Middleware Mental Model

Think of middleware as:

# security checkpoints for requests

Each middleware decides:

* continue
* modify request
* block request
* send response

That’s the entire concept.

---

# Quick Revision

## Middleware Is:

* function between request and response
* part of request pipeline

---

## Middleware Receives:



```js id="f11ms2"
(req, res, next)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;code&gt;next()&lt;/code&gt; Means:
&lt;/h2&gt;



&lt;p&gt;```text id="g02jd1"&lt;br&gt;
Move to next middleware&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Types of Middleware:

* Application-level
* Router-level
* Built-in

---

## Common Uses:

* logging
* authentication
* validation
* parsing JSON

---

# Final Thoughts

Middleware is one of the reasons Express became so successful.

Because instead of writing massive unreadable route handlers,
Express allows backend logic to flow step by step like an organized pipeline.

And once middleware finally clicks in your brain,
you suddenly understand:

* authentication systems
* logging systems
* validation layers
* API architecture

much more clearly.

At its core,
middleware is simply:

&amp;gt; “Something that happens before the final response.”

That’s the big scary concept.

Just a checkpoint system for requests.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>programming</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JWT Authentication in Node.js Explained Simply</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:24:56 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/jwt-authentication-in-nodejs-explained-simply-56me</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/jwt-authentication-in-nodejs-explained-simply-56me</guid>
      <description>&lt;h1&gt;
  
  
  JWT Authentication in Node.js Explained Simply
&lt;/h1&gt;

&lt;p&gt;Authentication is one of those topics that sounds terrifying at first.&lt;/p&gt;

&lt;p&gt;People start throwing around words like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;tokens&lt;/li&gt;
&lt;li&gt;authorization&lt;/li&gt;
&lt;li&gt;encryption&lt;/li&gt;
&lt;li&gt;bearer headers&lt;/li&gt;
&lt;li&gt;signatures&lt;/li&gt;
&lt;li&gt;middleware&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And suddenly beginners feel like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“I just wanted users to log in, not join a cybersecurity agency.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But the truth is:&lt;br&gt;
JWT authentication is actually a very simple idea once you stop overcomplicating it.&lt;/p&gt;

&lt;p&gt;In this article, we will understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what authentication really means&lt;/li&gt;
&lt;li&gt;why applications need it&lt;/li&gt;
&lt;li&gt;what JWT is&lt;/li&gt;
&lt;li&gt;how JWT login works&lt;/li&gt;
&lt;li&gt;structure of JWT&lt;/li&gt;
&lt;li&gt;how tokens are sent&lt;/li&gt;
&lt;li&gt;how protected routes work&lt;/li&gt;
&lt;li&gt;why JWT became so popular&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And no, we are not diving into scary cryptography mathematics today.&lt;br&gt;
Human survival matters.&lt;/p&gt;


&lt;h1&gt;
  
  
  First Understand: What Authentication Actually Means
&lt;/h1&gt;

&lt;p&gt;Authentication simply means:&lt;/p&gt;
&lt;h1&gt;
  
  
  “Proving who you are.”
&lt;/h1&gt;

&lt;p&gt;That’s it.&lt;/p&gt;

&lt;p&gt;When you log into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instagram&lt;/li&gt;
&lt;li&gt;YouTube&lt;/li&gt;
&lt;li&gt;Amazon&lt;/li&gt;
&lt;li&gt;Netflix&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;the application checks:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="a7d2s1"&lt;br&gt;
"Are you really this user?"&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


If yes:
you get access.

If not:
goodbye.

---

# Real-Life Authentication Example

Imagine entering a college exam hall.

Teacher asks for:

* ID card

You show it.

Teacher verifies:

* your identity

Then allows entry.

That process is:

# authentication

---

# Why Authentication Is Required

Without authentication:
anyone could:

* access your account
* view private data
* modify information
* perform actions as you

That would be absolute chaos.

Imagine random people posting from your Instagram account at 3 AM:

&amp;gt; “I have left society and now sell coconuts in Goa.”

Authentication prevents that disaster.

---

# Traditional Session-Based Authentication

Before JWT became popular, many applications used:

# sessions

Flow:

1. User logs in
2. Server creates session
3. Session stored in database/server memory
4. Browser gets session ID
5. Every request sends session ID

This works.

But at large scale:

* managing sessions becomes harder
* scaling servers becomes difficult
* server stores too much state

Then JWT entered the scene like:

&amp;gt; “What if the server didn’t need to remember everyone?”

---

# What Is JWT?

JWT stands for:

# JSON Web Token

It is a token-based authentication system.

After login:

* server creates a token
* sends token to client
* client stores token
* client sends token with future requests

Server verifies token instead of storing session data.

---

# Simple JWT Idea

Instead of server remembering users,
the token itself carries user information.

Like a temporary digital ID card.

---

# JWT Is Stateless Authentication

This is the important concept.

# Stateless Authentication

Means:

* server does not store login state

The token contains everything needed.

Server simply verifies:

* Is token valid?
* Is signature correct?

If yes:
user is authenticated.

---

# Real-Life JWT Analogy

Imagine a concert entry pass.

Security guard does not memorize every visitor.

Instead:

* visitor carries pass
* guard checks validity
* if valid → entry allowed

JWT works similarly.

---

# Structure of a JWT

A JWT has 3 parts:



```text id="q9s2x1"
Header.Payload.Signature
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Looks something like:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="w8d1k2"&lt;br&gt;
eyJhbGciOiJIUzI1Ni...&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Looks scary.

Actually very structured.

---

# JWT Structure Breakdown

---

# 1. Header

The header stores:

* token type
* algorithm information

Example:



```json id="m2s8p1"
{
  "alg": "HS256",
  "typ": "JWT"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Meaning:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;algorithm used = HS256&lt;/li&gt;
&lt;li&gt;token type = JWT&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  2. Payload
&lt;/h1&gt;

&lt;p&gt;Payload contains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;user data&lt;/li&gt;
&lt;li&gt;token information&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```json id="d8s2w1"&lt;br&gt;
{&lt;br&gt;
  "id": 101,&lt;br&gt;
  "username": "shivam"&lt;br&gt;
}&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This data is called:

# claims

Important:
JWT payload is not encrypted by default.

Anyone can decode it.

So never store:

* passwords
* sensitive secrets

inside JWT payload.

Unless your goal is:

&amp;gt; creating future security documentaries.

---

# 3. Signature

Signature is the security part.

It verifies:

* token authenticity
* token integrity

Server creates signature using:

* secret key
* header
* payload

If token changes:
signature becomes invalid.

Meaning:
tampered token gets rejected.

---

# JWT Visual Structure



```text id="k7d2m1"
HEADER
   ↓
PAYLOAD
   ↓
SIGNATURE
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Combined together:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="x8s1z2"&lt;br&gt;
header.payload.signature&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Installing JWT in Node.js

We usually use package:



```text id="j2w8d1"
jsonwebtoken
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Install it:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="u8s2x1"&lt;br&gt;
npm install jsonwebtoken&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Basic Login Flow Using JWT

Now let’s understand the actual login process.

---

# JWT Authentication Flow



```text id="l9d2p1"
User Logs In
      ↓
Server Verifies Credentials
      ↓
JWT Token Created
      ↓
Token Sent to Client
      ↓
Client Stores Token
      ↓
Client Sends Token with Requests
      ↓
Server Verifies Token
      ↓
Access Granted
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is the entire JWT system.&lt;/p&gt;

&lt;p&gt;Simple flow.&lt;br&gt;
Massive industry usage.&lt;/p&gt;


&lt;h1&gt;
  
  
  Creating Your First JWT Token
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="f8s2k1"&lt;br&gt;
const jwt = require("jsonwebtoken");&lt;/p&gt;

&lt;p&gt;const token = jwt.sign(&lt;br&gt;
    {&lt;br&gt;
        id: 1,&lt;br&gt;
        username: "shivam"&lt;br&gt;
    },&lt;br&gt;
    "secretkey"&lt;br&gt;
);&lt;/p&gt;

&lt;p&gt;console.log(token);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Understanding `jwt.sign()`



```js id="n7d2s1"
jwt.sign(payload, secret)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;payload = user data&lt;/li&gt;
&lt;li&gt;secret = secret key used for signature&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This generates token.&lt;/p&gt;


&lt;h1&gt;
  
  
  Example Generated Token
&lt;/h1&gt;



&lt;p&gt;```text id="r8w1m2"&lt;br&gt;
eyJhbGciOiJIUzI1NiIsInR5cCI...&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Looks like hacker language.

Actually just encoded text.

---

# Login Route Example

Using Express:



```js id="c9s2p1"
const express = require("express");
const jwt = require("jsonwebtoken");

const app = express();

app.use(express.json());

app.post("/login", (req, res) =&amp;gt; {

    const user = {
        id: 1,
        username: "shivam"
    };

    const token = jwt.sign(user, "secretkey");

    res.json({
        token
    });
});

app.listen(3000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;When user hits:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="p8d1k1"&lt;br&gt;
/login&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


server sends token.

---

# Sending Token with Requests

After login,
client stores token.

Usually in:

* localStorage
* cookies
* memory

Then sends token in headers.

Example:



```text id="m7w2x1"
Authorization: Bearer TOKEN_HERE
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is standard practice.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why “Bearer”?
&lt;/h1&gt;

&lt;p&gt;Bearer means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;whoever carries this token gets access.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Like carrying a valid entry ticket.&lt;/p&gt;


&lt;h1&gt;
  
  
  Protected Routes
&lt;/h1&gt;

&lt;p&gt;Now comes the real power.&lt;/p&gt;

&lt;p&gt;Some routes should only work for logged-in users.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;profile page&lt;/li&gt;
&lt;li&gt;orders&lt;/li&gt;
&lt;li&gt;private dashboard&lt;/li&gt;
&lt;li&gt;account settings&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These become:&lt;/p&gt;
&lt;h1&gt;
  
  
  protected routes
&lt;/h1&gt;


&lt;h1&gt;
  
  
  Token Verification Middleware
&lt;/h1&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="v9s2d1"&lt;br&gt;
function verifyToken(req, res, next) {&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const bearerHeader = req.headers["authorization"];

if (!bearerHeader) {
    return res.sendStatus(403);
}

const token = bearerHeader.split(" ")[1];

jwt.verify(token, "secretkey", (err, decoded) =&amp;gt; {

    if (err) {
        return res.sendStatus(403);
    }

    req.user = decoded;

    next();
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;}&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Looks scary first time.
Actually straightforward.

---

# What This Middleware Does

---

## Step 1: Get Authorization Header



```js id="q8w1k2"
req.headers["authorization"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Gets token header.&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 2: Extract Token
&lt;/h2&gt;



&lt;p&gt;```js id="d7s2m1"&lt;br&gt;
Bearer TOKEN&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Split and get actual token.

---

## Step 3: Verify Token



```js id="x9d2s1"
jwt.verify()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Checks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;signature validity&lt;/li&gt;
&lt;li&gt;token authenticity&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  Step 4: Allow Access
&lt;/h2&gt;

&lt;p&gt;If token valid:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="a8s2k1"&lt;br&gt;
next()&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


moves to protected route.

---

# Protected Route Example



```js id="h7d2m1"
app.get("/profile", verifyToken, (req, res) =&amp;gt; {

    res.json({
        message: "Protected Profile Data",
        user: req.user
    });

});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Without valid token:&lt;br&gt;
access denied.&lt;/p&gt;

&lt;p&gt;With valid token:&lt;br&gt;
access granted.&lt;/p&gt;


&lt;h1&gt;
  
  
  Token Validation Lifecycle
&lt;/h1&gt;



&lt;p&gt;```text id="t8w2p1"&lt;br&gt;
Client Sends Request&lt;br&gt;
        ↓&lt;br&gt;
Token Attached in Header&lt;br&gt;
        ↓&lt;br&gt;
Server Verifies Token&lt;br&gt;
        ↓&lt;br&gt;
Valid?&lt;br&gt;
   ↓         ↓&lt;br&gt;
 Yes         No&lt;br&gt;
 ↓            ↓&lt;br&gt;
Access      Reject Request&lt;br&gt;
Granted&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This flow powers millions of applications daily.

---

# Why JWT Became So Popular

Because JWT is:

* lightweight
* scalable
* stateless
* fast
* easy for APIs

Especially useful for:

* mobile apps
* frontend-backend separation
* REST APIs
* microservices

---

# But JWT Is Not Magic

Now important honesty section.

JWT is useful.
But beginners sometimes worship it like:

&amp;gt; ancient authentication prophecy.

JWT is not always the perfect solution.

For example:

* logout handling becomes tricky
* token expiration management matters
* stolen tokens are dangerous

Good security practices are still required.

---

# Important Security Practices

---

## Never Store Passwords in JWT

Bad idea.

Very bad idea.

---

## Use Expiration Time

Example:



```js id="k9s2w1"
jwt.sign(user, "secretkey", {
    expiresIn: "1h"
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Token expires after 1 hour.&lt;/p&gt;


&lt;h2&gt;
  
  
  Keep Secret Key Safe
&lt;/h2&gt;

&lt;p&gt;Never expose:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="b7d2m1"&lt;br&gt;
secretkey&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


in frontend code.

Otherwise attackers can generate fake tokens.

And then:
your backend security becomes decorative art.

---

# Common Beginner Confusions

---

# Authentication vs Authorization

## Authentication



```text id="y8w1s2"
Who are you?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Authorization
&lt;/h2&gt;



&lt;p&gt;```text id="n7d2k1"&lt;br&gt;
What are you allowed to access?&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Different concepts.

---

# JWT Is Not Encryption

JWT is encoded.
Not encrypted by default.

Huge difference.

---

# Stateless Does Not Mean Secure Automatically

Security still depends on:

* proper implementation
* HTTPS
* safe token storage
* expiration handling

---

# Quick Revision

## JWT Means:



```text id="m9s2x1"
JSON Web Token
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  JWT Has 3 Parts:
&lt;/h2&gt;



&lt;p&gt;```text id="d8w1p1"&lt;br&gt;
Header.Payload.Signature&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Login Flow:



```text id="r7d2m1"
Login → Generate Token → Send Token → Verify Token
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Protected Routes Require:
&lt;/h2&gt;



&lt;p&gt;```js id="q9s2k1"&lt;br&gt;
jwt.verify()&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## JWT Is:

* stateless
* lightweight
* scalable

---

# Final Thoughts

JWT authentication becomes much less scary once you realize:

&amp;gt; it is basically just a digital identity card system.

User logs in.
Server creates token.
User carries token.
Server verifies token.

That’s the core idea.

The complicated-looking strings and fancy terminology scare beginners more than the actual concept itself.

And honestly,
most backend authentication systems are simply:

&amp;gt; “Prove you are allowed to be here.”

JWT just happens to do it in a clean and scalable way.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Creating Routes and Handling Requests with Express</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:22:13 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/creating-routes-and-handling-requests-with-express-1g50</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/creating-routes-and-handling-requests-with-express-1g50</guid>
      <description>&lt;h1&gt;
  
  
  Creating Routes and Handling Requests with Express
&lt;/h1&gt;

&lt;p&gt;If raw Node.js feels like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;building furniture using individual pieces of wood,&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;then Express.js feels like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;finally discovering screws, tools, and basic human happiness.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Because let’s be honest.&lt;/p&gt;

&lt;p&gt;Creating servers using pure Node.js is great for learning.&lt;/p&gt;

&lt;p&gt;But after writing this for the 17th time:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="a82ks1"&lt;br&gt;
res.writeHead(200, { "Content-Type": "text/plain" });&lt;br&gt;
res.end("Hello World");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


you start questioning your life choices.

That is exactly why Express.js became popular.

It removes unnecessary pain and lets developers focus on:

* routes
* logic
* APIs
* applications

instead of wrestling with low-level server code every five minutes.

In this article, we will learn:

* What Express.js is
* Why developers use it
* How to create an Express server
* Handling GET requests
* Handling POST requests
* Sending responses properly
* Understanding routing clearly

And yes, we are keeping things beginner-friendly without turning the article into a 900-page encyclopedia.

---

# First Understand: What Is Express.js?

Express.js is a backend framework for Node.js.

It helps simplify:

* server creation
* routing
* request handling
* middleware
* APIs

Instead of writing huge amounts of raw Node.js code,
Express gives you clean and readable methods.

Think of Node.js as:

&amp;gt; the engine.

And Express as:

&amp;gt; the comfortable car built on top of it.

---

# Why Express.js Was Needed

Let’s compare.

---

# Creating Server in Raw Node.js



```js id="f71sk2"
const http = require("http");

const server = http.createServer((req, res) =&amp;gt; {
    if (req.url === "/") {
        res.write("Home Page");
        res.end();
    }
});

server.listen(3000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This works.&lt;/p&gt;

&lt;p&gt;But as your application grows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;more routes&lt;/li&gt;
&lt;li&gt;more conditions&lt;/li&gt;
&lt;li&gt;more headers&lt;/li&gt;
&lt;li&gt;more parsing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;everything becomes messy very quickly.&lt;/p&gt;

&lt;p&gt;Soon your file starts looking like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;ancient scrolls written by exhausted developers.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Same Thing Using Express
&lt;/h1&gt;



&lt;p&gt;```js id="m92ks1"&lt;br&gt;
const express = require("express");&lt;/p&gt;

&lt;p&gt;const app = express();&lt;/p&gt;

&lt;p&gt;app.get("/", (req, res) =&amp;gt; {&lt;br&gt;
    res.send("Home Page");&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;app.listen(3000);&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Cleaner.
Readable.
Less pain.
Less unnecessary code.

This is why developers love Express.

---

# Installing Express

First create a project folder.



```text id="z81sk2"
express-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Open terminal inside it.&lt;/p&gt;

&lt;p&gt;Now initialize Node project:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="x71ps2"&lt;br&gt;
npm init -y&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This creates:



```text id="q61nd2"
package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This file stores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;project information&lt;/li&gt;
&lt;li&gt;dependencies&lt;/li&gt;
&lt;li&gt;scripts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now install Express:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="w82js1"&lt;br&gt;
npm install express&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Done.

Express is now added to your project.

---

# Creating Your First Express Server

Create file:



```text id="r81dk2"
app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Write:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="p72ms1"&lt;br&gt;
const express = require("express");&lt;/p&gt;

&lt;p&gt;const app = express();&lt;/p&gt;

&lt;p&gt;app.listen(3000, () =&amp;gt; {&lt;br&gt;
    console.log("Server running on port 3000");&lt;br&gt;
});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Run server:



```bash id="s91kd2"
node app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="d82js1"&lt;br&gt;
Server running on port 3000&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Congratulations.

You now have an Express server running.

Tiny file.
Massive upgrade.

---

# Understanding What Is Happening

---

## Step 1: Import Express



```js id="e91ks2"
const express = require("express");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Imports Express library.&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 2: Create App
&lt;/h2&gt;



&lt;p&gt;```js id="u82ms1"&lt;br&gt;
const app = express();&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Creates Express application instance.

This `app` object controls:

* routes
* requests
* responses
* middleware
* server behavior

---

## Step 3: Start Server



```js id="l73ps1"
app.listen(3000);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Starts server on port 3000.&lt;/p&gt;


&lt;h1&gt;
  
  
  What Are Routes?
&lt;/h1&gt;

&lt;p&gt;Routes are basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;paths users visit.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="g92ks1"&lt;br&gt;
/&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


means homepage.



```text id="h83jd1"
/about
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;means about page.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="t72ls1"&lt;br&gt;
/contact&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


means contact page.

Every route can perform different actions.

---

# Understanding Routing Properly

Imagine your server is a hotel receptionist.

Different customers ask for different rooms.

Example:



```text id="j82ls1"
/login
/products
/profile
/orders
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;The receptionist checks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;which path user requested&lt;/li&gt;
&lt;li&gt;then sends them to correct place&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is routing.&lt;/p&gt;


&lt;h1&gt;
  
  
  Handling GET Requests
&lt;/h1&gt;

&lt;p&gt;GET requests are used to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;fetch data&lt;/li&gt;
&lt;li&gt;request pages&lt;/li&gt;
&lt;li&gt;retrieve information&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
Opening a website in browser usually sends a GET request.&lt;/p&gt;


&lt;h1&gt;
  
  
  First GET Route
&lt;/h1&gt;

&lt;p&gt;Update &lt;code&gt;app.js&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="v73ms2"&lt;br&gt;
const express = require("express");&lt;/p&gt;

&lt;p&gt;const app = express();&lt;/p&gt;

&lt;p&gt;app.get("/", (req, res) =&amp;gt; {&lt;br&gt;
    res.send("Welcome to Homepage");&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;app.listen(3000, () =&amp;gt; {&lt;br&gt;
    console.log("Server running");&lt;br&gt;
});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Now visit:



```text id="o82jd1"
http://localhost:3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;You will see:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="i72ks1"&lt;br&gt;
Welcome to Homepage&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Another Route Example



```js id="c91ps2"
app.get("/about", (req, res) =&amp;gt; {
    res.send("About Page");
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="f82ls1"&lt;br&gt;
&lt;a href="http://localhost:3000/about" rel="noopener noreferrer"&gt;http://localhost:3000/about&lt;/a&gt;&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


returns:



```text id="b71kd2"
About Page
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Different routes.&lt;br&gt;
Different responses.&lt;/p&gt;

&lt;p&gt;Simple.&lt;/p&gt;


&lt;h1&gt;
  
  
  Request → Route → Response Flow
&lt;/h1&gt;



&lt;p&gt;```text id="n92js1"&lt;br&gt;
Client Request&lt;br&gt;
       ↓&lt;br&gt;
Express Route Matches URL&lt;br&gt;
       ↓&lt;br&gt;
Route Handler Executes&lt;br&gt;
       ↓&lt;br&gt;
Response Sent Back&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This is the foundation of backend APIs.

---

# Understanding Route Handlers

This part:



```js id="m81ps2"
(req, res) =&amp;gt; {

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;is called:&lt;/p&gt;
&lt;h1&gt;
  
  
  route handler
&lt;/h1&gt;

&lt;p&gt;It handles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;incoming request&lt;/li&gt;
&lt;li&gt;outgoing response&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  What Is &lt;code&gt;req&lt;/code&gt;?
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;req&lt;/code&gt; means:&lt;/p&gt;
&lt;h1&gt;
  
  
  request object
&lt;/h1&gt;

&lt;p&gt;It contains:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;URL&lt;/li&gt;
&lt;li&gt;headers&lt;/li&gt;
&lt;li&gt;query parameters&lt;/li&gt;
&lt;li&gt;body data&lt;/li&gt;
&lt;li&gt;client information&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;everything user sends.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  What Is &lt;code&gt;res&lt;/code&gt;?
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;res&lt;/code&gt; means:&lt;/p&gt;
&lt;h1&gt;
  
  
  response object
&lt;/h1&gt;

&lt;p&gt;It helps send data back to client.&lt;/p&gt;

&lt;p&gt;Examples:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="x82ks1"&lt;br&gt;
res.send()&lt;br&gt;
res.json()&lt;br&gt;
res.status()&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Sending Responses

---

## Sending Text



```js id="q71ms2"
res.send("Hello");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Sending HTML
&lt;/h2&gt;



&lt;p&gt;```js id="k82ls1"&lt;br&gt;
res.send("&lt;/p&gt;
&lt;h1&gt;Hello&lt;/h1&gt;");
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Sending JSON



```js id="t91jd2"
res.json({
    name: "Shivam",
    role: "Developer"
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Express automatically converts it into JSON response.&lt;/p&gt;

&lt;p&gt;Very useful for APIs.&lt;/p&gt;


&lt;h1&gt;
  
  
  Handling POST Requests
&lt;/h1&gt;

&lt;p&gt;POST requests are used to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;send data&lt;/li&gt;
&lt;li&gt;create resources&lt;/li&gt;
&lt;li&gt;submit forms&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;login forms&lt;/li&gt;
&lt;li&gt;signup forms&lt;/li&gt;
&lt;li&gt;uploading data&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Basic POST Route
&lt;/h1&gt;



&lt;p&gt;```js id="a73ks2"&lt;br&gt;
app.post("/login", (req, res) =&amp;gt; {&lt;br&gt;
    res.send("Login Successful");&lt;br&gt;
});&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This route responds only to:

# POST requests

Not GET requests.

---

# Difference Between GET and POST

| Method | Purpose          |
| ------ | ---------------- |
| GET    | Fetch data       |
| POST   | Send/Create data |

---

# Important Beginner Confusion

If you open:



```text id="r82ks1"
http://localhost:3000/login
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;in browser,&lt;br&gt;
it sends:&lt;/p&gt;
&lt;h1&gt;
  
  
  GET request
&lt;/h1&gt;

&lt;p&gt;But your route expects:&lt;/p&gt;
&lt;h1&gt;
  
  
  POST request
&lt;/h1&gt;

&lt;p&gt;Result?&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="w91js2"&lt;br&gt;
Cannot GET /login&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This is normal.

Not a bug.

Your route simply does not handle GET there.

---

# Express Routing Structure Visualization



```text id="u73ls1"
app.get("/")        → Homepage
app.get("/about")  → About Page
app.post("/login") → Login Logic
app.get("/users")  → User Data
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Each route has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;method&lt;/li&gt;
&lt;li&gt;path&lt;/li&gt;
&lt;li&gt;handler&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Why Express Feels So Powerful
&lt;/h1&gt;

&lt;p&gt;Because Express removes repetitive low-level work.&lt;/p&gt;

&lt;p&gt;Without Express:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;manual routing&lt;/li&gt;
&lt;li&gt;manual headers&lt;/li&gt;
&lt;li&gt;manual parsing&lt;/li&gt;
&lt;li&gt;manual response handling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With Express:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;cleaner syntax&lt;/li&gt;
&lt;li&gt;organized routes&lt;/li&gt;
&lt;li&gt;faster development&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It lets developers focus on:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;application logic instead of server headaches.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Real-World Example
&lt;/h1&gt;

&lt;p&gt;Imagine building:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instagram&lt;/li&gt;
&lt;li&gt;YouTube&lt;/li&gt;
&lt;li&gt;Swiggy&lt;/li&gt;
&lt;li&gt;Amazon&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every action becomes a route.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="y82ks1"&lt;br&gt;
GET    /products&lt;br&gt;
POST   /orders&lt;br&gt;
GET    /profile&lt;br&gt;
POST   /login&lt;br&gt;
DELETE /cart&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Backend development is basically:

&amp;gt; handling requests properly and sending useful responses.

That is why routing is one of the most important concepts in Express.

---

# Common Beginner Mistakes

---

## Forgetting to Install Express

Error:



```text id="p71js2"
Cannot find module 'express'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Solution:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="z82ls1"&lt;br&gt;
npm install express&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Port Already Running

Error:



```text id="v91kd2"
EADDRINUSE
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Means:&lt;br&gt;
another app already uses that port.&lt;/p&gt;

&lt;p&gt;Change port:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="h73ps2"&lt;br&gt;
app.listen(5000)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Wrong HTTP Method

Using:



```js id="n82ks1"
app.post()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;but testing in browser.&lt;/p&gt;

&lt;p&gt;Browser sends GET request.&lt;/p&gt;

&lt;p&gt;Result:&lt;br&gt;
route not found.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Express.js Is:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Node.js framework&lt;/li&gt;
&lt;li&gt;simplifies backend development&lt;/li&gt;
&lt;li&gt;handles routes easily&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Install Express
&lt;/h2&gt;



&lt;p&gt;```bash id="l91ms2"&lt;br&gt;
npm install express&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Create Server



```js id="c82ls2"
const app = express();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Start Server
&lt;/h2&gt;



&lt;p&gt;```js id="s73jd1"&lt;br&gt;
app.listen(3000)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## GET Request



```js id="d82ks1"
app.get()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Used for fetching data.&lt;/p&gt;




&lt;h2&gt;
  
  
  POST Request
&lt;/h2&gt;



&lt;p&gt;```js id="g91ps2"&lt;br&gt;
app.post()&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Used for sending data.

---

# Final Thoughts

Learning Express for the first time feels refreshing because suddenly:

* routing becomes readable
* servers become easier
* backend code stops looking terrifying

And honestly,
that is why Express became one of the most loved Node.js frameworks ever.

It takes complicated backend concepts and says:

&amp;gt; “Relax. We can make this cleaner.”

And that simplicity is exactly what made Express dominate backend development for years.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Setting Up Your First Node.js Application Step-by-Step</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:20:06 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/setting-up-your-first-nodejs-application-step-by-step-2gcd</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/setting-up-your-first-nodejs-application-step-by-step-2gcd</guid>
      <description>&lt;h1&gt;
  
  
  Setting Up Your First Node.js Application Step-by-Step
&lt;/h1&gt;

&lt;p&gt;Every developer remembers their first &lt;code&gt;console.log()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;That one tiny line that makes you feel like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Yes. I am officially a programmer now.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And when starting backend development, Node.js is usually where that journey begins.&lt;/p&gt;

&lt;p&gt;But for beginners, the first setup can feel unnecessarily confusing.&lt;/p&gt;

&lt;p&gt;People throw around terms like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;runtime&lt;/li&gt;
&lt;li&gt;REPL&lt;/li&gt;
&lt;li&gt;server&lt;/li&gt;
&lt;li&gt;environment&lt;/li&gt;
&lt;li&gt;localhost&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And suddenly:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;you just wanted to print “Hello World” but now it feels like launching a satellite.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So in this article, we are going to build your first Node.js application from absolute scratch.&lt;/p&gt;

&lt;p&gt;No frameworks.&lt;br&gt;
No unnecessary complexity.&lt;br&gt;
No “just trust me bro” explanations.&lt;/p&gt;

&lt;p&gt;By the end, you will:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;install Node.js&lt;/li&gt;
&lt;li&gt;verify installation&lt;/li&gt;
&lt;li&gt;understand REPL&lt;/li&gt;
&lt;li&gt;create your first JavaScript file&lt;/li&gt;
&lt;li&gt;run it using Node&lt;/li&gt;
&lt;li&gt;build your first basic server&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And most importantly:&lt;br&gt;
you will actually understand what is happening.&lt;/p&gt;


&lt;h1&gt;
  
  
  First Understand: What Exactly Is Node.js?
&lt;/h1&gt;

&lt;p&gt;Before installing anything, let’s clear the biggest confusion.&lt;/p&gt;

&lt;p&gt;Node.js is &lt;strong&gt;not a programming language&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;You still write:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But normally JavaScript runs inside:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;browsers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Chrome&lt;/li&gt;
&lt;li&gt;Firefox&lt;/li&gt;
&lt;li&gt;Edge&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js allows JavaScript to run:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;outside the browser&lt;/li&gt;
&lt;li&gt;directly on your computer/server&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meaning JavaScript can now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;create servers&lt;/li&gt;
&lt;li&gt;work with files&lt;/li&gt;
&lt;li&gt;access databases&lt;/li&gt;
&lt;li&gt;build APIs&lt;/li&gt;
&lt;li&gt;handle backend logic&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Node.js gave JavaScript a job outside the browser.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Installing Node.js
&lt;/h1&gt;

&lt;p&gt;To install Node.js, go to the official website:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://nodejs.org/?utm_source=chatgpt.com" rel="noopener noreferrer"&gt;Node.js Official Website&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You will usually see:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;LTS Version&lt;/li&gt;
&lt;li&gt;Current Version&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Which One Should You Install?
&lt;/h2&gt;

&lt;p&gt;Install:&lt;/p&gt;
&lt;h1&gt;
  
  
  LTS Version
&lt;/h1&gt;

&lt;p&gt;LTS means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Long Term Support&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;stable&lt;/li&gt;
&lt;li&gt;tested&lt;/li&gt;
&lt;li&gt;safer for beginners and production apps&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The “Current” version contains newer features but may not always be stable.&lt;/p&gt;

&lt;p&gt;So unless you enjoy debugging mysterious problems at 2 AM:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;use LTS.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Installation Process
&lt;/h1&gt;

&lt;p&gt;The setup is mostly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Next&lt;/li&gt;
&lt;li&gt;Next&lt;/li&gt;
&lt;li&gt;Accept&lt;/li&gt;
&lt;li&gt;Install&lt;/li&gt;
&lt;li&gt;Finish&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Classic software installation ritual.&lt;/p&gt;

&lt;p&gt;Node.js installation also installs:&lt;/p&gt;
&lt;h1&gt;
  
  
  npm
&lt;/h1&gt;

&lt;p&gt;npm stands for:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Node Package Manager&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It helps install packages and libraries.&lt;/p&gt;

&lt;p&gt;We will use it later.&lt;/p&gt;


&lt;h1&gt;
  
  
  Checking If Node.js Is Installed
&lt;/h1&gt;

&lt;p&gt;After installation, open your terminal.&lt;/p&gt;

&lt;p&gt;You can use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CMD&lt;/li&gt;
&lt;li&gt;PowerShell&lt;/li&gt;
&lt;li&gt;Terminal&lt;/li&gt;
&lt;li&gt;VS Code terminal&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now type:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="s7a2d1"&lt;br&gt;
node -v&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Example output:



```bash id="x8s2k1"
v22.3.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js is successfully installed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now check npm:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="m3s8d1"&lt;br&gt;
npm -v&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Example:



```bash id="j3k8f2"
10.8.1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Done.&lt;/p&gt;

&lt;p&gt;Your machine is now officially ready for backend development.&lt;/p&gt;

&lt;p&gt;Congratulations.&lt;br&gt;
You now possess the power to accidentally break production servers in the future.&lt;/p&gt;


&lt;h1&gt;
  
  
  Understanding the Node REPL
&lt;/h1&gt;

&lt;p&gt;Before creating files, we need to understand something called:&lt;/p&gt;
&lt;h1&gt;
  
  
  REPL
&lt;/h1&gt;

&lt;p&gt;REPL stands for:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="r1a8s3"&lt;br&gt;
Read&lt;br&gt;
Evaluate&lt;br&gt;
Print&lt;br&gt;
Loop&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Sounds complicated.

It is actually very simple.

---

# What REPL Does

REPL is basically:

&amp;gt; a live JavaScript playground inside the terminal.

You type JavaScript.
Node.js executes it immediately.

---

# Start REPL

Open terminal and type:



```bash id="t9s7d1"
node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now your terminal changes into interactive mode.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="k8s2p4"&lt;/p&gt;

&lt;blockquote&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now try this:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="q1p9x2"&lt;br&gt;
2 + 2&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Output:



```text id="w2s8m4"
4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Try another:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="e9d2s1"&lt;br&gt;
console.log("Hello Shivam")&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Output:



```text id="y3f8c1"
Hello Shivam
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This is REPL.&lt;/p&gt;


&lt;h1&gt;
  
  
  Why REPL Is Useful
&lt;/h1&gt;

&lt;p&gt;REPL is great for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;testing code quickly&lt;/li&gt;
&lt;li&gt;checking logic&lt;/li&gt;
&lt;li&gt;debugging small things&lt;/li&gt;
&lt;li&gt;learning JavaScript basics&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of creating files repeatedly.&lt;/p&gt;

&lt;p&gt;Think of it like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;rough notebook work before final answer.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  Exit REPL
&lt;/h1&gt;

&lt;p&gt;To exit:&lt;/p&gt;

&lt;p&gt;Press:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="p0s9z1"&lt;br&gt;
CTRL + C&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


twice.

Or type:



```js id="n8d3x7"
.exit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Creating Your First Node.js File
&lt;/h1&gt;

&lt;p&gt;Now let’s create an actual JavaScript file.&lt;/p&gt;

&lt;p&gt;Create a folder:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="u7x2m9"&lt;br&gt;
my-first-node-app&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Inside it create a file:



```text id="z4m8k2"
app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now write:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="v8s1c2"&lt;br&gt;
console.log("Hello from Node.js");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Save the file.

---

# Running Your First Node.js Script

Open terminal inside the project folder.

Run:



```bash id="l2p8x1"
node app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="h8s2w4"&lt;br&gt;
Hello from Node.js&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


And there it is.

Your first Node.js program.

Tiny line.
Massive moment.

---

# What Actually Happened Here?

When you ran:



```bash id="d8f2s9"
node app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Node.js:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;opened the file&lt;/li&gt;
&lt;li&gt;read JavaScript code&lt;/li&gt;
&lt;li&gt;executed it using the V8 engine&lt;/li&gt;
&lt;li&gt;displayed output in terminal&lt;/li&gt;
&lt;/ol&gt;


&lt;h1&gt;
  
  
  Simple Execution Flow
&lt;/h1&gt;



&lt;p&gt;```text id="o8w2p1"&lt;br&gt;
app.js&lt;br&gt;
   ↓&lt;br&gt;
Node.js Runtime&lt;br&gt;
   ↓&lt;br&gt;
V8 JavaScript Engine&lt;br&gt;
   ↓&lt;br&gt;
Execution&lt;br&gt;
   ↓&lt;br&gt;
Terminal Output&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


That is the basic flow of Node.js.

---

# Understanding the Node Runtime

A lot of beginners think Node.js is only:

&amp;gt; “something that runs JavaScript.”

But internally it is much bigger.

Node.js contains:

* V8 JavaScript Engine
* APIs
* Event Loop
* File System Access
* Networking Capabilities

This combination creates a backend runtime environment.

Without Node.js:
JavaScript alone cannot:

* read files
* create servers
* access operating system features

Browsers intentionally restrict that for security reasons.

---

# Writing Your First Hello World Server

Now comes the fun part.

We are going to create an actual server.

Still without frameworks.

No Express.
No shortcuts.

Pure Node.js.

---

# Create Server File

Inside `app.js` write:



```js id="q7s1m2"
const http = require("http");

const server = http.createServer((req, res) =&amp;gt; {
    res.write("Hello World");
    res.end();
});

server.listen(3000, () =&amp;gt; {
    console.log("Server running on port 3000");
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now run:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```bash id="r9x2s1"&lt;br&gt;
node app.js&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Output:



```text id="j2m8d4"
Server running on port 3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  What Is Happening Here?
&lt;/h1&gt;

&lt;p&gt;Let’s break this down slowly.&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 1: Import HTTP Module
&lt;/h2&gt;



&lt;p&gt;```js id="f7d1p9"&lt;br&gt;
const http = require("http");&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Node.js has built-in modules.

`http` helps create web servers.

---

## Step 2: Create Server



```js id="a8s2d7"
http.createServer()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;This creates a server object.&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 3: Handle Request and Response
&lt;/h2&gt;



&lt;p&gt;```js id="m8s2p1"&lt;br&gt;
(req, res)&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


* `req` = incoming request
* `res` = outgoing response

---

## Step 4: Send Response



```js id="c2d9w1"
res.write("Hello World");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Sends data to browser.&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 5: End Response
&lt;/h2&gt;



&lt;p&gt;```js id="b7f3x1"&lt;br&gt;
res.end();&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Ends the response cycle.

Without this:
browser keeps waiting forever.

Like waiting for a friend who said:

&amp;gt; “5 minutes away.”

---

## Step 6: Start Server



```js id="t2w8n1"
server.listen(3000)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Starts server on port 3000.&lt;/p&gt;


&lt;h1&gt;
  
  
  Testing the Server
&lt;/h1&gt;

&lt;p&gt;Open browser and visit:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="w9s2l1"&lt;br&gt;
&lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


You will see:



```text id="v7d1m8"
Hello World
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;You officially built your first backend server.&lt;/p&gt;

&lt;p&gt;Not copied.&lt;br&gt;
Actually understood.&lt;/p&gt;

&lt;p&gt;Huge difference.&lt;/p&gt;


&lt;h1&gt;
  
  
  Understanding localhost
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;localhost&lt;/code&gt; means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;your own computer&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Port &lt;code&gt;3000&lt;/code&gt; is like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;a specific door of your application.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Different applications use different ports.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;3000&lt;/li&gt;
&lt;li&gt;5000&lt;/li&gt;
&lt;li&gt;8000&lt;/li&gt;
&lt;li&gt;8080&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Visual Flow of Server Request
&lt;/h1&gt;



&lt;p&gt;```text id="p2x7s4"&lt;br&gt;
Browser Request&lt;br&gt;
       ↓&lt;br&gt;
localhost:3000&lt;br&gt;
       ↓&lt;br&gt;
Node.js Server&lt;br&gt;
       ↓&lt;br&gt;
Handles Request&lt;br&gt;
       ↓&lt;br&gt;
Sends Response&lt;br&gt;
       ↓&lt;br&gt;
Browser Displays Output&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


This is the foundation of backend development.

Literally everything grows from here.

---

# Common Beginner Mistakes

## Forgetting to Save File

You change code.
Run program.
Nothing changes.

Because:

&amp;gt; file was never saved.

Classic beginner attack.

---

## Wrong File Name

Running:



```bash id="n7s2p1"
node index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;when file is actually:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="m8s1x4"&lt;br&gt;
app.js&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Result:
error.

---

## Port Already In Use

Sometimes port 3000 is occupied.

Error example:



```text id="k2d9p1"
EADDRINUSE
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Just change port:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```js id="f8w2d1"&lt;br&gt;
server.listen(5000)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Why Learning Core Node.js Matters

A lot of beginners jump directly into:

* Express
* Next.js
* NestJS

Without understanding Node.js basics.

Then one small error appears and everything collapses emotionally.

Understanding:

* server creation
* request handling
* runtime behavior
* modules

makes frameworks easier later.

Because frameworks are just:

&amp;gt; abstractions built on top of Node.js.

---

# Quick Revision

## Node.js Is:

* a JavaScript runtime
* used outside browsers
* used for backend development

---

## REPL Means:



```text id="x8c1v7"
Read
Evaluate
Print
Loop
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Interactive JavaScript environment.&lt;/p&gt;




&lt;h2&gt;
  
  
  Run Node File Using:
&lt;/h2&gt;



&lt;p&gt;```bash id="l9p2s1"&lt;br&gt;
node filename.js&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

## Create Basic Server Using:



```js id="u2s8m1"
http.createServer()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Access Server Using:
&lt;/h2&gt;



&lt;p&gt;```text id="g7s1x9"&lt;br&gt;
&lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


---

# Final Thoughts

Your first Node.js application is not just about printing:



```js id="n2d8s4"
Hello World
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is about understanding:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;how JavaScript runs outside browsers&lt;/li&gt;
&lt;li&gt;how servers work&lt;/li&gt;
&lt;li&gt;how requests and responses behave&lt;/li&gt;
&lt;li&gt;how backend systems begin&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every advanced backend application:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;authentication systems&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;chat apps&lt;/li&gt;
&lt;li&gt;streaming platforms&lt;/li&gt;
&lt;li&gt;real-time systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;starts from these exact basics.&lt;/p&gt;

&lt;p&gt;And honestly, backend development becomes far less scary once you realize:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A server is just code waiting for someone to say hello first.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How Node.js Handles Multiple Requests with a Single Thread</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sun, 10 May 2026 15:18:00 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/how-nodejs-handles-multiple-requests-with-a-single-thread-4e2f</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/how-nodejs-handles-multiple-requests-with-a-single-thread-4e2f</guid>
      <description>&lt;h1&gt;
  
  
  How Node.js Handles Multiple Requests with a Single Thread
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;“Wait… Node.js uses only one thread? Then how is it handling thousands of users without catching fire?”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;That is probably the first question every developer asks after hearing that Node.js is single-threaded.&lt;/p&gt;

&lt;p&gt;Because in most people’s minds:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;More users = More threads = More CPU pain = More suffering.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But Node.js walks into the room and says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Nah. I’ll do it differently.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And surprisingly… it works insanely well.&lt;/p&gt;

&lt;p&gt;In this blog, we will understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What “single-threaded” actually means&lt;/li&gt;
&lt;li&gt;How Node.js handles multiple users at the same time&lt;/li&gt;
&lt;li&gt;What the event loop really does&lt;/li&gt;
&lt;li&gt;How background workers help Node.js&lt;/li&gt;
&lt;li&gt;Why Node.js scales so well&lt;/li&gt;
&lt;li&gt;Why concurrency is not the same as parallelism&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And yes, we are going to use the legendary chef analogy because Node.js without the chef analogy is basically illegal.&lt;/p&gt;




&lt;h1&gt;
  
  
  First Understand: Thread vs Process
&lt;/h1&gt;

&lt;p&gt;Before jumping into Node.js, let’s clear one confusion.&lt;/p&gt;

&lt;h2&gt;
  
  
  Process
&lt;/h2&gt;

&lt;p&gt;A process is a running application.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Chrome running → one process&lt;/li&gt;
&lt;li&gt;VS Code running → another process&lt;/li&gt;
&lt;li&gt;Your Node.js server running → another process&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each process has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;its own memory&lt;/li&gt;
&lt;li&gt;its own resources&lt;/li&gt;
&lt;li&gt;its own execution environment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Think of a process as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A full restaurant building.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Thread
&lt;/h2&gt;

&lt;p&gt;A thread is a worker inside that process.&lt;/p&gt;

&lt;p&gt;Think:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One restaurant can have many chefs&lt;/li&gt;
&lt;li&gt;Each chef is a thread&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Traditional servers often create:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one thread per request&lt;/li&gt;
&lt;li&gt;or multiple threads handling users&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;More users → more threads.&lt;/p&gt;

&lt;p&gt;And eventually:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Your server starts sweating harder than students during viva exams.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Node.js Is Single-Threaded
&lt;/h1&gt;

&lt;p&gt;Node.js mainly runs on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one main thread&lt;/li&gt;
&lt;li&gt;one event loop&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meaning:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one thread handles JavaScript execution&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This sounds terrible at first.&lt;/p&gt;

&lt;p&gt;Because naturally you think:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“One thread? So one user at a time?”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;No.&lt;/p&gt;

&lt;p&gt;That is where Node.js becomes interesting.&lt;/p&gt;




&lt;h1&gt;
  
  
  The Biggest Misunderstanding About Node.js
&lt;/h1&gt;

&lt;p&gt;People hear:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Node.js is single-threaded”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And assume:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“It can only do one thing at a time.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Wrong.&lt;/p&gt;

&lt;p&gt;Node.js can handle &lt;strong&gt;many connections simultaneously&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The important word is:&lt;/p&gt;

&lt;h1&gt;
  
  
  Concurrency
&lt;/h1&gt;

&lt;p&gt;Not parallelism.&lt;/p&gt;




&lt;h1&gt;
  
  
  Concurrency vs Parallelism
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Parallelism
&lt;/h2&gt;

&lt;p&gt;Doing multiple tasks literally at the same time.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;4 chefs cooking 4 dishes simultaneously&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is parallelism.&lt;/p&gt;




&lt;h2&gt;
  
  
  Concurrency
&lt;/h2&gt;

&lt;p&gt;Handling multiple tasks efficiently by switching between them.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
A single chef:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;takes one order&lt;/li&gt;
&lt;li&gt;puts noodles to boil&lt;/li&gt;
&lt;li&gt;while noodles cook, takes another order&lt;/li&gt;
&lt;li&gt;while second dish cooks, serves another customer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One chef.&lt;br&gt;
Multiple customers.&lt;br&gt;
Nobody feels ignored.&lt;/p&gt;

&lt;p&gt;That is concurrency.&lt;/p&gt;

&lt;p&gt;And that…&lt;br&gt;
is exactly how Node.js works.&lt;/p&gt;


&lt;h1&gt;
  
  
  The Famous Chef Analogy
&lt;/h1&gt;

&lt;p&gt;Imagine a restaurant with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one super-fast chef&lt;/li&gt;
&lt;li&gt;many customers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now imagine customers ordering:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;pizza&lt;/li&gt;
&lt;li&gt;burgers&lt;/li&gt;
&lt;li&gt;pasta&lt;/li&gt;
&lt;li&gt;coffee&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If the chef waits for every dish completely before taking another order:&lt;br&gt;
the restaurant dies.&lt;/p&gt;

&lt;p&gt;Instead the chef:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;starts cooking one dish&lt;/li&gt;
&lt;li&gt;delegates slow work&lt;/li&gt;
&lt;li&gt;handles other customers meanwhile&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is Node.js.&lt;/p&gt;


&lt;h1&gt;
  
  
  How Node.js Actually Handles Requests
&lt;/h1&gt;

&lt;p&gt;Let’s say 5 users hit your server at the same time.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Requests arrive:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User 1&lt;/li&gt;
&lt;li&gt;User 2&lt;/li&gt;
&lt;li&gt;User 3&lt;/li&gt;
&lt;li&gt;User 4&lt;/li&gt;
&lt;li&gt;User 5&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js does not create:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;5 threads&lt;/li&gt;
&lt;li&gt;5 processes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;all requests enter the event loop system&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  The Event Loop: The Real Hero
&lt;/h1&gt;

&lt;p&gt;The event loop is basically the manager of Node.js.&lt;/p&gt;

&lt;p&gt;It continuously checks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"Is there any task ready to execute?"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If yes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;execute it&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If not:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;keep moving&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The event loop never sleeps.&lt;/p&gt;

&lt;p&gt;Unlike college students after lunch.&lt;/p&gt;




&lt;h1&gt;
  
  
  Simple Flow of Node.js
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Client Request
      ↓
Event Queue
      ↓
Event Loop
      ↓
Execute Callback
      ↓
Send Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Very simple architecture.&lt;/p&gt;

&lt;p&gt;But insanely powerful.&lt;/p&gt;




&lt;h1&gt;
  
  
  What Happens During Slow Operations?
&lt;/h1&gt;

&lt;p&gt;Now comes the magic.&lt;/p&gt;

&lt;p&gt;Suppose a request needs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;database query&lt;/li&gt;
&lt;li&gt;file reading&lt;/li&gt;
&lt;li&gt;API call&lt;/li&gt;
&lt;li&gt;network request&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These operations are slow.&lt;/p&gt;

&lt;p&gt;If Node.js handled them directly on the main thread:&lt;br&gt;
everything would freeze.&lt;/p&gt;

&lt;p&gt;But Node.js is smarter than that.&lt;/p&gt;


&lt;h1&gt;
  
  
  Delegating Work to Background Workers
&lt;/h1&gt;

&lt;p&gt;Node.js uses:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;libuv&lt;/li&gt;
&lt;li&gt;OS kernel&lt;/li&gt;
&lt;li&gt;thread pool&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;to handle heavy or slow operations.&lt;/p&gt;

&lt;p&gt;Meaning:&lt;/p&gt;

&lt;p&gt;When a slow task appears:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js delegates it&lt;/li&gt;
&lt;li&gt;background workers handle it&lt;/li&gt;
&lt;li&gt;main thread becomes free again&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Meanwhile:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event loop continues handling other users&lt;/li&gt;
&lt;/ul&gt;


&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Start&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;data.txt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;utf8&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;End&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Start
End
[file content]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;file reading is delegated&lt;/li&gt;
&lt;li&gt;Node.js does not wait&lt;/li&gt;
&lt;li&gt;callback executes later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is non-blocking behavior.&lt;/p&gt;




&lt;h1&gt;
  
  
  Visual Understanding
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Traditional Blocking Server
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User 1 → Wait
User 2 → Wait
User 3 → Wait
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Everything waits in line like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;government office token system.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Node.js Non-Blocking Server
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User 1 → delegated
User 2 → handled
User 3 → handled
User 4 → handled
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Main thread stays free.&lt;/p&gt;

&lt;p&gt;That is why Node.js feels fast.&lt;/p&gt;




&lt;h1&gt;
  
  
  Event Loop + Worker Interaction
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Request Comes In
       ↓
Event Loop Receives It
       ↓
Needs Slow Task?
   ↙         ↘
 No           Yes
 ↓             ↓
Execute      Send to Worker
Immediately        ↓
              Worker Finishes
                    ↓
            Callback Queue
                    ↓
              Event Loop Executes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This architecture is the heart of Node.js.&lt;/p&gt;




&lt;h1&gt;
  
  
  Why Node.js Scales So Well
&lt;/h1&gt;

&lt;p&gt;Now the important question.&lt;/p&gt;

&lt;p&gt;Why do companies use Node.js for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;chat apps&lt;/li&gt;
&lt;li&gt;streaming&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;realtime systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because Node.js is extremely efficient for I/O operations.&lt;/p&gt;




&lt;h1&gt;
  
  
  Traditional Multi-Threaded Servers Problem
&lt;/h1&gt;

&lt;p&gt;Imagine:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;10,000 users&lt;/li&gt;
&lt;li&gt;10,000 threads&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Your system becomes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;memory hungry&lt;/li&gt;
&lt;li&gt;CPU heavy&lt;/li&gt;
&lt;li&gt;expensive&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Threads are costly.&lt;/p&gt;

&lt;p&gt;Context switching between threads also costs performance.&lt;/p&gt;




&lt;h1&gt;
  
  
  Node.js Approach
&lt;/h1&gt;

&lt;p&gt;Instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one main thread&lt;/li&gt;
&lt;li&gt;async handling&lt;/li&gt;
&lt;li&gt;non-blocking architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Result:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;less memory usage&lt;/li&gt;
&lt;li&gt;faster request handling&lt;/li&gt;
&lt;li&gt;better scalability&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Why create 10,000 workers when one smart worker can manage the crowd?”&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  But Wait… Node.js Is Not Perfect
&lt;/h1&gt;

&lt;p&gt;Now let’s be honest.&lt;/p&gt;

&lt;p&gt;Node.js is amazing for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;realtime apps&lt;/li&gt;
&lt;li&gt;sockets&lt;/li&gt;
&lt;li&gt;streaming&lt;/li&gt;
&lt;li&gt;I/O-heavy applications&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But not ideal for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CPU-heavy calculations&lt;/li&gt;
&lt;li&gt;video rendering&lt;/li&gt;
&lt;li&gt;massive mathematical processing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CPU-heavy tasks block the single thread&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If one task takes too long:&lt;br&gt;
the event loop gets stuck.&lt;/p&gt;

&lt;p&gt;And then:&lt;br&gt;
every user suffers together.&lt;/p&gt;

&lt;p&gt;Like group punishment in school.&lt;/p&gt;




&lt;h1&gt;
  
  
  Example of Blocking Code
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This infinite loop blocks everything.&lt;/p&gt;

&lt;p&gt;Server becomes unresponsive.&lt;/p&gt;

&lt;p&gt;Because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event loop cannot continue&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  So What Makes Node.js Powerful?
&lt;/h1&gt;

&lt;p&gt;Not magic.&lt;/p&gt;

&lt;p&gt;Not “single thread speed”.&lt;/p&gt;

&lt;p&gt;The real power is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event-driven architecture&lt;/li&gt;
&lt;li&gt;non-blocking I/O&lt;/li&gt;
&lt;li&gt;async execution&lt;/li&gt;
&lt;li&gt;efficient concurrency&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That combination changed backend development forever.&lt;/p&gt;




&lt;h1&gt;
  
  
  Real-Life Example
&lt;/h1&gt;

&lt;p&gt;Think about a food delivery app.&lt;/p&gt;

&lt;p&gt;Thousands of users:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ordering food&lt;/li&gt;
&lt;li&gt;checking status&lt;/li&gt;
&lt;li&gt;making payments&lt;/li&gt;
&lt;li&gt;tracking delivery&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most operations are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;waiting for DB&lt;/li&gt;
&lt;li&gt;waiting for APIs&lt;/li&gt;
&lt;li&gt;waiting for network&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js handles these waiting tasks beautifully.&lt;/p&gt;

&lt;p&gt;Instead of wasting threads doing nothing.&lt;/p&gt;




&lt;h1&gt;
  
  
  Quick Revision
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Node.js Is:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;single-threaded for JavaScript execution&lt;/li&gt;
&lt;li&gt;event-driven&lt;/li&gt;
&lt;li&gt;non-blocking&lt;/li&gt;
&lt;li&gt;asynchronous&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Event Loop Does:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;manages execution&lt;/li&gt;
&lt;li&gt;handles callbacks&lt;/li&gt;
&lt;li&gt;keeps server responsive&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Background Workers Handle:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;file system operations&lt;/li&gt;
&lt;li&gt;database work&lt;/li&gt;
&lt;li&gt;network requests&lt;/li&gt;
&lt;li&gt;heavy async tasks&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Node.js Is Great For:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;realtime applications&lt;/li&gt;
&lt;li&gt;chat apps&lt;/li&gt;
&lt;li&gt;streaming&lt;/li&gt;
&lt;li&gt;websocket systems&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Node.js Is Bad For:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;CPU-intensive calculations&lt;/li&gt;
&lt;li&gt;long blocking operations&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;At first, Node.js sounds impossible.&lt;/p&gt;

&lt;p&gt;One thread handling thousands of users?&lt;/p&gt;

&lt;p&gt;Feels fake.&lt;/p&gt;

&lt;p&gt;But once you understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;event loop&lt;/li&gt;
&lt;li&gt;async behavior&lt;/li&gt;
&lt;li&gt;worker delegation&lt;/li&gt;
&lt;li&gt;non-blocking architecture&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;everything clicks.&lt;/p&gt;

&lt;p&gt;Node.js does not win by:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;doing more work.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It wins by:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;wasting less time waiting.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And honestly, that is a pretty smart philosophy even outside programming.&lt;/p&gt;

&lt;p&gt;Because half of software engineering is basically:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;managing waiting efficiently.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And Node.js mastered that game.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What is Node.js? JavaScript on the Server</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Sat, 09 May 2026 12:11:14 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/what-is-nodejs-javascript-on-the-server-5027</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/what-is-nodejs-javascript-on-the-server-5027</guid>
      <description>&lt;h1&gt;
  
  
  What Exactly is Node.js?
&lt;/h1&gt;

&lt;p&gt;hi its me&lt;/p&gt;

&lt;p&gt;so today's topic is about nodejs yes what is node js why is nodejs who is nodejs and how is node js&lt;br&gt;
everything about node js&lt;/p&gt;

&lt;p&gt;just kidding 😭&lt;/p&gt;

&lt;p&gt;we are just going to talk about node js like what is it really?&lt;br&gt;
is it JavaScript?&lt;br&gt;
is it a language?&lt;br&gt;
like exactly what it is&lt;/p&gt;

&lt;p&gt;so let begin i think i have talked shit for too long let start&lt;/p&gt;


&lt;h1&gt;
  
  
  First, What is Node.js?
&lt;/h1&gt;

&lt;p&gt;Node.js is a JavaScript runtime that allows JavaScript to run outside the browser — most commonly on servers, backend systems, and command-line tools.&lt;/p&gt;

&lt;p&gt;yes this is one of the best ways to explain node js (self appreciation moment waah wahi 😌)&lt;/p&gt;

&lt;p&gt;Important things to know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js is &lt;strong&gt;NOT&lt;/strong&gt; a programming language&lt;/li&gt;
&lt;li&gt;Node.js is &lt;strong&gt;NOT&lt;/strong&gt; a framework&lt;/li&gt;
&lt;li&gt;JavaScript is the programming language&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js is the environment/runtime that executes JavaScript on the server.&lt;/p&gt;


&lt;h1&gt;
  
  
  Originally JavaScript Was Only For Browsers
&lt;/h1&gt;

&lt;p&gt;Originally, JavaScript was created to make websites interactive.&lt;/p&gt;

&lt;p&gt;For example, browsers provide:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript engine&lt;/li&gt;
&lt;li&gt;Browser APIs&lt;/li&gt;
&lt;li&gt;DOM access&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;btn&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;All these things only work because browsers provide:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;document&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;window&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;DOM APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without a browser, these APIs do not exist.&lt;/p&gt;




&lt;h1&gt;
  
  
  Browser JavaScript Main Job
&lt;/h1&gt;

&lt;p&gt;Browser JavaScript's main job is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;interacting with webpages&lt;/li&gt;
&lt;li&gt;updating UI&lt;/li&gt;
&lt;li&gt;handling clicks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Clicked&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;simple life&lt;br&gt;
button clicked&lt;br&gt;
developer happy&lt;br&gt;
user confused why button exists&lt;br&gt;
perfect web development cycle 👍&lt;/p&gt;


&lt;h1&gt;
  
  
  What Does Node.js Do?
&lt;/h1&gt;

&lt;p&gt;Node.js main job is to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;handle servers&lt;/li&gt;
&lt;li&gt;access filesystem&lt;/li&gt;
&lt;li&gt;manage databases&lt;/li&gt;
&lt;li&gt;process requests&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;data.txt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;utf8&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So Node.js actually just takes the engine which helps browsers run JavaScript, adds some additional features on top of it, and boom — this is Node.js.&lt;/p&gt;




&lt;h1&gt;
  
  
  Why Was Node.js Made?
&lt;/h1&gt;

&lt;p&gt;Before Node.js was invented, JavaScript could only run inside browsers.&lt;/p&gt;

&lt;p&gt;Backend used other languages like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;PHP&lt;/li&gt;
&lt;li&gt;Java&lt;/li&gt;
&lt;li&gt;Ruby&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This separation led a man to create Node.js.&lt;/p&gt;

&lt;p&gt;BTW do u know who created Node.js?&lt;br&gt;
i know that just its a man (i am not going to say 😭)&lt;/p&gt;

&lt;p&gt;The problem was:&lt;/p&gt;

&lt;p&gt;frontend = JavaScript&lt;br&gt;
backend = different language&lt;/p&gt;

&lt;p&gt;So developers had to learn multiple languages.&lt;/p&gt;


&lt;h1&gt;
  
  
  How Node.js Changed Everything
&lt;/h1&gt;

&lt;p&gt;Node.js made it possible to run JavaScript outside the browser.&lt;/p&gt;

&lt;p&gt;Which means the same language could now be used for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;frontend&lt;/li&gt;
&lt;li&gt;backend&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now the same developer learns one language and can build full applications.&lt;/p&gt;

&lt;p&gt;and yes developers after this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“wait… i can suffer in only one language now?”&lt;br&gt;
revolutionary moment&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h1&gt;
  
  
  The V8 Engine
&lt;/h1&gt;

&lt;p&gt;Now the big chunk of separating JavaScript from the browser and running it outside the browser was made possible by the &lt;strong&gt;V8 Engine&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It basically helps compile JavaScript into machine code very efficiently.&lt;/p&gt;

&lt;p&gt;V8 was created by Google for Chrome.&lt;/p&gt;

&lt;p&gt;This is how the high-level flow looks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JavaScript Code
       ↓
V8 Engine
       ↓
Machine Code
       ↓
CPU Execution
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Important Thing To Know About V8
&lt;/h1&gt;

&lt;p&gt;V8 alone is &lt;strong&gt;NOT&lt;/strong&gt; Node.js.&lt;/p&gt;

&lt;p&gt;Node.js adds:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;filesystem access&lt;/li&gt;
&lt;li&gt;networking&lt;/li&gt;
&lt;li&gt;server APIs&lt;/li&gt;
&lt;li&gt;event loop&lt;/li&gt;
&lt;li&gt;operating system interaction&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This all happens on top of V8.&lt;/p&gt;

&lt;p&gt;This diagram might help:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JavaScript Code
       ↓
Node.js Runtime
       ↓
V8 Engine
       ↓
OS APIs / File System / Network
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Additional Features Provided By Node.js
&lt;/h1&gt;

&lt;p&gt;Some additional features provided by Node.js are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;handling servers&lt;/li&gt;
&lt;li&gt;accessing filesystem&lt;/li&gt;
&lt;li&gt;managing databases&lt;/li&gt;
&lt;li&gt;processing requests&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also helps Node.js handle:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;WebSockets&lt;/li&gt;
&lt;li&gt;chats&lt;/li&gt;
&lt;li&gt;live notifications&lt;/li&gt;
&lt;li&gt;streaming&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One of the best things Node.js gave us is &lt;strong&gt;NPM (Node Package Manager)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If i start explaining this it would require another blog because it is actually another rabbit hole 💀&lt;/p&gt;




&lt;h1&gt;
  
  
  How Node.js Works
&lt;/h1&gt;

&lt;h1&gt;
  
  
  Event-Driven Architecture
&lt;/h1&gt;

&lt;p&gt;One of Node.js’s biggest strengths is Event-driven architecture.&lt;/p&gt;

&lt;p&gt;Instead of blocking everything while waiting, Node.js uses events and callbacks.&lt;/p&gt;

&lt;p&gt;As u know Node.js is single-threaded, so this part should not act as a disadvantage.&lt;br&gt;
That’s why Event-Driven Architecture was introduced.&lt;/p&gt;


&lt;h1&gt;
  
  
  Traditional Blocking Example
&lt;/h1&gt;

&lt;p&gt;Imagine a server handling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;file reading&lt;/li&gt;
&lt;li&gt;database query&lt;/li&gt;
&lt;li&gt;API request&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Traditional systems may wait for one task to finish before handling another.&lt;/p&gt;

&lt;p&gt;Basically:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Do work
Wait
Do next work
Wait again
Cry a little
Repeat
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  How Node.js Handles This
&lt;/h1&gt;

&lt;p&gt;Node.js works differently.&lt;/p&gt;

&lt;p&gt;It says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Start task and continue doing other work.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;When the task finishes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;callback runs&lt;/li&gt;
&lt;li&gt;event triggers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;fs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;data.txt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;utf8&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Other code running&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Other code running
(file content later)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Node.js does not block execution while waiting for file reading.&lt;/p&gt;




&lt;h1&gt;
  
  
  Event Loop Idea (Simple)
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Task Starts
      ↓
Node.js Continues Other Work
      ↓
Task Finishes
      ↓
Callback Executed
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes Node.js efficient for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;concurrent requests&lt;/li&gt;
&lt;li&gt;I/O-heavy applications&lt;/li&gt;
&lt;li&gt;real-time systems&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Browser JavaScript vs Node.js
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Browser JavaScript
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Runs inside browser&lt;/li&gt;
&lt;li&gt;Uses DOM APIs&lt;/li&gt;
&lt;li&gt;Handles UI&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Node.js
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Runs on server&lt;/li&gt;
&lt;li&gt;Uses OS APIs&lt;/li&gt;
&lt;li&gt;Handles backend logic&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;Node.js transformed JavaScript from:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;a browser-only language&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;into:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;a full backend runtime&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;By combining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the V8 engine&lt;/li&gt;
&lt;li&gt;event-driven architecture&lt;/li&gt;
&lt;li&gt;non-blocking I/O&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Node.js became one of the most popular backend technologies in the world.&lt;/p&gt;

&lt;p&gt;It allowed developers to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;use JavaScript everywhere&lt;/li&gt;
&lt;li&gt;build scalable applications&lt;/li&gt;
&lt;li&gt;create fast real-time systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;so now this is the end&lt;/p&gt;

&lt;p&gt;if u liked the blog please let me know in comments&lt;br&gt;
like the video and subscribe me for more knowledge 😭&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Handling File Uploads in Express with Multer</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Fri, 08 May 2026 17:24:41 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/handling-file-uploads-in-express-with-multer-4fon</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/handling-file-uploads-in-express-with-multer-4fon</guid>
      <description>&lt;p&gt;yooo its me &lt;/p&gt;

&lt;p&gt;the writter of this blog &lt;/p&gt;

&lt;p&gt;today blog is all about multer yes that module which is kinda having 3 or 4 million download a week yes it has &lt;/p&gt;

&lt;p&gt;so let see what i am going to cover in this blog&lt;/p&gt;

&lt;p&gt;1) how file transfer from frontend to backend&lt;br&gt;
2) what is multer&lt;br&gt;
3) how to use multer&lt;br&gt;
4) kinda eveyrthing about multer and how to use it&lt;/p&gt;


&lt;h1&gt;
  
  
  first let biginner
&lt;/h1&gt;
&lt;h1&gt;
  
  
  1) how file travels from frontend to backend
&lt;/h1&gt;

&lt;p&gt;Normal HTTP requests usually send text like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"shivam"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;which is done by express by adding things like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;urlencoded&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for text-based data.&lt;/p&gt;

&lt;p&gt;This is easy.&lt;/p&gt;

&lt;p&gt;But files are NOT text.&lt;/p&gt;

&lt;p&gt;A PNG file is raw binary bytes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;89 50 4E 47 ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So browsers needed a special way to send everything in proper way:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;text&lt;/li&gt;
&lt;li&gt;files&lt;/li&gt;
&lt;li&gt;metadata&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;all together in ONE request.&lt;/p&gt;

&lt;p&gt;and that will be done using:&lt;/p&gt;

&lt;h1&gt;
  
  
  multipart/form-data
&lt;/h1&gt;

&lt;p&gt;why called multipart?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;because it contain multi form data 😭&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;yes this is why it is called like that&lt;/p&gt;




&lt;h1&gt;
  
  
  Now Let’s Break This Down
&lt;/h1&gt;

&lt;h1&gt;
  
  
  Part 1
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Disposition: form-data; name="username"

shivam
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;shivam&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Part 2 (File)
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Disposition: form-data; name="image"; filename="cat.png"
Content-Type: image/png
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is metadata.&lt;/p&gt;

&lt;p&gt;It tells:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;field name = image&lt;/li&gt;
&lt;li&gt;filename = cat.png&lt;/li&gt;
&lt;li&gt;mime type = image/png&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then comes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;(binary bytes)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Actual file data.&lt;/p&gt;




&lt;h1&gt;
  
  
  How Data Actually Travels
&lt;/h1&gt;

&lt;p&gt;HTTP body travels as STREAMS&lt;/p&gt;

&lt;p&gt;NOT like a giant packet.&lt;/p&gt;

&lt;p&gt;Instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Chunk 1
Chunk 2
Chunk 3
Chunk 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Dispo
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sition: form-data;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name="image"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Everything arrives gradually.&lt;/p&gt;




&lt;h1&gt;
  
  
  Node.js Receives It as Stream
&lt;/h1&gt;

&lt;p&gt;Inside Node.js req is actually a readable stream.&lt;/p&gt;

&lt;p&gt;You can literally do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example you may see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Buffer&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="mi"&gt;57&lt;/span&gt; &lt;span class="mi"&gt;65&lt;/span&gt; &lt;span class="mi"&gt;62&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These are raw bytes.&lt;/p&gt;




&lt;h1&gt;
  
  
  now the best part comes
&lt;/h1&gt;

&lt;p&gt;how a developer should handle this&lt;/p&gt;

&lt;p&gt;see express is not having anything inbuilt to handle this&lt;/p&gt;

&lt;p&gt;but there is one module:&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;code&gt;multer&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;it helps us convert that raw bit into proper data&lt;/p&gt;

&lt;p&gt;kinda like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;fieldname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;encoding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;7bit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image/png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/a8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;34567&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  let see how multer does that
&lt;/h1&gt;

&lt;p&gt;Multer acts as Middleware between request and route handler.&lt;/p&gt;

&lt;p&gt;multer parse this stream manually like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reads chunks&lt;/li&gt;
&lt;li&gt;Detects boundaries&lt;/li&gt;
&lt;li&gt;Separates parts&lt;/li&gt;
&lt;li&gt;Reads headers&lt;/li&gt;
&lt;li&gt;Extracts metadata&lt;/li&gt;
&lt;li&gt;Writes file bytes to disk&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  How File Is Recreated
&lt;/h1&gt;

&lt;p&gt;Suppose multer extracts:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;89 50 4E 47 ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(this data is after cleaning all the other data this is only the file data)&lt;/p&gt;

&lt;p&gt;These are PNG bytes.&lt;/p&gt;

&lt;p&gt;It simply writes them into a file using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;fs.writeFile()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;or stream pipe&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because files ARE just bytes.&lt;/p&gt;

&lt;p&gt;yes it is that simple 😭&lt;/p&gt;




&lt;h1&gt;
  
  
  SUPER IMPORTANT UNDERSTANDING
&lt;/h1&gt;

&lt;p&gt;A file is NOT special.&lt;/p&gt;

&lt;p&gt;A file is just:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Raw bytes + metadata
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cat.png&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;is just:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[bytes] stored on disk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  now this is how you implment multer code
&lt;/h1&gt;

&lt;h1&gt;
  
  
  first : Install Multer
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;multer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Step 2: Basic Express Setup
&lt;/h1&gt;

&lt;p&gt;like Create a server.js file and write this code inside it&lt;/p&gt;

&lt;h1&gt;
  
  
  Code:
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;multer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Server running&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Step 3: Create Uploads Folder
&lt;/h1&gt;

&lt;p&gt;Inside project create a /uploads folder (basically here we are going to save the data)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project/
│
├── uploads/
├── server.js
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;inshort: This (/uploads) folder stores uploaded files.&lt;/p&gt;




&lt;h1&gt;
  
  
  Step 4: Basic Multer Setup
&lt;/h1&gt;

&lt;p&gt;as u can sence the multer is a function and we are destcting it and giving the dest paramter a value&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;dest&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;this is Very basic configuration.&lt;/p&gt;

&lt;h1&gt;
  
  
  What dest Does ?
&lt;/h1&gt;

&lt;p&gt;it just say store data inside uploads&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dest: "uploads/"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Store uploaded files inside uploads folder"&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  Step 5: Single File Upload
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/upload&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;File uploaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  first Understanding upload.single()
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;it means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accept only one file from frontend&lt;/li&gt;
&lt;li&gt;frontend Input field name must be "image"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;this is how Frontend HTML Form look likes&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;form&lt;/span&gt; &lt;span class="na"&gt;action=&lt;/span&gt;&lt;span class="s"&gt;"/upload"&lt;/span&gt; &lt;span class="na"&gt;method=&lt;/span&gt;&lt;span class="s"&gt;"POST"&lt;/span&gt; &lt;span class="na"&gt;enctype=&lt;/span&gt;&lt;span class="s"&gt;"multipart/form-data"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"file"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"image"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    Upload
  &lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Important thing to notice:&lt;/p&gt;

&lt;h1&gt;
  
  
  enctype
&lt;/h1&gt;

&lt;p&gt;This is very critical&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;enctype="multipart/form-data"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without this File upload fails.&lt;/p&gt;

&lt;p&gt;after all this thing Uploaded file appears inside uploads/&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;8f3a12d8a91b2c.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Multer auto-generates random names by default.&lt;/p&gt;




&lt;h1&gt;
  
  
  this is how you Access Uploaded File Info
&lt;/h1&gt;

&lt;p&gt;After upload req.file contains file metadata.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Example req.file Object
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;fieldname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;photo.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;encoding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;7bit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image/png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a83b12d81.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/a83b12d81.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;12000&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Step 6: Custom Storage Configuration
&lt;/h1&gt;

&lt;p&gt;Basic dest works&lt;/p&gt;

&lt;p&gt;But usually developers need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Custom names&lt;/li&gt;
&lt;li&gt;Better folder control&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;diskStorage&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Custom Storage Setup
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;diskStorage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;

  &lt;span class="na"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="na"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  first Understand destination()
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;its just work same as dest it define where the folder should be kept&lt;/p&gt;




&lt;h1&gt;
  
  
  second think to notice is Understanding filename()
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;so using this we can make your own custom file name&lt;/p&gt;

&lt;p&gt;Use Date.now()&lt;/p&gt;

&lt;p&gt;because Without unique naming:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;image.png
image.png
image.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Files might overwrite each other.&lt;/p&gt;

&lt;p&gt;Using Date.now() prevents collisions.&lt;/p&gt;




&lt;h1&gt;
  
  
  Connect Storage to Multer
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;storage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Complete Single Upload Example
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;multer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;diskStorage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;

  &lt;span class="na"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="na"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/upload&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Upload successful&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Multiple File Uploads
&lt;/h1&gt;

&lt;p&gt;Sometimes users upload multiple files.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product gallery&lt;/li&gt;
&lt;li&gt;Multiple PDFs&lt;/li&gt;
&lt;li&gt;Photo collections&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Use upload.array() it basically help to take multiple file from frontend&lt;/p&gt;

&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/uploads&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;images&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Files uploaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;images&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;basically means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Field name = "images"&lt;/li&gt;
&lt;li&gt;Maximum 5 files&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Frontend will handle it like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"file"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"images"&lt;/span&gt; &lt;span class="na"&gt;multiple&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for accessing Single upload we can use req.file&lt;/p&gt;

&lt;p&gt;but for Multiple uploads we can use req.files&lt;/p&gt;

&lt;p&gt;because files become an array&lt;/p&gt;




&lt;h1&gt;
  
  
  3) Uploading Different Fields
&lt;/h1&gt;

&lt;p&gt;so now comes when the user upload data from diff types like JPG , PNG , pdf ,etc so to handle that we can use upload.fields()&lt;/p&gt;

&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/profile&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fields&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;avatar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;maxCount&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;resume&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;maxCount&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;]),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Uploaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;this is how u can access it&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;avatar&lt;/span&gt;
&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;files&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;resume&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  File Validation
&lt;/h1&gt;

&lt;p&gt;Very important.&lt;/p&gt;

&lt;p&gt;now there are some precaution u can take like Never trust uploads blindly.&lt;/p&gt;

&lt;h1&gt;
  
  
  1) Restrict File Types
&lt;/h1&gt;

&lt;p&gt;in this only certain file type are allowed to be entered into the server&lt;/p&gt;

&lt;p&gt;this is how u can implement that&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fileFilter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Only images allowed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Connect Filter
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="nx"&gt;storage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;fileFilter&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  File Size Limits
&lt;/h1&gt;

&lt;h1&gt;
  
  
  2) Prevent huge uploads.
&lt;/h1&gt;

&lt;p&gt;see the stoarage has a limit and if user uplaod data which is in high amount there is a huge possiblity that stoarage limit will get hit so to restrict that we can use limits&lt;/p&gt;

&lt;p&gt;like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="nx"&gt;storage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;

  &lt;span class="na"&gt;limits&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;fileSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;5MB limit&lt;/p&gt;




&lt;h1&gt;
  
  
  3) Serving Uploaded Files
&lt;/h1&gt;

&lt;p&gt;Uploading alone is not enough&lt;/p&gt;

&lt;p&gt;Browser must access files too then we can use the express.static() function&lt;/p&gt;

&lt;p&gt;any folder name passed inside static the data inside that folder will be accessable to the user&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/uploads&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;static&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Access File via URL
&lt;/h1&gt;

&lt;p&gt;Suppose file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;uploads/photo.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;URL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://localhost:3000/uploads/photo.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now browser can open uploaded image.&lt;/p&gt;




&lt;h1&gt;
  
  
  Folder Structure
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project/
│
├── uploads/
│   ├── image1.png
│   ├── image2.jpg
│
├── server.js
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Common Multer Methods
&lt;/h1&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;single()&lt;/td&gt;
&lt;td&gt;One file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;array()&lt;/td&gt;
&lt;td&gt;Multiple files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;fields()&lt;/td&gt;
&lt;td&gt;Multiple named fields&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;none()&lt;/td&gt;
&lt;td&gt;Only text fields&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;any()&lt;/td&gt;
&lt;td&gt;Accept all files&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h1&gt;
  
  
  What is upload.any() ?
&lt;/h1&gt;

&lt;p&gt;upload.any() accepts every uploaded file.&lt;/p&gt;

&lt;p&gt;really Not recommended for beginners like there will be so many issue u cannot imagine stik to the traditional part&lt;/p&gt;




&lt;h1&gt;
  
  
  Common Beginner Mistakes
&lt;/h1&gt;

&lt;h1&gt;
  
  
  1. Forgetting uploads Folder
&lt;/h1&gt;

&lt;p&gt;Multer cannot save files without giving a proper place to store it&lt;/p&gt;




&lt;h1&gt;
  
  
  2. Wrong Field Name
&lt;/h1&gt;

&lt;p&gt;Frontend:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name="photo"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Backend:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Upload will fails.&lt;/p&gt;

&lt;p&gt;Names must match.&lt;/p&gt;




&lt;h1&gt;
  
  
  3. Missing enctype
&lt;/h1&gt;

&lt;p&gt;( ooh i have done this so many times)&lt;/p&gt;

&lt;p&gt;Without multipart/form-data file upload breaks.&lt;/p&gt;

&lt;p&gt;rember this properly&lt;/p&gt;




&lt;h1&gt;
  
  
  4. Forgetting express.static()
&lt;/h1&gt;

&lt;p&gt;Files upload successfully but URLs fail.&lt;/p&gt;




&lt;h1&gt;
  
  
  5. Using Original Filenames
&lt;/h1&gt;

&lt;p&gt;( atleast use Date.now()) dont be lazy&lt;/p&gt;




&lt;h1&gt;
  
  
  Upload Flow Diagram
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Selects File
        ↓
Browser Sends multipart/form-data
        ↓
Multer Middleware Executes
        ↓
File Saved in uploads/
        ↓
req.file Created
        ↓
Route Handler Executes
        ↓
Response Sent Back
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Final Understanding
&lt;/h1&gt;

&lt;p&gt;Multer is middleware that helps Express handle:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;multipart/form-data
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It processes uploaded files, stores them, and makes file metadata available inside request objects.&lt;/p&gt;

&lt;p&gt;so this is the end of the blog if u liked the blog with comment it down and if there is something bad just let me know&lt;/p&gt;

&lt;p&gt;and also like the blog follow for more such blog&lt;/p&gt;

&lt;p&gt;bye bye&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Storing Uploaded Files and Serving Them in Express</title>
      <dc:creator>Shivam Yadav</dc:creator>
      <pubDate>Fri, 08 May 2026 11:56:17 +0000</pubDate>
      <link>https://dev.to/shivam_yadav_8e22bf5bf987/storing-uploaded-files-and-serving-them-in-express-a64</link>
      <guid>https://dev.to/shivam_yadav_8e22bf5bf987/storing-uploaded-files-and-serving-them-in-express-a64</guid>
      <description>&lt;p&gt;yooo its me shivam&lt;/p&gt;

&lt;p&gt;and today we are going to talk about file uploads yessss&lt;/p&gt;

&lt;p&gt;it might sound a piece of shit topic but it is hard okay so lets start 😭&lt;/p&gt;




&lt;h1&gt;
  
  
  first lets start with frontend and backend flow
&lt;/h1&gt;

&lt;p&gt;frontend send the file to the backend&lt;/p&gt;

&lt;p&gt;backend receives&lt;/p&gt;

&lt;p&gt;thing to be handled:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;taking the data properly (and when i say data i mean file)&lt;/li&gt;
&lt;li&gt;after that store them properly&lt;/li&gt;
&lt;li&gt;and in the end serve that data to the user properly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;okay this is the main goal&lt;/p&gt;




&lt;h1&gt;
  
  
  first let understand one thing
&lt;/h1&gt;

&lt;p&gt;and that is how the data will come from frontend to backend&lt;/p&gt;

&lt;p&gt;Normal HTTP requests usually send:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"shivam"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is easy.&lt;/p&gt;

&lt;p&gt;But files are NOT text.&lt;/p&gt;

&lt;p&gt;A PNG file is raw binary bytes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;89 50 4E 47 ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So browsers needed a special way to send everything in proper way:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;text&lt;/li&gt;
&lt;li&gt;files&lt;/li&gt;
&lt;li&gt;metadata&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;all together in &lt;strong&gt;ONE&lt;/strong&gt; request.&lt;/p&gt;

&lt;p&gt;and that will be done using:&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;code&gt;multipart/form-data&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;why called multipart?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;because it contain multi form data 😭&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;yes this is why it is called like that&lt;/p&gt;




&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;

&lt;p&gt;Part 1 → username&lt;/p&gt;

&lt;p&gt;Part 2 → image file&lt;/p&gt;

&lt;p&gt;Part 3 → another field&lt;/p&gt;

&lt;p&gt;Each part is separated by using a special string called:&lt;/p&gt;

&lt;h2&gt;
  
  
  Boundary
&lt;/h2&gt;

&lt;p&gt;like for example&lt;/p&gt;

&lt;p&gt;When browser sends:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;form&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;FormData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;username&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;shivam&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The browser internally creates something like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="nf"&gt;POST&lt;/span&gt; &lt;span class="nn"&gt;/upload&lt;/span&gt; &lt;span class="k"&gt;HTTP&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="m"&gt;1.1&lt;/span&gt;
&lt;span class="na"&gt;Content-Type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s"&gt;multipart/form-data; boundary=----WebKit123&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;this is how the body look like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Disposition: form-data; name="username"

shivam

------WebKit123
Content-Disposition: form-data; name="image"; filename="cat.png"
Content-Type: image/png

&amp;lt;binary file bytes here&amp;gt;

------WebKit123--
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Now Let’s Break This Down
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Part 1
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Disposition: form-data; name="username"

shivam
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;shivam&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Part 2 (File)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;------WebKit123
Content-Disposition: form-data; name="image"; filename="cat.png"
Content-Type: image/png
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is metadata.&lt;/p&gt;

&lt;p&gt;It tells:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;field name = image&lt;/li&gt;
&lt;li&gt;filename = cat.png&lt;/li&gt;
&lt;li&gt;mime type = image/png&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then comes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;(binary bytes)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Actual file data.&lt;/p&gt;




&lt;h1&gt;
  
  
  How Data Actually Travels
&lt;/h1&gt;

&lt;p&gt;HTTP body travels as &lt;strong&gt;STREAMS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;NOT like a giant packet.&lt;/p&gt;

&lt;p&gt;Instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Chunk 1
Chunk 2
Chunk 3
Chunk 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;------WebKit123
Content-Dispo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sition: form-data;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name="image"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Everything arrives gradually.&lt;/p&gt;




&lt;h1&gt;
  
  
  Node.js Receives It as Stream
&lt;/h1&gt;

&lt;p&gt;Inside Node.js &lt;code&gt;req&lt;/code&gt; is actually a readable stream.&lt;/p&gt;

&lt;p&gt;You can literally do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;data&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example you may see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Buffer 2d 2d 2d 2d 57 65 62 4b&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These are raw bytes.&lt;/p&gt;




&lt;h1&gt;
  
  
  now the best part comes
&lt;/h1&gt;

&lt;p&gt;how a developer should handle this&lt;/p&gt;

&lt;p&gt;see express is not having anything inbuilt to handle this&lt;/p&gt;

&lt;p&gt;but there is one module:&lt;/p&gt;

&lt;h1&gt;
  
  
  &lt;code&gt;multer&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;it helps us convert that raw bit into proper data&lt;/p&gt;

&lt;p&gt;kinda like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;fieldname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;encoding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;7bit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image/png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;a8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/a8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;34567&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  let see how multer does that
&lt;/h1&gt;

&lt;p&gt;multer parse this stream manually like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reads chunks&lt;/li&gt;
&lt;li&gt;Detects boundaries&lt;/li&gt;
&lt;li&gt;Separates parts&lt;/li&gt;
&lt;li&gt;Reads headers&lt;/li&gt;
&lt;li&gt;Extracts metadata&lt;/li&gt;
&lt;li&gt;Writes file bytes to disk&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  How File Is Recreated
&lt;/h1&gt;

&lt;p&gt;Suppose multer extracts:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;89 50 4E 47 ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(this data is after cleaning all the other data this is only the file data)&lt;/p&gt;

&lt;p&gt;These are PNG bytes.&lt;/p&gt;

&lt;p&gt;It simply writes them into a file using:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;fs.writeFile()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;or stream pipe&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because files ARE just bytes.&lt;/p&gt;

&lt;p&gt;yes it is that simple 😭&lt;/p&gt;




&lt;h1&gt;
  
  
  SUPER IMPORTANT UNDERSTANDING
&lt;/h1&gt;

&lt;p&gt;A file is NOT special.&lt;/p&gt;

&lt;p&gt;A file is just:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Raw bytes + metadata
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cat.png&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;is just:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[bytes] stored on disk
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  now this is how the multer code looks like
&lt;/h1&gt;

&lt;h1&gt;
  
  
  Backend Setup
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;express&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;multer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;express&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;diskStorage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="na"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;storage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/upload&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;File uploaded&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Understanding &lt;code&gt;upload.single("image")&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;expect ONE file&lt;/li&gt;
&lt;li&gt;field name should be &lt;code&gt;"image"&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Frontend looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"file"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"image"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;must match exactly.&lt;/p&gt;




&lt;h1&gt;
  
  
  lets understand this code
&lt;/h1&gt;

&lt;p&gt;first there is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;diskStorage&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;this means what it says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;going to store on disk 😭&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;this code specify the destination&lt;/p&gt;

&lt;p&gt;here it is &lt;code&gt;/uploads&lt;/code&gt; folder&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then comes filename&lt;/p&gt;

&lt;p&gt;(just give a name to that file)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then passing that into multer function&lt;/p&gt;

&lt;p&gt;and in the end using it as middleware like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  req.file
&lt;/h1&gt;

&lt;p&gt;and one more thing&lt;/p&gt;

&lt;p&gt;in the next route handler u can access the file using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;it contains:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;fieldname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;originalname&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;image/png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;filename&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;uploads/8f91c.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;34567&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Multer creates this object manually.&lt;/p&gt;




&lt;h1&gt;
  
  
  everything in short
&lt;/h1&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;destination&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Defines where files will be stored.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;uploads/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;code&gt;filename&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Creates unique file names.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;171523432-photo.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This prevents filename collisions.&lt;/p&gt;

&lt;p&gt;Without unique names:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;image.png
image.png
image.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Files would overwrite each other.&lt;/p&gt;




&lt;h1&gt;
  
  
  Creating Upload Middleware
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;storage&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Upload Route
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/upload&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;File uploaded successfully&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Understanding &lt;code&gt;upload.single()&lt;/code&gt;
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;single&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Expect one file&lt;/li&gt;
&lt;li&gt;Field name must be &lt;code&gt;"image"&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Frontend:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"file"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"image"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Names must match.&lt;/p&gt;




&lt;h1&gt;
  
  
  Folder Structure After Upload
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project/
│
├── uploads/
│   ├── 171523432-profile.png
│   └── 171523500-resume.pdf
│
├── server.js
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Visual Flow
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Browser Request
       ↓
/uploads/photo.png
       ↓
Express Static Middleware
       ↓
Find File in uploads Folder
       ↓
Return File Response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  now one of the best parts
&lt;/h1&gt;

&lt;p&gt;storing that file 😭&lt;/p&gt;

&lt;p&gt;we have two option whenever it comes to storing any file&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Local Storage&lt;/li&gt;
&lt;li&gt;External Storage&lt;/li&gt;
&lt;/ol&gt;




&lt;h1&gt;
  
  
  1. Local Storage
&lt;/h1&gt;

&lt;p&gt;Files are stored directly inside the server filesystem.&lt;/p&gt;

&lt;p&gt;Example structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;project/
│
├── uploads/
│   ├── image1.png
│   ├── profile.jpg
│   └── resume.pdf
│
├── server.js
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The uploaded file physically exists inside the project folder.&lt;/p&gt;




&lt;h1&gt;
  
  
  2. External Storage
&lt;/h1&gt;

&lt;p&gt;Instead of storing files on the server:&lt;/p&gt;

&lt;p&gt;Files are stored in external services like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS S3&lt;/li&gt;
&lt;li&gt;Cloudinary&lt;/li&gt;
&lt;li&gt;Firebase Storage&lt;/li&gt;
&lt;li&gt;DigitalOcean Spaces&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Flow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Upload
     ↓
Express Server
     ↓
Cloud Storage
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  The Problem After Uploading
&lt;/h1&gt;

&lt;p&gt;Now files exist on the server.&lt;/p&gt;

&lt;p&gt;But users still cannot access them from browser.&lt;/p&gt;

&lt;p&gt;Why?&lt;/p&gt;

&lt;p&gt;Because Express does NOT expose folders automatically.&lt;/p&gt;




&lt;h1&gt;
  
  
  Serving Static Files in Express
&lt;/h1&gt;

&lt;p&gt;To make uploaded files accessible:&lt;/p&gt;

&lt;p&gt;Use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;static&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Static File Serving
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;use&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/uploads&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;express&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;static&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uploads&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This line is extremely important.&lt;/p&gt;

&lt;p&gt;It tells Express:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Serve files inside uploads folder publicly"&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  How Static Serving Works
&lt;/h1&gt;

&lt;p&gt;Suppose file exists:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;uploads/photo.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now browser can access:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://localhost:3000/uploads/photo.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Express automatically serves the file.&lt;/p&gt;




&lt;h1&gt;
  
  
  Important Security Considerations
&lt;/h1&gt;

&lt;p&gt;File uploads are dangerous if handled carelessly 😭&lt;/p&gt;

&lt;p&gt;Never trust uploaded files blindly.&lt;/p&gt;




&lt;h1&gt;
  
  
  1. Validate File Types
&lt;/h1&gt;

&lt;p&gt;Users may upload:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;virus.exe&lt;/li&gt;
&lt;li&gt;malware.js&lt;/li&gt;
&lt;li&gt;dangerous.php&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of images.&lt;/p&gt;

&lt;p&gt;Use file filtering.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fileFilter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mimetype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;image&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;cb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Only images allowed&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  2. Limit File Size
&lt;/h1&gt;

&lt;p&gt;Huge uploads can crash servers.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;multer&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="nx"&gt;storage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;limits&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;fileSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;5MB limit.&lt;/p&gt;




&lt;h1&gt;
  
  
  3. Rename Uploaded Files
&lt;/h1&gt;

&lt;p&gt;Never trust original filenames.&lt;/p&gt;

&lt;p&gt;Bad:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;myvirus.exe
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Good:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;171523432-file.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  4. Avoid Executable Uploads
&lt;/h1&gt;

&lt;p&gt;Never allow:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;.exe&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.bat&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.sh&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.php&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These may become security risks.&lt;/p&gt;




&lt;h1&gt;
  
  
  5. Store Sensitive Files Privately
&lt;/h1&gt;

&lt;p&gt;Not all uploads should be public.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aadhaar cards&lt;/li&gt;
&lt;li&gt;Passports&lt;/li&gt;
&lt;li&gt;Medical documents&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These should NOT use public static serving.&lt;/p&gt;

&lt;p&gt;Instead:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Store privately&lt;/li&gt;
&lt;li&gt;Add authentication before access&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Public vs Private File Access
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Public Access
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/uploads/image.png
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Anyone with URL can access it.&lt;/p&gt;

&lt;p&gt;Used for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Product images&lt;/li&gt;
&lt;li&gt;Profile photos&lt;/li&gt;
&lt;li&gt;Blog thumbnails&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Private Access
&lt;/h2&gt;

&lt;p&gt;but only this it require is authorization 😭&lt;/p&gt;

&lt;p&gt;Example flow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Login
    ↓
Authentication Check
    ↓
Server Sends File
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Used for sensitive documents.&lt;/p&gt;




&lt;h1&gt;
  
  
  final flow of working
&lt;/h1&gt;

&lt;h1&gt;
  
  
  High-Level Upload Flow
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User Selects File
        ↓
Frontend Sends Multipart Request
        ↓
Multer Processes File
        ↓
File Stored in uploads/
        ↓
Express Static Middleware Exposes File
        ↓
Browser Accesses File via URL
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  one thing i did not talk about
&lt;/h1&gt;

&lt;p&gt;when we store data on external provider so how user will get that data?&lt;/p&gt;

&lt;p&gt;best thing is:&lt;/p&gt;

&lt;p&gt;when u upload user file to that provider that provider gives u a URL of that image&lt;/p&gt;

&lt;p&gt;so u just need to send that to frontend&lt;/p&gt;

&lt;p&gt;and that URL can be inside image tag&lt;/p&gt;

&lt;p&gt;then u can see it 😭&lt;/p&gt;

&lt;p&gt;so everything is done:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;how to take the data&lt;/li&gt;
&lt;li&gt;how to store it&lt;/li&gt;
&lt;li&gt;how to give it back to the user&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  so i think this is the end
&lt;/h1&gt;

&lt;p&gt;if u like the blog please let me know in comment&lt;/p&gt;

&lt;p&gt;and like the blog&lt;/p&gt;

&lt;p&gt;and subscribe me 😭&lt;/p&gt;

&lt;p&gt;i have alot of knowledge i want to share&lt;/p&gt;

&lt;p&gt;so if u want to be part of it then subscribe&lt;/p&gt;

&lt;h3&gt;
  
  
  happy happy bye reader
&lt;/h3&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
