<?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: Ramanand Thakur</title>
    <description>The latest articles on DEV Community by Ramanand Thakur (@ramanand).</description>
    <link>https://dev.to/ramanand</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%2F797657%2F703a8920-3afb-4b6b-b362-68aaa3196a75.jpeg</url>
      <title>DEV Community: Ramanand Thakur</title>
      <link>https://dev.to/ramanand</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ramanand"/>
    <language>en</language>
    <item>
      <title>🚀 Getting Started with Node.js – from “What is this?” to your first web server</title>
      <dc:creator>Ramanand Thakur</dc:creator>
      <pubDate>Wed, 03 Jun 2026 13:01:13 +0000</pubDate>
      <link>https://dev.to/ramanand/getting-started-with-nodejs-from-what-is-this-to-your-first-web-server-4mlh</link>
      <guid>https://dev.to/ramanand/getting-started-with-nodejs-from-what-is-this-to-your-first-web-server-4mlh</guid>
      <description>&lt;p&gt;Node.js lets us run JavaScript outside the browser. In this guide, we’ll install Node, learn the terminal, explore npm, build a real web server, understand event-driven programming, and serve static files — all before jumping into Express.js 🔥&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Why Node.js feels magical
&lt;/h2&gt;

&lt;p&gt;In the previous article, we mentioned that JavaScript was designed to run only in browsers. Then Node.js came along, and suddenly everyone was like, “Hold on… JavaScript can run on servers too?!”&lt;/p&gt;

&lt;p&gt;Until then, JavaScript meant:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;button clicks&lt;/li&gt;
&lt;li&gt;animations&lt;/li&gt;
&lt;li&gt;form validation&lt;/li&gt;
&lt;li&gt;frontend headaches 😅&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But with &lt;strong&gt;Node.js&lt;/strong&gt;, suddenly JavaScript could:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;read files&lt;/li&gt;
&lt;li&gt;create APIs&lt;/li&gt;
&lt;li&gt;talk to databases&lt;/li&gt;
&lt;li&gt;stream videos&lt;/li&gt;
&lt;li&gt;run backend servers&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this article, I’ll walk you through the &lt;em&gt;exact beginner path&lt;/em&gt; I wish someone had shown me earlier.&lt;/p&gt;

&lt;p&gt;By the end, you’ll:&lt;/p&gt;

&lt;p&gt;✅ Install Node.js&lt;br&gt;
✅ Understand the terminal without fear&lt;br&gt;
✅ Learn npm properly&lt;br&gt;
✅ Build your own Node server&lt;br&gt;
✅ Understand routing&lt;br&gt;
✅ Serve HTML/CSS files&lt;br&gt;
✅ Be fully ready for Express.js&lt;/p&gt;


&lt;h2&gt;
  
  
  📌 Prerequisites
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;Basic JavaScript knowledge&lt;/li&gt;
&lt;li&gt;A laptop 🙂&lt;/li&gt;
&lt;li&gt;Node.js v20+ recommended&lt;/li&gt;
&lt;li&gt;☕ Coffee (strongly recommended)&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  🌍 What Exactly is Node.js?
&lt;/h2&gt;

&lt;p&gt;Node.js is a &lt;strong&gt;JavaScript runtime&lt;/strong&gt; built on Chrome’s V8 engine.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It allows JavaScript to run outside the browser.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Instead of running only inside Chrome or Firefox, JavaScript can now run directly on your computer or server.&lt;/p&gt;


&lt;h3&gt;
  
  
  📊 Browser JavaScript vs Node.js
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet2q3a0bnl6ewp365oqy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet2q3a0bnl6ewp365oqy.png" alt="Browser Javascript Vs Node.js" width="651" height="946"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  💻 Getting Node.js
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🟢 Step 1: Download Node
&lt;/h3&gt;

&lt;p&gt;Visit:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nodejs.org" rel="noopener noreferrer"&gt;Node.js Official Website&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Download the &lt;strong&gt;LTS version&lt;/strong&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 Production note: Always prefer the LTS (Long Term Support) version for stability.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h3&gt;
  
  
  🟢 Step 2: Verify Installation
&lt;/h3&gt;

&lt;p&gt;Open terminal and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node &lt;span class="nt"&gt;-v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;v20.11.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now check npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nt"&gt;-v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;10.2.4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Boom 💥 Node installed successfully.&lt;/p&gt;




&lt;h2&gt;
  
  
  🖥️ Using the Terminal
&lt;/h2&gt;

&lt;p&gt;We all were scared of it initially 😄&lt;/p&gt;

&lt;p&gt;Most beginners avoid the terminal initially.&lt;/p&gt;

&lt;p&gt;I did too.&lt;/p&gt;

&lt;p&gt;Huge mistake.&lt;/p&gt;

