Install nodemon as a development dependency
📦 Node.js-> Command Line
✨ The Prompt Phrase
npm install --save-dev nodemon
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Install nodemon as a development dependency - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151932;
--bg-card: #1e2139;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-yellow: #f59e0b;
--accent-pink: #ec4899;
--nodemon-green: #76d275;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--gradient-nodemon: linear-gradient(135deg, #76d275 0%, #4caf50 100%);
--gradient-dev: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Progress Bar */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--bg-secondary);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: var(--gradient-nodemon);
width: 0%;
transition: width 0.3s ease;
}
/* Hero Section */
.hero {
text-align: center;
padding: 100px 20px;
background: var(--gradient-nodemon);
position: relative;
overflow: hidden;
border-radius: 0 0 50px 50px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
animation: float 20s linear infinite;
}
@keyframes float {
from { transform: translateY(0); }
to { transform: translateY(-100px); }
}
.hero-content {
position: relative;
z-index: 1;
}
.nodemon-logo {
font-size: 5rem;
margin-bottom: 20px;
animation: spin-slow 10s linear infinite;
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.command-display {
display: inline-block;
background: rgba(0, 0, 0, 0.4);
padding: 25px 40px;
border-radius: 15px;
font-family: 'Fira Code', monospace;
font-size: 1.8rem;
margin: 30px 0;
border: 3px solid rgba(255, 255, 255, 0.3);
animation: pulse 2s ease-in-out infinite;
color: white;
font-weight: 600;
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0); }
}
.hero h1 {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 20px;
animation: slideDown 0.8s ease-out;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero p {
font-size: 1.4rem;
opacity: 0.95;
animation: slideUp 0.8s ease-out;
color: white;
}
@keyframes slideDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Section Styles */
.section {
margin: 60px 0;
animation: fadeIn 0.8s ease-out;
animation-fill-mode: both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
background: var(--gradient-nodemon);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
font-weight: 700;
}
.card {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}
/* Code Block */
.code-block {
background: #1e1e1e;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
overflow: hidden;
font-family: 'Fira Code', monospace;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.code-lang {
color: var(--accent-green);
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.terminal-dots {
display: flex;
gap: 6px;
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.copy-btn {
background: var(--accent-purple);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.copy-btn:hover {
background: var(--accent-blue);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--accent-green);
}
pre {
margin: 0;
overflow-x: auto;
}
code {
color: #e0e0e0;
font-size: 0.95rem;
line-height: 1.8;
}
.code-comment {
color: #6a9955;
}
.code-keyword {
color: #569cd6;
}
.code-string {
color: #ce9178;
}
.code-function {
color: #dcdcaa;
}
.code-variable {
color: #9cdcfe;
}
/* Steps */
.steps {
counter-reset: step-counter;
}
.step {
background: var(--bg-secondary);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
position: relative;
padding-left: 100px;
transition: all 0.3s ease;
}
.step:hover {
background: var(--bg-card);
transform: translateX(10px);
}
.step::before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: var(--gradient-nodemon);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 900;
color: white;
}
.step h3 {
color: var(--accent-pink);
margin-bottom: 10px;
font-size: 1.5rem;
}
/* Feature Cards */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 30px 0;
}
.feature-card {
background: var(--bg-secondary);
padding: 30px;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-card:hover {
border-color: var(--nodemon-green);
transform: translateY(-10px);
}
.feature-icon {
font-size: 3.5rem;
margin-bottom: 15px;
}
.feature-title {
font-weight: 600;
color: var(--nodemon-green);
margin-bottom: 10px;
font-size: 1.3rem;
}
/* Interactive Demo */
.demo-container {
background: var(--bg-secondary);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.terminal {
background: #1e1e1e;
border-radius: 15px;
padding: 20px;
font-family: 'Fira Code', monospace;
min-height: 250px;
margin: 20px 0;
max-height: 400px;
overflow-y: auto;
}
.terminal-line {
margin: 10px 0;
display: flex;
align-items: flex-start;
}
.terminal-prompt {
color: var(--accent-green);
margin-right: 10px;
}
.terminal-command {
color: var(--accent-blue);
}
.terminal-output {
color: var(--text-secondary);
margin-left: 20px;
}
.demo-button {
background: var(--gradient-nodemon);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
margin: 10px;
font-family: 'Poppins', sans-serif;
}
.demo-button:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(118, 210, 117, 0.4);
}
.demo-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
padding: 12px 24px;
background: var(--bg-secondary);
border: none;
border-radius: 10px;
color: var(--text-primary);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
}
.tab:hover {
background: var(--bg-card);
}
.tab.active {
background: var(--gradient-nodemon);
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
/* Accordion */
.accordion-header {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
margin: 15px 0;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: var(--bg-card);
}
.accordion-icon {
transition: transform 0.3s ease;
font-size: 1.2rem;
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.active {
max-height: 2000px;
}
.accordion-body {
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
margin-top: 5px;
}
/* Info Boxes */
.tip {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--accent-blue);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.tip::before {
content: '💡 ';
font-size: 1.5rem;
}
.warning {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--accent-red);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.warning::before {
content: '⚠️ ';
font-size: 1.5rem;
}
.success {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.success::before {
content: '✅ ';
font-size: 1.5rem;
}
.info {
background: rgba(236, 72, 153, 0.1);
border-left: 4px solid var(--accent-pink);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.info::before {
content: '🔍 ';
font-size: 1.5rem;
}
/* Quiz */
.quiz-container {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.quiz-question {
margin: 30px 0;
}
.quiz-question h3 {
color: var(--accent-purple);
margin-bottom: 20px;
font-size: 1.3rem;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.quiz-option {
background: var(--bg-secondary);
padding: 20px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quiz-option:hover {
border-color: var(--accent-blue);
transform: translateX(10px);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
.quiz-option.incorrect {
border-color: var(--accent-red);
background: rgba(239, 68, 68, 0.1);
}
.quiz-feedback {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--accent-red);
}
/* Cheat Sheet */
.cheat-sheet {
background: var(--gradient-nodemon);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
color: white;
}
.cheat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.cheat-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cheat-item h4 {
color: white;
margin-bottom: 10px;
font-weight: 600;
}
.cheat-item code {
background: rgba(0, 0, 0, 0.3);
padding: 4px 8px;
border-radius: 5px;
font-size: 0.9rem;
color: white;
}
.highlight {
color: var(--accent-yellow);
font-weight: 600;
}
/* Footer */
.footer {
text-align: center;
padding: 40px 20px;
background: var(--bg-secondary);
margin-top: 80px;
border-radius: 20px;
}
.footer p {
color: var(--text-secondary);
margin: 10px 0;
}
/* Badges */
.badge {
display: inline-block;
padding: 6px 12px;
background: var(--gradient-dev);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin: 5px;
}
/* Comparison Table */
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-table th {
background: var(--bg-secondary);
color: var(--nodemon-green);
font-weight: 600;
}
.comparison-table tr:hover {
background: var(--bg-secondary);
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--accent-blue);
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--bg-card);
color: var(--text-primary);
text-align: center;
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity 0.3s;
border: 1px solid var(--accent-blue);
font-size: 0.9rem;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.command-display {
font-size: 1.2rem;
padding: 15px 20px;
}
.hero p {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.card {
padding: 25px;
}
.step {
padding-left: 80px;
}
.step::before {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: var(--nodemon-green);
position: fixed;
animation: confetti-fall 3s linear forwards;
z-index: 9999;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="hero">
<div class="hero-content">
<div class="nodemon-logo">🔄</div>
<h1>Master Nodemon!</h1>
<div class="command-display">npm install --save-dev nodemon</div>
<p>Auto-restart your Node.js apps during development! 🚀</p>
</div>
</div>
<div class="container">
<!-- What Is It Section -->
<section class="section" id="what-is-it">
<h2 class="section-title">🤔 What Is npm install --save-dev nodemon?</h2>
<div class="card">
<p style="font-size: 1.2rem; margin-bottom: 20px;">
This command installs <span class="highlight">nodemon</span> as a <strong>development dependency</strong> in your Node.js project! 🛠️
</p>
<p style="margin-bottom: 20px;">
Imagine you're cooking and every time you add a new ingredient, you have to turn the stove off and on again. Annoying, right? 😤 <strong>Nodemon</strong> is like having a smart stove that automatically adjusts when you add ingredients - it watches your code files and automatically restarts your Node.js app when you make changes!
</p>
<div class="info">
<strong>Breaking It Down:</strong>
<ul style="margin-left: 30px; margin-top: 10px; line-height: 2;">
<li><code>npm install</code> - Install a package</li>
<li><code>--save-dev</code> - Save as a <span class="tooltip">dev dependency<span class="tooltiptext">Only needed during development, not in production!</span></span></li>
<li><code>nodemon</code> - The package name (a tool that monitors your files)</li>
</ul>
</div>
<div style="margin-top: 30px;">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">What is Nodemon? 🔍</h3>
<ul style="margin-left: 30px; line-height: 2; font-size: 1.1rem;">
<li>🔄 <strong>Auto-restart tool</strong> for Node.js applications</li>
<li>👀 <strong>Watches</strong> your files for changes</li>
<li>⚡ <strong>Saves time</strong> - no more manual restarts!</li>
<li>🎯 <strong>Development-only</strong> tool (not for production)</li>
<li>📦 Over <strong>5 million downloads per week</strong></li>
</ul>
</div>
</div>
</section>
<!-- Why Use It -->
<section class="section" id="why-use-it">
<h2 class="section-title">✨ Why Use --save-dev?</h2>
<div class="card">
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Separate Dependencies</div>
<p style="color: var(--text-secondary);">Keep dev tools separate from production code!</p>
</div>
<div class="feature-card">
<div class="feature-icon">📦</div>
<div class="feature-title">Smaller Production</div>
<p style="color: var(--text-secondary);">Production builds don't include dev tools!</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Faster Installs</div>
<p style="color: var(--text-secondary);">Skip dev dependencies in production with --production flag!</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧹</div>
<div class="feature-title">Clean Organization</div>
<p style="color: var(--text-secondary);">Clear distinction between dev and prod packages!</p>
</div>
<div class="feature-card">
<div class="feature-icon">💰</div>
<div class="feature-title">Save Money</div>
<p style="color: var(--text-secondary);">Smaller deployments = lower hosting costs!</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<div class="feature-title">Security</div>
<p style="color: var(--text-secondary);">Fewer packages in production = smaller attack surface!</p>
</div>
</div>
<div style="margin-top: 30px;">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">📊 Dependencies vs DevDependencies</h3>
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th>dependencies</th>
<th>devDependencies</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>When Used</strong></td>
<td>Production & Development</td>
<td>Development Only</td>
</tr>
<tr>
<td><strong>Examples</strong></td>
<td>express, react, axios</td>
<td>nodemon, jest, eslint</td>
</tr>
<tr>
<td><strong>Install Command</strong></td>
<td><code>npm install package</code></td>
<td><code>npm install --save-dev package</code></td>
</tr>
<tr>
<td><strong>In package.json</strong></td>
<td>"dependencies": {}</td>
<td>"devDependencies": {}</td>
</tr>
<tr>
<td><strong>Deployed?</strong></td>
<td>✅ Yes</td>
<td>❌ No (with --production)</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- How It Works -->
<section class="section" id="how-it-works">
<h2 class="section-title">⚙️ How Does It Work?</h2>
<div class="card">
<p style="margin-bottom: 30px; font-size: 1.1rem;">Let's break down what happens step by step:</p>
<div class="steps">
<div class="step">
<h3>Step 1: npm Connects to Registry</h3>
<p>npm reaches out to npmjs.com to find the nodemon package.</p>
</div>
<div class="step">
<h3>Step 2: Downloads Nodemon</h3>
<p>npm downloads the latest version of nodemon and its dependencies.</p>
</div>
<div class="step">
<h3>Step 3: Saves to node_modules</h3>
<p>All files are placed in <code>node_modules/nodemon</code> folder.</p>
</div>
<div class="step">
<h3>Step 4: Updates package.json</h3>
<p>Adds nodemon to <code>devDependencies</code> section (not dependencies!).</p>
<div class="code-block" style="margin-top: 15px;">
<pre><code>{
<span class="code-string">"devDependencies"</span>: {
<span class="code-string">"nodemon"</span>: <span class="code-string">"^3.0.2"</span>
}
}</code></pre>
</div>
</div>
<div class="step">
<h3>Step 5: Creates Binary</h3>
<p>npm creates an executable in <code>node_modules/.bin/nodemon</code> that you can run!</p>
</div>
<div class="step">
<h3>Step 6: Ready to Use!</h3>
<p>You can now use nodemon with <code>npx nodemon</code> or add it to your npm scripts!</p>
</div>
</div>
<div class="success" style="margin-top: 30px;">
<strong>🎉 Done!</strong> Nodemon is installed and ready to watch your files for changes!
</div>
</div>
</section>
<!-- Interactive Demo -->
<section class="section" id="demo">
<h2 class="section-title">🎮 Interactive Demo</h2>
<div class="demo-container">
<h3 style="margin-bottom: 20px; font-size: 1.5rem;">See Nodemon in Action! 🚀</h3>
<p style="margin-bottom: 30px;">Click the buttons to simulate different scenarios:</p>
<button class="demo-button" onclick="simulateInstall()">
<span>📦</span>
<span>Install Nodemon</span>
</button>
<button class="demo-button" onclick="simulateWatch()">
<span>👀</span>
<span>Start Watching</span>
</button>
<button class="demo-button" onclick="simulateChange()">
<span>✏️</span>
<span>Make Code Change</span>
</button>
<div class="terminal" id="terminal">
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span style="color: var(--text-secondary);">Ready for commands...</span>
</div>
</div>
</div>
</section>
<!-- Code Examples -->
<section class="section" id="examples">
<h2 class="section-title">💻 Real-World Usage</h2>
<div class="card">
<div class="tabs">
<button class="tab active" onclick="switchTab('install')">Installation</button>
<button class="tab" onclick="switchTab('basic')">Basic Usage</button>
<button class="tab" onclick="switchTab('scripts')">NPM Scripts</button>
<button class="tab" onclick="switchTab('config')">Configuration</button>
</div>
<div id="install" class="tab-content active">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">Installation Options</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">
<div class="terminal-dots">
<div class="terminal-dot dot-red"></div>
<div class="terminal-dot dot-yellow"></div>
<div class="terminal-dot dot-green"></div>
</div>
Terminal
</span>
<button class="copy-btn" onclick="copyCode(this, 'install-code')">📋 Copy</button>
</div>
<pre><code id="install-code"><span class="code-comment"># Recommended: Install as dev dependency</span>
npm install --save-dev nodemon
<span class="code-comment"># Shorthand version</span>
npm i -D nodemon
<span class="code-comment"># Global install (not recommended)</span>
npm install -g nodemon
<span class="code-comment"># Install specific version</span>
npm install --save-dev nodemon@3.0.2</code></pre>
</div>
<div class="tip" style="margin-top: 15px;">
<strong>Best Practice:</strong> Always use <code>--save-dev</code> (or <code>-D</code>) for nodemon! It's a development tool and shouldn't be in production.
</div>
</div>
<div id="basic" class="tab-content">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">Basic Usage</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">Terminal</span>
<button class="copy-btn" onclick="copyCode(this, 'basic-code')">📋 Copy</button>
</div>
<pre><code id="basic-code"><span class="code-comment"># Instead of: node app.js</span>
<span class="code-comment"># Use: npx nodemon app.js</span>
npx nodemon app.js
<span class="code-comment"># Watch specific files</span>
npx nodemon --watch src app.js
<span class="code-comment"># Watch specific extensions</span>
npx nodemon --ext js,json app.js
<span class="code-comment"># Delay restart (useful for slow saves)</span>
npx nodemon --delay 2 app.js</code></pre>
</div>
<div class="info" style="margin-top: 15px;">
<strong>What is npx?</strong> It runs packages from node_modules/.bin without installing globally. Perfect for dev tools like nodemon!
</div>
</div>
<div id="scripts" class="tab-content">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">Add to NPM Scripts (Recommended!)</h3>
<p style="margin-bottom: 15px;">The best way to use nodemon is through npm scripts in package.json:</p>
<div class="code-block">
<div class="code-header">
<span class="code-lang">package.json</span>
<button class="copy-btn" onclick="copyCode(this, 'scripts-code')">📋 Copy</button>
</div>
<pre><code id="scripts-code">{
<span class="code-string">"name"</span>: <span class="code-string">"my-app"</span>,
<span class="code-string">"version"</span>: <span class="code-string">"1.0.0"</span>,
<span class="code-string">"scripts"</span>: {
<span class="code-string">"start"</span>: <span class="code-string">"node app.js"</span>,
<span class="code-string">"dev"</span>: <span class="code-string">"nodemon app.js"</span>,
<span class="code-string">"dev:watch"</span>: <span class="code-string">"nodemon --watch src app.js"</span>
},
<span class="code-string">"devDependencies"</span>: {
<span class="code-string">"nodemon"</span>: <span class="code-string">"^3.0.2"</span>
}
}</code></pre>
</div>
<div class="code-block" style="margin-top: 15px;">
<div class="code-header">
<span class="code-lang">Terminal - How to Run</span>
</div>
<pre><code><span class="code-comment"># Run with nodemon (development)</span>
npm run dev
<span class="code-comment"># Run normally (production)</span>
npm start</code></pre>
</div>
<div class="success" style="margin-top: 15px;">
<strong>Pro Tip:</strong> Use <code>npm run dev</code> during development and <code>npm start</code> in production!
</div>
</div>
<div id="config" class="tab-content">
<h3 style="color: var(--accent-pink); margin-bottom: 15px;">Advanced Configuration</h3>
<p style="margin-bottom: 15px;">Create a <code>nodemon.json</code> file for custom configuration:</p>
<div class="code-block">
<div class="code-header">
<span class="code-lang">nodemon.json</span>
<button class="copy-btn" onclick="copyCode(this, 'config-code')">📋 Copy</button>
</div>
<pre><code id="config-code">{
<span class="code-string">"watch"</span>: [<span class="code-string">"src"</span>, <span class="code-string">"server"</span>],
<span class="code-string">"ext"</span>: <span class="code-string">"js,json,html"</span>,
<span class="code-string">"ignore"</span>: [<span class="code-string">"test/*"</span>, <span class="code-string">"docs/*"</span>],
<span class="code-string">"delay"</span>: <span class="code-string">"2000"</span>,
<span class="code-string">"env"</span>: {
<span class="code-string">"NODE_ENV"</span>: <span class="code-string">"development"</span>
},
<span class="code-string">"verbose"</span>: <span class="code-keyword">true</span>
}</code></pre>
</div>
<div class="tip" style="margin-top: 15px;">
<strong>Configuration Options:</strong>
<ul style="margin-left: 30px; margin-top: 10px; line-height: 2;">
<li><code>watch</code> - Directories to watch</li>
<li><code>ext</code> - File extensions to watch</li>
<li><code>ignore</code> - Files/folders to ignore</li>
<li><code>delay</code> - Milliseconds to wait before restart</li>
<li><code>env</code> - Environment variables</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Common Mistakes -->
<section class="section" id="mistakes">
<h2 class="section-title">❌ Common Mistakes</h2>
<div class="card">
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>1. Installing Without --save-dev</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Installing nodemon as a regular dependency!
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="code-comment"># ❌ Wrong - installs as regular dependency</span>
npm install nodemon
<span class="code-comment"># ✅ Correct - installs as dev dependency</span>
npm install --save-dev nodemon
<span class="code-comment"># or shorthand:</span>
npm i -D nodemon</code></pre>
</div>
<div class="info" style="margin-top: 15px;">
<strong>Why it matters:</strong> Regular dependencies get installed in production, wasting space and potentially causing issues!
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>2. Using Nodemon in Production</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Running nodemon in production environment!
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="code-comment"># ❌ Wrong - using nodemon in production</span>
<span class="code-string">"start"</span>: <span class="code-string">"nodemon app.js"</span>
<span class="code-comment"># ✅ Correct - separate scripts</span>
<span class="code-string">"start"</span>: <span class="code-string">"node app.js"</span>, <span class="code-comment">// Production</span>
<span class="code-string">"dev"</span>: <span class="code-string">"nodemon app.js"</span> <span class="code-comment">// Development</span></code></pre>
</div>
<div class="tip" style="margin-top: 15px;">
<strong>Best Practice:</strong> Use <code>node</code> for production, <code>nodemon</code> for development only!
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>3. Watching Too Many Files</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Nodemon watching node_modules or build folders!
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="code-comment"># Create .nodemonignore file</span>
node_modules/
dist/
build/
.git/
*.test.js</code></pre>
</div>
<div class="success" style="margin-top: 15px;">
<strong>Solution:</strong> Use <code>.nodemonignore</code> or configure <code>ignore</code> in nodemon.json to exclude unnecessary directories!
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>4. Not Using npx</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Trying to run nodemon directly without npx or npm scripts!
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="code-comment"># ❌ Wrong - won't work unless installed globally</span>
nodemon app.js
<span class="code-comment"># ✅ Correct options:</span>
npx nodemon app.js
<span class="code-comment"># or use npm scripts:</span>
npm run dev</code></pre>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>5. Infinite Restart Loops</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Your app writes to files that nodemon is watching!
</div>
<div class="success" style="margin-top: 15px;">
<strong>Solutions:</strong>
<ul style="margin-left: 30px; margin-top: 10px; line-height: 2;">
<li>Ignore the output directory: <code>--ignore logs/</code></li>
<li>Add delay: <code>--delay 2</code></li>
<li>Watch specific folders only: <code>--watch src</code></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips -->
<section class="section" id="pro-tips">
<h2 class="section-title">🚀 Pro Tips</h2>
<div class="card">
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Use with TypeScript</div>
<p style="color: var(--text-secondary);"><code>nodemon --exec ts-node src/index.ts</code></p>
</div>
<div class="feature-card">
<div class="feature-icon">🐛</div>
<div class="feature-title">Debug Mode</div>
<p style="color: var(--text-secondary);"><code>nodemon --inspect app.js</code> for debugging!</p>
</div>
<div class="feature-card">
<div class="feature-icon">📝</div>
<div class="feature-title">Custom Events</div>
<p style="color: var(--text-secondary);">Listen to nodemon events in your code!</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Faster Restarts</div>
<p style="color: var(--text-secondary);">Use <code>--delay 0</code> for instant restarts!</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<div class="feature-title">Verbose Mode</div>
<p style="color: var(--text-secondary);"><code>nodemon -V</code> shows detailed info!</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<div class="feature-title">Custom Colors</div>
<p style="color: var(--text-secondary);">Disable colors with <code>--no-colors</code></p>
</div>
</div>
<div class="success" style="margin-top: 30px;">
<strong>🎓 Pro Workflow:</strong> Use <code>npm run dev</code> for development with nodemon, and <code>npm start</code> for production with regular node!
</div>
</div>
</section>
<!-- Quiz -->
<section class="section" id="quiz">
<h2 class="section-title">🎯 Knowledge Check Quiz</h2>
<div class="quiz-container">
<p style="margin-bottom: 30px; font-size: 1.1rem;">Test your understanding! Click on the correct answer. 🧠</p>
<div class="quiz-question">
<h3>Question 1: What does --save-dev do?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) Saves the package globally
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) Saves the package as a development dependency
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) Saves the package for production only
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) Creates a backup of the package
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h3>Question 2: What does nodemon do?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) Monitors your computer's performance
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
C) Automatically restarts your Node.js app when files change
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) Deploys your app to production
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) Tests your code for errors
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h3>Question 3: Should you use nodemon in production?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) Yes, always
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
B) No, only in development
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
C) Only on Fridays
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) Only for small apps
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quizScore" style="margin-top: 30px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; display: none;">
<h3 style="color: var(--accent-green); font-size: 1.5rem;">🎉 Quiz Complete!</h3>
<p id="scoreText" style="font-size: 1.2rem; margin-top: 10px;"></p>
</div>
</div>
</section>
<!-- Cheat Sheet -->
<section class="section" id="cheat-sheet">
<h2 class="section-title">📚 Quick Reference Cheat Sheet</h2>
<div class="cheat-sheet">
<h3 style="margin-bottom: 20px; font-size: 2rem;">Nodemon Essentials! 🔖</h3>
<div class="cheat-grid">
<div class="cheat-item">
<h4>📦 Install</h4>
<p><code>npm i -D nodemon</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Install as dev dependency</p>
</div>
<div class="cheat-item">
<h4>🚀 Basic Run</h4>
<p><code>npx nodemon app.js</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Run with nodemon</p>
</div>
<div class="cheat-item">
<h4>👀 Watch Folder</h4>
<p><code>nodemon --watch src</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Watch specific directory</p>
</div>
<div class="cheat-item">
<h4>📄 File Extensions</h4>
<p><code>nodemon --ext js,json</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Watch specific extensions</p>
</div>
<div class="cheat-item">
<h4>⏱️ Delay Restart</h4>
<p><code>nodemon --delay 2</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Wait 2 seconds before restart</p>
</div>
<div class="cheat-item">
<h4>🚫 Ignore Files</h4>
<p><code>nodemon --ignore tests/</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Ignore specific folders</p>
</div>
<div class="cheat-item">
<h4>🐛 Debug Mode</h4>
<p><code>nodemon --inspect</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Enable debugging</p>
</div>
<div class="cheat-item">
<h4>📝 NPM Script</h4>
<p><code>"dev": "nodemon app.js"</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Add to package.json</p>
</div>
<div class="cheat-item">
<h4>⚙️ Config File</h4>
<p><code>nodemon.json</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Create config file</p>
</div>
<div class="cheat-item">
<h4>🔍 Verbose</h4>
<p><code>nodemon -V</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Show detailed output</p>
</div>
<div class="cheat-item">
<h4>🎯 TypeScript</h4>
<p><code>nodemon --exec ts-node</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Use with TypeScript</p>
</div>
<div class="cheat-item">
<h4>ℹ️ Help</h4>
<p><code>nodemon --help</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Show all options</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<div class="footer">
<h2 style="font-size: 2rem; margin-bottom: 20px; color: var(--accent
Live Preview