&lt;p&gt;The terminal is basically your direct communication line with the operating system.&lt;/p&gt;

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

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;GUI&lt;/th&gt;
&lt;th&gt;Terminal&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Clicking buttons&lt;/td&gt;
&lt;td&gt;Typing commands&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Slower&lt;/td&gt;
&lt;td&gt;Faster&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Beginner friendly&lt;/td&gt;
&lt;td&gt;Developer powerful&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  📂 Essential Terminal Commands
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Windows
&lt;/h3&gt;

&lt;p&gt;Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;PowerShell&lt;/li&gt;
&lt;li&gt;Windows Terminal&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  macOS/Linux
&lt;/h3&gt;

&lt;p&gt;Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Terminal app&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  📌 Most Useful Commands
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Show current folder&lt;/span&gt;
&lt;span class="nb"&gt;pwd&lt;/span&gt;

&lt;span class="c"&gt;# List files&lt;/span&gt;
&lt;span class="nb"&gt;ls&lt;/span&gt;

&lt;span class="c"&gt;# Change folder&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;folder-name

&lt;span class="c"&gt;# Create folder&lt;/span&gt;
&lt;span class="nb"&gt;mkdir &lt;/span&gt;my-project

&lt;span class="c"&gt;# Create file&lt;/span&gt;
&lt;span class="nb"&gt;touch &lt;/span&gt;app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  📊 Terminal Workflow
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtuzabym0clbcbc056zx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhtuzabym0clbcbc056zx.png" alt="Terminal workflow" width="800" height="132"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ Editors (VS Code or Claude)
&lt;/h2&gt;

&lt;p&gt;You technically &lt;em&gt;can&lt;/em&gt; write Node code in Notepad.&lt;/p&gt;

&lt;p&gt;But please don’t torture yourself 😭.&lt;/p&gt;




&lt;h3&gt;
  
  
  🟦 VS Code (Recommended)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://code.visualstudio.com" rel="noopener noreferrer"&gt;Visual Studio Code&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Why developers love it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Free&lt;/li&gt;
&lt;li&gt;Great extensions&lt;/li&gt;
&lt;li&gt;Git integration&lt;/li&gt;
&lt;li&gt;Built-in terminal&lt;/li&gt;
&lt;li&gt;Excellent Node support&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🔌 Extensions I Recommend
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Extension&lt;/th&gt;
&lt;th&gt;Why&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;ESLint&lt;/td&gt;
&lt;td&gt;Catch JavaScript mistakes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Prettier&lt;/td&gt;
&lt;td&gt;Auto formatting&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Thunder Client&lt;/td&gt;
&lt;td&gt;API testing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GitLens&lt;/td&gt;
&lt;td&gt;Git superpowers&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  🤖 Claude Editor
&lt;/h3&gt;

&lt;p&gt;Many developers also use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://claude.ai" rel="noopener noreferrer"&gt;Claude AI&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;debugging help&lt;/li&gt;
&lt;li&gt;refactoring&lt;/li&gt;
&lt;li&gt;documentation generation&lt;/li&gt;
&lt;li&gt;learning concepts faster&lt;/li&gt;
&lt;li&gt;vibe coding (We'll discuss this in detail in future articles)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But honestly?&lt;/p&gt;

&lt;p&gt;VS Code + Node is still the gold standard for most beginners.&lt;/p&gt;




&lt;h2&gt;
  
  
  📦 Understanding npm
&lt;/h2&gt;

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

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Node Package Manager&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is where Node becomes insanely powerful.&lt;/p&gt;

&lt;p&gt;npm lets you install reusable packages instead of reinventing the wheel every time.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧱 Create Your First Project
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;node-demo
&lt;span class="nb"&gt;cd &lt;/span&gt;node-demo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Initialize project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm init &lt;span class="nt"&gt;-y&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  📄 What is package.json?
&lt;/h3&gt;

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

&lt;blockquote&gt;
&lt;p&gt;The Aadhaar card or identity card of your project 😄&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;ul&gt;
&lt;li&gt;project name&lt;/li&gt;
&lt;li&gt;dependencies&lt;/li&gt;
&lt;li&gt;scripts&lt;/li&gt;
&lt;li&gt;version&lt;/li&gt;
&lt;li&gt;metadata&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  📌 Example package.json
&lt;/h3&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;"node-demo"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"main"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"app.js"&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;h3&gt;
  
  
  📊 How npm Works
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fal6k6sd7pmgy3lnmda7v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fal6k6sd7pmgy3lnmda7v.png" alt="NPM workflow" width="480" height="960"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 A Simple Web Server with Node.js
&lt;/h2&gt;

&lt;p&gt;Now the fun part begins 🔥&lt;/p&gt;




&lt;h3&gt;
  
  
  👋 Hello World Server
&lt;/h3&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ✅ Minimal Node Server
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Node.js v20&lt;/span&gt;

&lt;span class="c1"&gt;// Import Node's built-in HTTP module&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;http&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="s1"&gt;http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Create server&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;response&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="c1"&gt;// Send HTTP status code&lt;/span&gt;
  &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="c1"&gt;// Send response body&lt;/span&gt;
  &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World from Node.js 🚀&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="c1"&gt;// Start listening on port 3000&lt;/span&gt;
&lt;span class="nx"&gt;server&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="c1"&gt;// Callback runs once server starts&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="s1"&gt;Server running at http://localhost:3000&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;h3&gt;
  
  
  ▶️ Run the Server
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node app.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http://localhost:3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And there it is 🎉&lt;/p&gt;

&lt;p&gt;Your first Node web server.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚡ Understanding Event-Driven Programming
&lt;/h2&gt;

&lt;p&gt;This is THE core Node concept.&lt;/p&gt;

&lt;p&gt;And honestly?&lt;/p&gt;

&lt;p&gt;This is where many folks get confused initially.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧠 Traditional Programming
&lt;/h3&gt;

&lt;p&gt;Traditional systems often wait for one task to finish before moving to the next.&lt;/p&gt;

&lt;p&gt;Like standing in a railway booking queue 🚉.&lt;/p&gt;

&lt;p&gt;One person at a time.&lt;/p&gt;




&lt;h3&gt;
  
  
  🚀 Node’s Event-Driven Model
&lt;/h3&gt;

&lt;p&gt;Node works differently.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;it listens for events&lt;/li&gt;
&lt;li&gt;processes callbacks&lt;/li&gt;
&lt;li&gt;handles async tasks efficiently&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📊 Event Loop Explained
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjppxownxk5wi9swohhsi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjppxownxk5wi9swohhsi.png" alt="Event loop diagram" width="800" height="930"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  📌 Simple Event Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Node.js Events Module&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;EventEmitter&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="s1"&gt;events&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Create event emitter instance&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emitter&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;EventEmitter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Listen for custom event&lt;/span&gt;
&lt;span class="nx"&gt;emitter&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="s1"&gt;orderPlaced&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="s1"&gt;🍕 Pizza order received&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="c1"&gt;// Emit event&lt;/span&gt;
&lt;span class="nx"&gt;emitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;orderPlaced&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 shell"&gt;&lt;code&gt;🍕 Pizza order received
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧭 Routing in Node.js
&lt;/h2&gt;

&lt;p&gt;Routing means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Sending different responses for different URLs.&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;URL&lt;/th&gt;
&lt;th&gt;Response&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Home page&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/about&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;About page&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/contact&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Contact page&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  ✅ Basic Routing Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app.js&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;http&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="s1"&gt;http&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;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&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="c1"&gt;// Homepage route&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;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&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;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;🏠 Welcome Home&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="c1"&gt;// About page route&lt;/span&gt;
  &lt;span class="k"&gt;else&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;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/about&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;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&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;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ℹ️ About Us&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="c1"&gt;// Fallback route&lt;/span&gt;
  &lt;span class="k"&gt;else&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;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;404&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&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;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;❌ Page Not Found&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;span class="c1"&gt;// Start server&lt;/span&gt;
&lt;span class="nx"&gt;server&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="s1"&gt;Server started&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;h3&gt;
  
  
  📊 How Routing Works
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F53352fsps8lzclllbqx5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F53352fsps8lzclllbqx5.png" alt="Routing workflow" width="800" height="384"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  📂 Serving Static Resources
&lt;/h2&gt;

&lt;p&gt;Static resources include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Images&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without this, websites would look like 1998 😅.&lt;/p&gt;




&lt;h2&gt;
  
  
  📁 Project Structure
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;project/
│
├── app.js
├── public/
│   ├── index.html
│   └── style.css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ✅ Serve HTML File
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Node.js v20&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;http&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="s1"&gt;http&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;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="s1"&gt;fs&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;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&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="c1"&gt;// Read HTML file&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="s1"&gt;./public/index.html&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;error&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="c1"&gt;// Handle file read errors&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;error&lt;/span&gt;&lt;span class="p"&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;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;500&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;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Internal Server Error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

      &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Send HTML response&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;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/html&lt;/span&gt;&lt;span class="dl"&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;end&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="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;server&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;h2&gt;
  
  
  📄 Example HTML
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Node Demo&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;🚀 Node.js Server&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🎨 Serve CSS File
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Simplified CSS serving example&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;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/style.css&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;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="s1"&gt;./public/style.css&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;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/css&lt;/span&gt;&lt;span class="dl"&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;end&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🤯 What Broke When I Tried This
&lt;/h2&gt;

&lt;p&gt;TBH, many things 😂&lt;/p&gt;




&lt;h2&gt;
  
  
  ❌ Mistake 1: Wrong File Path
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ENOENT: no such file or directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✅ Fix
&lt;/h3&gt;

&lt;p&gt;Always verify folder structure carefully.&lt;/p&gt;




&lt;h2&gt;
  
  
  ❌ Mistake 2: Port Already in Use
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;EADDRINUSE
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✅ Fix
&lt;/h3&gt;

&lt;p&gt;Another app is using the same port.&lt;/p&gt;

&lt;p&gt;Simply, change the port number. (3000 to something else which is not getting used 😄)&lt;/p&gt;




&lt;h2&gt;
  
  
  ❌ Mistake 3: Browser Keeps Loading Forever
&lt;/h2&gt;

&lt;p&gt;Usually happens because:&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;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;end&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;was forgotten.&lt;/p&gt;




&lt;h2&gt;
  
  
  📈 Why Express.js Was Needed
&lt;/h2&gt;

&lt;p&gt;After writing enough raw Node servers, developers realized:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Dude… this is becoming repetitive.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Things became messy quickly:&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;repetitive file handling&lt;/li&gt;
&lt;li&gt;middleware chaos&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s exactly why &lt;strong&gt;Express.js&lt;/strong&gt; became popular.&lt;/p&gt;




&lt;h2&gt;
  
  
  📊 Raw Node vs Express
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjj0am5qsp3iz6lz6nuq4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjj0am5qsp3iz6lz6nuq4.png" alt="Node vs Express" width="799" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Express dramatically reduced boilerplate code.&lt;/p&gt;




&lt;h2&gt;
  
  
  ☕ Caffeine Scale
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Topic&lt;/th&gt;
&lt;th&gt;Complexity&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Installing Node&lt;/td&gt;
&lt;td&gt;☕&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;npm basics&lt;/td&gt;
&lt;td&gt;☕☕&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Routing&lt;/td&gt;
&lt;td&gt;☕☕&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Event loop&lt;/td&gt;
&lt;td&gt;☕☕☕☕&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🎯 Onward to Express.js
&lt;/h2&gt;

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

&lt;p&gt;✅ Node installation&lt;br&gt;
✅ Terminal basics&lt;br&gt;
✅ npm&lt;br&gt;
✅ HTTP servers&lt;br&gt;
✅ Event-driven programming&lt;br&gt;
✅ Routing&lt;br&gt;
✅ Static files&lt;/p&gt;

&lt;p&gt;You’re officially ready for:&lt;/p&gt;

&lt;h3&gt;
  
  
  🚀 Express.js
&lt;/h3&gt;

&lt;p&gt;But don’t worry — if you missed anything, we’ll come back to some of these topics individually and go way deeper 🚀&lt;/p&gt;

&lt;p&gt;And trust me…&lt;/p&gt;

&lt;p&gt;Once you use Express routing after raw Node routing, it feels like upgrading from manual gear driving to automatic 😄&lt;/p&gt;




&lt;h2&gt;
  
  
  📌 Key Takeaways
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Node.js lets JavaScript run outside browsers&lt;/li&gt;
&lt;li&gt;npm powers the massive Node ecosystem&lt;/li&gt;
&lt;li&gt;Node uses event-driven architecture&lt;/li&gt;
&lt;li&gt;You can build web servers with built-in modules&lt;/li&gt;
&lt;li&gt;Routing and static file serving are fundamental backend concepts&lt;/li&gt;
&lt;li&gt;Express simplifies all of this beautifully&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📢 What’s Next?
&lt;/h2&gt;

&lt;p&gt;In the next article we’ll cover:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Scaffolding&lt;/li&gt;
&lt;li&gt;Installing Express&lt;/li&gt;
&lt;li&gt;Request/response lifecycle&lt;/li&gt;
&lt;li&gt;Middleware&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  💬 Your Turn
&lt;/h2&gt;

&lt;p&gt;What confused you most when learning Node?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npm?&lt;/li&gt;
&lt;li&gt;terminal?&lt;/li&gt;
&lt;li&gt;async programming?&lt;/li&gt;
&lt;li&gt;routing?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And did you also use incorrect file path at least once? 😅&lt;/p&gt;




&lt;h2&gt;
  
  
  📣 Call To Action
&lt;/h2&gt;

&lt;p&gt;If this article helped you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;⭐ Bookmark it&lt;/li&gt;
&lt;li&gt;🔁 Share with a beginner developer&lt;/li&gt;
&lt;li&gt;🚀 Build your own tiny Node server today&lt;/li&gt;
&lt;li&gt;👨‍💻 Follow for more backend deep dives&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>node</category>
      <category>npm</category>
      <category>eventdriven</category>
      <category>javascript</category>
    </item>
    <item>
      <title>🚀 Introduction to Express.js – the framework that changed Node forever</title>
      <dc:creator>Ramanand Thakur</dc:creator>
      <pubDate>Tue, 26 May 2026 12:34:00 +0000</pubDate>
      <link>https://dev.to/ramanand/introduction-to-expressjs-the-framework-that-changed-node-forever-35cn</link>
      <guid>https://dev.to/ramanand/introduction-to-expressjs-the-framework-that-changed-node-forever-35cn</guid>
      <description>&lt;p&gt;&lt;strong&gt;Express.js&lt;/strong&gt; made backend development in JavaScript ridiculously simple. Before Express, building APIs in Node felt like assembling IKEA furniture without the manual 😅.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 The JavaScript Revolution
&lt;/h2&gt;

&lt;p&gt;There was a time when JavaScript lived only inside browsers.&lt;/p&gt;

&lt;p&gt;Frontend? JavaScript.&lt;br&gt;
Backend? Mostly PHP, Java, Python, Ruby, or .NET.&lt;/p&gt;

&lt;p&gt;Then came &lt;strong&gt;Node.js&lt;/strong&gt; in 2009 and everything changed.&lt;/p&gt;

&lt;p&gt;Suddenly, developers could write JavaScript on both:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🖥️ Client side (browser)&lt;/li&gt;
&lt;li&gt;🌐 Server side (backend)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Yes, this was a massive shift.&lt;/p&gt;

&lt;p&gt;Teams no longer needed separate frontend and backend language expertise. One language could handle:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;UI rendering&lt;/li&gt;
&lt;li&gt;API development&lt;/li&gt;
&lt;li&gt;Real-time chat apps&lt;/li&gt;
&lt;li&gt;Streaming&lt;/li&gt;
&lt;li&gt;File handling&lt;/li&gt;
&lt;li&gt;Even CLI tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And this is where &lt;strong&gt;Express.js&lt;/strong&gt; entered like a Bollywood hero in slow motion 🎬.&lt;/p&gt;


&lt;h2&gt;
  
  
  ⚡ Introducing Express
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Express.js&lt;/strong&gt; is a lightweight web framework built on top of Node.js.&lt;/p&gt;

&lt;p&gt;Think of Node.js as the raw engine of a car 🚗.&lt;/p&gt;

&lt;p&gt;Express gives you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Steering wheel&lt;/li&gt;
&lt;li&gt;Dashboard&lt;/li&gt;
&lt;li&gt;Brakes&lt;/li&gt;
&lt;li&gt;Air conditioning&lt;/li&gt;
&lt;li&gt;And sane defaults 😄&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without Express, building APIs in pure Node means manually handling:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Routing&lt;/li&gt;
&lt;li&gt;Headers&lt;/li&gt;
&lt;li&gt;Request parsing&lt;/li&gt;
&lt;li&gt;Response formatting&lt;/li&gt;
&lt;li&gt;Middleware chaining&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Express simplifies all of that.&lt;/p&gt;


&lt;h2&gt;
  
  
  📦 Installing Express
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Node.js v18+&lt;/li&gt;
&lt;li&gt;Basic JavaScript knowledge (Watch any quick 30 minutes tutorial on YT)&lt;/li&gt;
&lt;li&gt;npm installed&lt;/li&gt;
&lt;li&gt;☕ 2 cups of coffee&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  🛠️ Your First Express Server
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;express-demo
&lt;span class="nb"&gt;cd &lt;/span&gt;express-demo

npm init &lt;span class="nt"&gt;-y&lt;/span&gt;
npm &lt;span class="nb"&gt;install &lt;/span&gt;express
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now create &lt;code&gt;server.js&lt;/code&gt;.&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="c1"&gt;// Node v20 + Express 4&lt;/span&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="s1"&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;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="c1"&gt;// Route handler&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;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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="s1"&gt;Hello from Express 🚀&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="c1"&gt;// Start server&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="s1"&gt;Server running on http://localhost:3000&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;Run it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node server.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open browser:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;http://localhost:3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And boom 💥 — backend server ready in less than 10 lines.&lt;/p&gt;




&lt;h2&gt;
  
  
  🌍 Server-side vs Client-side Applications
&lt;/h2&gt;

&lt;p&gt;This is where many beginners get confused.&lt;/p&gt;

&lt;p&gt;Let’s simplify it.&lt;/p&gt;

&lt;h3&gt;
  
  
  🖥️ Client-side Applications
&lt;/h3&gt;

&lt;p&gt;Client-side apps run in the browser.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Angular&lt;/li&gt;
&lt;li&gt;Vue&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Responsibilities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Rendering UI&lt;/li&gt;
&lt;li&gt;Handling clicks&lt;/li&gt;
&lt;li&gt;Animations&lt;/li&gt;
&lt;li&gt;Calling APIs&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  🌐 Server-side Applications
&lt;/h3&gt;

&lt;p&gt;Server-side apps run on servers.&lt;/p&gt;

&lt;p&gt;Responsibilities:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Database operations&lt;/li&gt;
&lt;li&gt;Authentication&lt;/li&gt;
&lt;li&gt;Business logic&lt;/li&gt;
&lt;li&gt;API responses&lt;/li&gt;
&lt;li&gt;Security&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📊 How They Talk To Each Other
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxzmdmac0oxj35zdtwwq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxzmdmac0oxj35zdtwwq.png" alt="client-server-communication" width="798" height="129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This separation is the backbone of modern web apps.&lt;/p&gt;




&lt;h2&gt;
  
  
  📜 A Brief History of Express
&lt;/h2&gt;

&lt;p&gt;Express was created by TJ Holowaychuk around 2010.&lt;/p&gt;

&lt;p&gt;Back then, Node.js was still young.&lt;/p&gt;

&lt;p&gt;Developers loved Node’s speed, but building servers directly with Node’s &lt;code&gt;http&lt;/code&gt; module was painful.&lt;/p&gt;

&lt;p&gt;Here’s how raw Node looked:&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="c1"&gt;// Pure Node.js HTTP server 😵&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;http&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="s1"&gt;http&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;server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createServer&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="k"&gt;if &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;url&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&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;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeHead&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&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="s1"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&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;end&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello World&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;span class="nx"&gt;server&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;p&gt;Not terrible… until your app grows to 50 routes and middleware chains.&lt;/p&gt;

&lt;p&gt;Express solved that elegantly.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚔️ Node.js vs Traditional Web Servers
&lt;/h2&gt;

&lt;p&gt;Before Node.js, most web servers worked like this:&lt;/p&gt;

&lt;h3&gt;
  
  
  🧵 Traditional Web Servers (Apache, PHP, Java)
&lt;/h3&gt;

&lt;p&gt;Request Flow&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4isy8x2qrqrgs6u28nw1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4isy8x2qrqrgs6u28nw1.png" alt="traditional web server flow" width="430" height="529"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Every request often created:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;New thread&lt;/li&gt;
&lt;li&gt;More memory usage&lt;/li&gt;
&lt;li&gt;Context switching overhead&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Works fine… until traffic explodes 🚦.&lt;/p&gt;




&lt;h3&gt;
  
  
  ⚡ Node.js Architecture
&lt;/h3&gt;

&lt;p&gt;Request Flow&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjtx5l8v4ytt012tj271.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjtx5l8v4ytt012tj271.png" alt="nodejs server" width="800" height="202"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Node uses:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Single-threaded event loop&lt;/li&gt;
&lt;li&gt;Non-blocking I/O&lt;/li&gt;
&lt;li&gt;Async processing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is why Node became insanely popular for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Real-time apps&lt;/li&gt;
&lt;li&gt;APIs&lt;/li&gt;
&lt;li&gt;Streaming&lt;/li&gt;
&lt;li&gt;Chat systems&lt;/li&gt;
&lt;li&gt;Notification services&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ☕ Caffeine Scale
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Topic&lt;/th&gt;
&lt;th&gt;Complexity&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Basic Express routes&lt;/td&gt;
&lt;td&gt;☕&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Middleware&lt;/td&gt;
&lt;td&gt;☕☕&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Event loop internals&lt;/td&gt;
&lt;td&gt;☕☕☕☕&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🌱 The Node Ecosystem
&lt;/h2&gt;

&lt;p&gt;One of Node’s biggest strengths is the ecosystem.&lt;/p&gt;

&lt;p&gt;The package manager &lt;strong&gt;npm&lt;/strong&gt; exploded in popularity because developers could share reusable libraries instantly.&lt;/p&gt;

&lt;p&gt;Today there are millions of packages.&lt;/p&gt;

&lt;p&gt;Some famous ones:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Package&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;&lt;code&gt;express&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Web framework&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;mongoose&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;MongoDB ORM&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;socket.io&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Real-time communication&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;dotenv&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Environment variables&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;jsonwebtoken&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;JWT authentication&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;nodemon&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Auto restart during development&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  📄 Licensing
&lt;/h2&gt;

&lt;p&gt;Express is open-source software released under the &lt;strong&gt;MIT License&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;p&gt;✅ Free to use&lt;br&gt;
✅ Free to modify&lt;br&gt;
✅ Free for commercial projects&lt;/p&gt;

&lt;p&gt;This openness helped Express spread rapidly across startups and enterprises alike.&lt;/p&gt;

&lt;p&gt;Even huge companies adopted it because there were no painful licensing restrictions.&lt;/p&gt;




&lt;h2&gt;
  
  
  ❌ Common Beginner Mistakes
&lt;/h2&gt;

&lt;p&gt;(Try these fixes you face issue running your first express backend)&lt;/p&gt;

&lt;h3&gt;
  
  
  1️⃣ Forgetting Middleware
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ req.body will be undefined&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="s1"&gt;/login&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;body&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;h3&gt;
  
  
  ✅ Correct Version
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Express 4.18+&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;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;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="s1"&gt;/login&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;body&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="s1"&gt;Body parsed correctly&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;h3&gt;
  
  
  2️⃣ Blocking the Event Loop
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ Very dangerous for performance&lt;/span&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;span class="c1"&gt;// Infinite blocking loop 💥&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Node works best when operations stay async.&lt;/p&gt;




&lt;h2&gt;
  
  
  📊 Express vs Traditional Backend Frameworks
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Express.js&lt;/th&gt;
&lt;th&gt;Traditional Java Frameworks&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Language&lt;/td&gt;
&lt;td&gt;JavaScript&lt;/td&gt;
&lt;td&gt;Java&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Performance&lt;/td&gt;
&lt;td&gt;Excellent for I/O&lt;/td&gt;
&lt;td&gt;Excellent for CPU-heavy work&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Learning Curve&lt;/td&gt;
&lt;td&gt;Easy&lt;/td&gt;
&lt;td&gt;Moderate&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Boilerplate&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;td&gt;Often verbose&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Real-time Support&lt;/td&gt;
&lt;td&gt;Excellent&lt;/td&gt;
&lt;td&gt;Good&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Startup Speed&lt;/td&gt;
&lt;td&gt;Fast&lt;/td&gt;
&lt;td&gt;Slower&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  🎯 Conclusion
&lt;/h2&gt;

&lt;p&gt;Express.js became popular because it made backend development:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Simpler&lt;/li&gt;
&lt;li&gt;Faster&lt;/li&gt;
&lt;li&gt;More readable&lt;/li&gt;
&lt;li&gt;More JavaScript-friendly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Key takeaways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 Express simplified Node.js web development&lt;/li&gt;
&lt;li&gt;🌐 Node introduced a non-blocking server model&lt;/li&gt;
&lt;li&gt;📦 npm created one of the biggest developer ecosystems ever&lt;/li&gt;
&lt;li&gt;⚡ Express is ideal for APIs and real-time applications&lt;/li&gt;
&lt;li&gt;🔓 Open-source licensing accelerated adoption worldwide&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And honestly? Once you build your first Express API, going back to raw HTTP servers feels like manually washing clothes after buying a washing machine 😄.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔥 What’s Next?
&lt;/h2&gt;

&lt;p&gt;In the next part, we’ll dive deeper in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using the Terminal&lt;/li&gt;
&lt;li&gt;Using Editor&lt;/li&gt;
&lt;li&gt;Using NPM (Node Package Manager)&lt;/li&gt;
&lt;li&gt;Event-Driven Programming&lt;/li&gt;
&lt;li&gt;Routing&lt;/li&gt;
&lt;li&gt;Serving static resources&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 &lt;a href="https://dev.to/ramanand/getting-started-with-nodejs-from-what-is-this-to-your-first-web-server-4mlh"&gt;Continue to Getting Started with Node.js Guide&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  💬 Your Turn
&lt;/h2&gt;

&lt;p&gt;What was your first backend framework?&lt;/p&gt;

&lt;p&gt;PHP? Django? Spring Boot? Express?&lt;/p&gt;

&lt;p&gt;And have you ever crashed a production server accidentally? 😅&lt;/p&gt;




&lt;h2&gt;
  
  
  📢 Call To Action
&lt;/h2&gt;

&lt;p&gt;If this helped you understand Express better:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;⭐ Share it with another developer&lt;/li&gt;
&lt;li&gt;🔁 Bookmark for revision&lt;/li&gt;
&lt;li&gt;🚀 Try building a tiny REST API today&lt;/li&gt;
&lt;li&gt;👨‍💻 Follow for more deep-dive backend content&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>node</category>
      <category>express</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Useful Android Studio Plugins</title>
      <dc:creator>Ramanand Thakur</dc:creator>
      <pubDate>Sun, 08 Jan 2023 00:28:55 +0000</pubDate>
      <link>https://dev.to/ramanand/useful-android-studio-plugins-2nkm</link>
      <guid>https://dev.to/ramanand/useful-android-studio-plugins-2nkm</guid>
      <description>&lt;p&gt;If you want to learn how to create Android apps, Android Studio is where your search will end. It is a platform where you can create Android apps for Android phones, tablets, Android Wear(Smartwatch/Fitness), and Android TV. Kotlin or Java may be used to create the backend of Android applications, while XML can be used to create the user interface (UI) on the front end.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. CodeGlance
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwsd4b5zdcximkq0y6vd3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwsd4b5zdcximkq0y6vd3.jpg" width="800" height="606"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;CodeGlance is a type of minimap of the full code that enables you to quickly inspect an entire code block. When the CodeGlance feature is enabled, the entire code is displayed to the side of the screen in minimap style, allowing you to rapidly go to the required area of the code by choosing it from the CodeGlance box.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8iis54t2j9kfsl5mevc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc8iis54t2j9kfsl5mevc.png" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  2. Butterknife Zelezny
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo4w3km12wpe9vlmbon3.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdo4w3km12wpe9vlmbon3.jpg" width="800" height="605"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ButterKnife Zelezny is an android studio plug-in that lets you generate ButterKnife injections from specific layout XML. It is a very simple plug-in, hence generates Butterknife view injections with just one-click.&lt;br&gt;
The major goal is to increase coding efficiency and make it simple for developers to instantly produce the code of the control binding view.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffi63kejiwwcuo09enk9h.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffi63kejiwwcuo09enk9h.gif" width="712" height="591"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  3. Vector Drawable Thumbnails
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ywm3s4p154hhbcdifmd.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ywm3s4p154hhbcdifmd.jpg" width="800" height="610"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We often need to rebuild the project in order to see a vector drawable XML file. We can quickly preview all of the vector drawables using Vector Drawable Thumbnails.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjlx3ftwj9vjevh35fpbq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjlx3ftwj9vjevh35fpbq.jpg" width="417" height="575"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  4. Rainbow Brackets
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fntxttrfc7560ljgmwve8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fntxttrfc7560ljgmwve8.jpg" width="800" height="604"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ButterKnife Zelezny is an android studio plug-in that lets you generate ButterKnife injections from specific layout XML. It is a very simple plug-in, hence generates Butterknife view injections with just one-click.&lt;br&gt;
The major goal is to increase coding efficiency and make it simple for developers to instantly produce the code of the control binding view.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbynije7i0pysjkrtn8pc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbynije7i0pysjkrtn8pc.jpg" width="795" height="196"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;



&lt;h2&gt;
  
  
  5. Android Drawable Preview
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbx08rywwomyx1oh53j70.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbx08rywwomyx1oh53j70.jpg" width="800" height="613"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When creating an Android app, you'll need a variety of drawable components. When working on a large project, it might be difficult to recall which drawable you used. Figuring this out takes a lot of time and effort.&lt;br&gt;
This plugin solves this issue by replacing the project view's default file icons with previews of the drawable you've used. You can also browse through the folder to know which all drawables has been used.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frwabuejld4zkxgf2bkxj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frwabuejld4zkxgf2bkxj.png" width="453" height="565"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  6. The Name That Color
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb7v5hpxli8qb7zoj6i5c.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb7v5hpxli8qb7zoj6i5c.jpg" width="800" height="599"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Name That Color plugin in Android Studio will name the colour you currently have copied to your clipboard and provide the name of the colour that is the closest match. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpwju6ed2hwex58r6bhm.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpwju6ed2hwex58r6bhm.gif" width="488" height="345"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  7. String Manipulation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs69c9kgqzkb60ey1viek.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs69c9kgqzkb60ey1viek.jpg" width="800" height="603"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can do everything with String Manipulation, including toggle cases, switch between camel, snake, and kebab cases, increment duplicates, sort, escape/unescape HTML, Java, SQL, PHP, and XML strings, and run filter operations like grep.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fseouxr7oyexl2qd5nv4s.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fseouxr7oyexl2qd5nv4s.gif" width="754" height="451"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  8. ADB Idea
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzhce98pvmi0fhi1iigz.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkzhce98pvmi0fhi1iigz.jpg" width="800" height="607"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It enables shortcuts for a number of emulator features that are often quite time-consuming, such as clearing the app's data, removing it from the system, or starting the debugger.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpsaw39mh9j8qydpmd1j.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpsaw39mh9j8qydpmd1j.jpg" width="751" height="327"&gt;&lt;/a&gt;&lt;/p&gt;





&lt;h2&gt;
  
  
  9. Power Mode II
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0uawm2f5g7ietket2ypy.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0uawm2f5g7ietket2ypy.jpg" width="800" height="605"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sometimes, coding can get tedious. but not while this plugin is activated. Your fingers are spitting fire and trembling as you read this. Every time anything gets dull to continue, I personally like to use this addon. Start coding while your favourite music is playing. It gets even better when your music syncs with the shaking effect.&lt;/p&gt;





&lt;h2&gt;
  
  
  10. Tabnine
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4xyycqzjfig6ru1xi1d.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4xyycqzjfig6ru1xi1d.jpg" width="800" height="602"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article would have been incomplete without mentioning a powerful tool like Tabnine. It is trained on over two million GitHub files and supports 20 programming languages. It looks for patterns in the training data set that may be used to predict the next "token". The use of tabnine speeds up development and helps get eliminate those annoying errors that keep popping up in your code.&lt;/p&gt;






&lt;p&gt;Always keep in mind that adding too many plugins to your IDE won't actually speed up your process. Instead, it can substantially reduce the speed of your Android Studio. As a last recommendation, I'd advise choosing a handful of these plugins and experimenting with it and integrating them during your regular work. And continue with it only after noticeable improvement.&lt;/p&gt;

&lt;h5&gt;
  
  
  If you find this helpful, do consider following.
&lt;/h5&gt;

</description>
      <category>career</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
