What npm command should be use to install the production dependencies?
š¦ Node.js->AI phrase
āØ The Prompt Phrase
npm iĀ --production
š» 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>What npm command should be use to install the production dependencies? - Interactive Tutorial</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Fira+Code:wght@400;600&display=swap');
:root {
--primary: #667eea;
--secondary: #764ba2;
--accent: #f093fb;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
--info: #3b82f6;
--dark: #1a1a2e;
--darker: #0f0f1e;
--light: #eaeaea;
--glass: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
color: var(--light);
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: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
width: 0%;
transition: width 0.3s ease;
box-shadow: 0 0 10px var(--accent);
}
/* Hero Section */
.hero {
text-align: center;
padding: 100px 20px 80px;
position: relative;
z-index: 1;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
opacity: 0.15;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-badge {
display: inline-block;
padding: 8px 20px;
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 20px;
animation: fadeInDown 1s ease;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
animation: fadeInDown 1s ease 0.2s backwards;
line-height: 1.2;
}
.hero-subtitle {
font-size: clamp(1rem, 2vw, 1.3rem);
opacity: 0.8;
margin-bottom: 40px;
animation: fadeInUp 1s ease 0.4s backwards;
}
.command-box {
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
margin: 40px auto;
max-width: 700px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: fadeIn 1s ease 0.6s backwards;
position: relative;
}
.command-box::before {
content: 'š';
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
opacity: 0.3;
}
.command-box code {
font-family: 'Fira Code', monospace;
font-size: clamp(1.2rem, 3vw, 1.8rem);
color: var(--accent);
display: block;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
border-left: 4px solid var(--primary);
position: relative;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 16px;
background: var(--primary);
border: none;
border-radius: 8px;
color: white;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: var(--accent);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--success);
}
/* Section Styles */
.section {
background: var(--glass);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: fadeInUp 0.8s ease;
position: relative;
z-index: 1;
}
.section h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 25px;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.section p {
font-size: clamp(1rem, 2vw, 1.1rem);
margin-bottom: 15px;
opacity: 0.9;
line-height: 1.8;
}
/* Comparison Table */
.comparison-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.comparison-card {
background: rgba(102, 126, 234, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
}
.comparison-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
}
.comparison-card h3 {
color: var(--accent);
margin-bottom: 15px;
font-size: 1.3rem;
}
.comparison-card.highlight {
border-color: var(--success);
background: rgba(74, 222, 128, 0.1);
}
/* Accordion */
.accordion {
margin: 20px 0;
}
.accordion-item {
background: rgba(102, 126, 234, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
margin: 15px 0;
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-header {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.1rem;
transition: background 0.3s ease;
}
.accordion-header:hover {
background: rgba(102, 126, 234, 0.2);
}
.accordion-icon {
transition: transform 0.3s ease;
font-size: 1.5rem;
}
.accordion-item.active .accordion-icon {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 20px;
}
.accordion-item.active .accordion-content {
max-height: 1000px;
padding: 20px;
}
/* Step Cards */
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.step-card {
background: rgba(102, 126, 234, 0.1);
border: 2px solid var(--primary);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
border-color: var(--accent);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 15px;
}
/* Code Breakdown */
.code-breakdown {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.code-part {
display: flex;
align-items: start;
gap: 20px;
margin: 20px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border-left: 4px solid var(--accent);
}
.code-part-label {
font-family: 'Fira Code', monospace;
color: var(--accent);
font-weight: 600;
min-width: 180px;
font-size: 1.1rem;
}
.code-part-desc {
flex: 1;
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--glass-border);
border-radius: 10px;
color: var(--light);
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary);
}
.tab-btn.active {
background: linear-gradient(135deg, var(--primary), var(--accent));
border-color: var(--accent);
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
/* Quiz */
.quiz-container {
background: rgba(102, 126, 234, 0.1);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--primary);
}
.quiz-question {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.quiz-question h4 {
color: var(--accent);
margin-bottom: 20px;
font-size: 1.2rem;
}
.quiz-option {
padding: 18px 24px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--glass-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px 0;
}
.quiz-option:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--primary);
transform: translateX(5px);
}
.quiz-option.correct {
background: rgba(74, 222, 128, 0.2);
border-color: var(--success);
animation: correctAnswer 0.5s ease;
}
.quiz-option.incorrect {
background: rgba(248, 113, 113, 0.2);
border-color: var(--danger);
animation: shake 0.5s ease;
}
@keyframes correctAnswer {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.quiz-feedback {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
font-weight: 600;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-score {
text-align: center;
font-size: 1.5rem;
margin-top: 30px;
padding: 20px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 15px;
font-weight: 700;
}
/* Cards */
.tip-card {
background: rgba(74, 222, 128, 0.1);
border-left: 4px solid var(--success);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
.mistake-card {
background: rgba(248, 113, 113, 0.1);
border-left: 4px solid var(--danger);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
.info-card {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--info);
border-radius: 10px;
padding: 20px;
margin: 15px 0;
}
/* Summary */
.summary-card {
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 25px;
padding: 50px;
margin: 40px 0;
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4);
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-top: 30px;
}
.summary-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
text-align: center;
}
.summary-item h4 {
color: white;
margin: 15px 0;
font-size: 1.1rem;
}
.summary-item p {
color: white;
opacity: 0.9;
font-size: 0.95rem;
}
/* Footer */
.footer {
text-align: center;
padding: 60px 20px 40px;
margin-top: 80px;
border-top: 2px solid var(--glass-border);
}
.badge {
display: inline-block;
padding: 8px 18px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin: 5px;
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--accent);
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background: var(--darker);
color: var(--light);
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: 2px solid var(--primary);
font-size: 0.9rem;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
pointer-events: none;
z-index: 9999;
animation: confettiFall 3s ease-out forwards;
}
@keyframes confettiFall {
to {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* Scroll Button */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
z-index: 999;
font-size: 1.5rem;
}
.scroll-top.show {
opacity: 1;
}
.scroll-top:hover {
transform: scale(1.1);
}
/* File Tree */
.file-tree {
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.95rem;
line-height: 2;
}
.file-tree .folder {
color: var(--warning);
}
.file-tree .file {
color: var(--info);
}
.file-tree .dev-file {
color: var(--danger);
opacity: 0.5;
text-decoration: line-through;
}
/* Responsive */
@media (max-width: 768px) {
.hero {
padding: 80px 20px 60px;
}
.section {
padding: 25px;
}
.summary-card {
padding: 30px 20px;
}
.code-part {
flex-direction: column;
}
.code-part-label {
min-width: auto;
}
}
</style>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- Scroll to Top -->
<div class="scroll-top" id="scrollTop" onclick="scrollToTop()">ā</div>
<div class="container">
<!-- Hero Section -->
<section class="hero">
<div class="hero-badge">š¦ NPM Production Mode</div>
<h1>Deploy Like a Pro</h1>
<p class="hero-subtitle">Master production-ready npm installations and optimize your deployment workflow!</p>
<div class="command-box">
<code id="mainCommand">npm i --production</code>
<button class="copy-btn" onclick="copyCommand()">š Copy</button>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<h2>š¤ What Is It?</h2>
<p>
This command is your secret weapon for <span class="tooltip"><strong>production deployments</strong><span class="tooltiptext">The live environment where real users access your application</span></span>! It tells npm to install ONLY the packages your application needs to run, skipping all the development tools.
</p>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">šÆ The Key Difference</h4>
<p><strong>npm i --production</strong> installs only <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">dependencies</code>, while skipping <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">devDependencies</code>. This means a smaller, faster, and more secure deployment!</p>
</div>
<p>
Think of it like packing for a trip: you bring what you need to use (production dependencies), but leave behind your tools and workshop equipment (development dependencies). š§³
</p>
</section>
<!-- Why Use It Section -->
<section class="section">
<h2>š Why Use It?</h2>
<div class="steps-container">
<div class="step-card">
<div class="step-number">ā”</div>
<h4>Faster Installs</h4>
<p>Skip dev tools = lightning-fast deployment times!</p>
</div>
<div class="step-card">
<div class="step-number">š¾</div>
<h4>Smaller Size</h4>
<p>Reduce your node_modules by 50-70% in production!</p>
</div>
<div class="step-card">
<div class="step-number">š</div>
<h4>More Secure</h4>
<p>Fewer packages = smaller attack surface!</p>
</div>
<div class="step-card">
<div class="step-number">š°</div>
<h4>Cost Savings</h4>
<p>Less storage, less bandwidth, lower cloud costs!</p>
</div>
</div>
<div class="comparison-container" style="margin-top: 40px;">
<div class="comparison-card">
<h3>ā Regular Install</h3>
<p><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm install</code></p>
<ul style="margin-top: 15px; line-height: 2;">
<li>ā
Production dependencies</li>
<li>ā
Development dependencies</li>
<li>š¦ ~300MB node_modules</li>
<li>ā±ļø 2-3 minutes install time</li>
</ul>
</div>
<div class="comparison-card highlight">
<h3>ā
Production Install</h3>
<p><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i --production</code></p>
<ul style="margin-top: 15px; line-height: 2;">
<li>ā
Production dependencies</li>
<li>ā Development dependencies</li>
<li>š¦ ~100MB node_modules</li>
<li>ā±ļø 30-60 seconds install time</li>
</ul>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="section">
<h2>āļø How Does It Work?</h2>
<p>Let's understand the magic behind this command:</p>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 1: Understanding package.json</span>
<span class="accordion-icon">ā¼</span>
</div>
<div class="accordion-content">
<p>Your <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">package.json</code> has two types of dependencies:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 15px; font-family: 'Fira Code', monospace; font-size: 0.9rem;">
{<br>
"dependencies": {<br>
"express": "^4.18.0",<br>
"react": "^18.0.0"<br>
},<br>
"devDependencies": {<br>
"jest": "^29.0.0",<br>
"webpack": "^5.0.0"<br>
}<br>
}
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 2: What Gets Installed</span>
<span class="accordion-icon">ā¼</span>
</div>
<div class="accordion-content">
<p><strong>With --production flag:</strong></p>
<ul style="margin: 15px 0; line-height: 2;">
<li>ā
<strong>dependencies</strong> - express, react (needed to run)</li>
<li>ā <strong>devDependencies</strong> - jest, webpack (only for development)</li>
</ul>
<p>The flag tells npm: "I'm deploying to production, skip the dev stuff!"</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 3: The Installation Process</span>
<span class="accordion-icon">ā¼</span>
</div>
<div class="accordion-content">
<p>NPM reads your package.json, identifies production dependencies, downloads them, and creates a lean node_modules folder.</p>
<div class="file-tree" style="margin-top: 15px;">
node_modules/<br>
āāā <span class="folder">express/</span> <span style="color: var(--success);">ā Installed</span><br>
āāā <span class="folder">react/</span> <span style="color: var(--success);">ā Installed</span><br>
āāā <span class="dev-file">jest/</span> <span style="color: var(--danger);">ā Skipped</span><br>
āāā <span class="dev-file">webpack/</span> <span style="color: var(--danger);">ā Skipped</span>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Step 4: Environment Variables</span>
<span class="accordion-icon">ā¼</span>
</div>
<div class="accordion-content">
<p>You can also set the NODE_ENV environment variable:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 15px; font-family: 'Fira Code', monospace;">
<span style="color: var(--success);">$ NODE_ENV=production npm install</span>
</div>
<p style="margin-top: 15px;">This achieves the same result as using the --production flag!</p>
</div>
</div>
</div>
</section>
<!-- Live Demo Section -->
<section class="section">
<h2>š® Interactive Examples</h2>
<p>See the difference in action:</p>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(0)">Basic Usage</button>
<button class="tab-btn" onclick="switchTab(1)">Docker Deployment</button>
<button class="tab-btn" onclick="switchTab(2)">CI/CD Pipeline</button>
</div>
<div class="tab-content active" id="tab0">
<div class="code-breakdown">
<h4 style="color: var(--accent); margin-bottom: 20px;">Deploying to a production server:</h4>
<div style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px; font-family: 'Fira Code', monospace;">
<div style="color: var(--success);">$ cd /var/www/myapp</div>
<div style="color: var(--accent);">$ npm i --production</div>
<div style="color: var(--light); opacity: 0.7; margin-top: 10px;">added 45 packages in 12s</div>
<div style="color: var(--success); margin-top: 5px;">ā Production dependencies installed!</div>
</div>
<p style="margin-top: 20px;">Clean, fast, and ready to serve users! š</p>
</div>
</div>
<div class="tab-content" id="tab1">
<div class="code-breakdown">
<h4 style="color: var(--accent); margin-bottom: 20px;">Dockerfile example:</h4>
<div style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px; font-family: 'Fira Code', monospace; font-size: 0.9rem;">
<span style="color: var(--info);">FROM</span> node:18-alpine<br><br>
<span style="color: var(--info);">WORKDIR</span> /app<br><br>
<span style="color: var(--info);">COPY</span> package*.json ./<br>
<span style="color: var(--accent);">RUN npm i --production</span><br><br>
<span style="color: var(--info);">COPY</span> . .<br><br>
<span style="color: var(--info);">CMD</span> ["node", "server.js"]
</div>
<p style="margin-top: 20px;">Perfect for creating lightweight Docker images! š³</p>
</div>
</div>
<div class="tab-content" id="tab2">
<div class="code-breakdown">
<h4 style="color: var(--accent); margin-bottom: 20px;">GitHub Actions workflow:</h4>
<div style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px; font-family: 'Fira Code', monospace; font-size: 0.9rem;">
<span style="color: var(--warning);">- name:</span> Install production dependencies<br>
<span style="color: var(--warning);">run:</span> npm i --production<br><br>
<span style="color: var(--warning);">- name:</span> Deploy to server<br>
<span style="color: var(--warning);">run:</span> rsync -avz . user@server:/app
</div>
<p style="margin-top: 20px;">Automate your deployment pipeline! āļø</p>
</div>
</div>
</section>
<!-- Code Breakdown Section -->
<section class="section">
<h2>š Command Breakdown</h2>
<p>Let's dissect each part:</p>
<div class="code-breakdown">
<div class="code-part">
<div class="code-part-label">npm</div>
<div class="code-part-desc">
<h4 style="color: var(--accent); margin-bottom: 10px;">Node Package Manager</h4>
<p>The tool that manages all your JavaScript packages and dependencies.</p>
</div>
</div>
<div class="code-part">
<div class="code-part-label">i</div>
<div class="code-part-desc">
<h4 style="color: var(--accent); margin-bottom: 10px;">Install Command (Shorthand)</h4>
<p>Short for "install" - downloads and installs packages from package.json. You can also use the full word "install".</p>
</div>
</div>
<div class="code-part">
<div class="code-part-label">--production</div>
<div class="code-part-desc">
<h4 style="color: var(--accent); margin-bottom: 10px;">Production Flag</h4>
<p>The magic flag! Tells npm to skip devDependencies and install only what's needed for production. Can also be written as <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">--only=production</code>.</p>
</div>
</div>
</div>
<div class="info-card" style="margin-top: 30px;">
<h4 style="color: var(--info); margin-bottom: 10px;">š” Alternative Syntax</h4>
<p>These commands all do the same thing:</p>
<ul style="margin-top: 10px; line-height: 2;">
<li><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i --production</code></li>
<li><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm install --production</code></li>
<li><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i --only=production</code></li>
<li><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm install --only=prod</code></li>
</ul>
</div>
</section>
<!-- Common Mistakes Section -->
<section class="section">
<h2>ā ļø Common Mistakes</h2>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">ā Putting Required Packages in devDependencies</h4>
<p><strong>Problem:</strong> Your app needs Express to run, but it's in devDependencies</p>
<p><strong>Result:</strong> App crashes in production because Express isn't installed!</p>
<p><strong>Fix:</strong> Move it to dependencies: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i express --save</code></p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">ā Using --production in Development</h4>
<p><strong>Wrong:</strong> Running <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i --production</code> on your local machine</p>
<p><strong>Result:</strong> No testing tools, no build tools, can't develop!</p>
<p><strong>Fix:</strong> Use regular <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm install</code> for development</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">ā Forgetting to Update package.json</h4>
<p><strong>Problem:</strong> Installing packages without saving them properly</p>
<p><strong>Result:</strong> Missing dependencies in production!</p>
<p><strong>Fix:</strong> Always use <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i package-name</code> (automatically saves)</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">ā Mixing NODE_ENV and --production</h4>
<p><strong>Confusing:</strong> <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">NODE_ENV=development npm i --production</code></p>
<p><strong>Result:</strong> Conflicting signals - which one wins?</p>
<p><strong>Fix:</strong> Be consistent - use one approach or the other</p>
</div>
</section>
<!-- Pro Tips Section -->
<section class="section">
<h2>š Pro Tips</h2>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Use npm ci for Production</h4>
<p>Even better than <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm i --production</code>:</p>
<p><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm ci --only=production</code></p>
<p>This is faster, more reliable, and perfect for CI/CD pipelines!</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Check Your Bundle Size</h4>
<p>Compare before and after: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">du -sh node_modules</code></p>
<p>You'll be amazed at the difference! Often 50-70% smaller! š</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Audit Production Dependencies</h4>
<p>Check for vulnerabilities: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm audit --production</code></p>
<p>Only audits what actually ships to production!</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Prune Existing Installations</h4>
<p>Already installed everything? Remove dev deps: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm prune --production</code></p>
<p>This removes devDependencies from an existing node_modules folder!</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Use .npmrc for Consistency</h4>
<p>Create a <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">.npmrc</code> file in your project:</p>
<p><code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">production=true</code></p>
<p>Now npm install always runs in production mode! šÆ</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">š Multi-Stage Docker Builds</h4>
<p>Build with dev deps, run with prod deps:</p>
<div style="background: rgba(0,0,0,0.3); padding: 10px; border-radius: 5px; margin-top: 10px; font-family: 'Fira Code', monospace; font-size: 0.85rem;">
# Build stage<br>
FROM node:18 AS builder<br>
RUN npm install<br>
RUN npm run build<br><br>
# Production stage<br>
FROM node:18-alpine<br>
RUN npm i --production
</div>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<h2>šÆ Knowledge Check</h2>
<p>Test your understanding!</p>
<div class="quiz-container">
<div class="quiz-question">
<h4>Question 1: What does the --production flag do?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">A) Makes npm run faster in all cases</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 0)">B) Installs only dependencies, skipping devDependencies</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">C) Installs packages from production registry</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">D) Compiles code for production</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4>Question 2: When should you use npm i --production?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">A) During local development</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">B) When deploying to production servers</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">C) When running tests</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">D) When building documentation</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 3: What's a benefit of using --production?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">A) Better code quality</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">B) Automatic bug fixes</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">C) Smaller node_modules size and faster installs</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">D) More detailed error messages</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-score" id="quizScore" style="display: none;">
š You scored <span id="scoreValue">0</span>/3! <span id="scoreMessage"></span>
</div>
</div>
</section>
<!-- Summary Card -->
<section class="summary-card">
<h2 style="color: white; text-align: center; margin-bottom: 40px;">š Quick Reference</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem;">š¦</div>
<h4>Command</h4>
<p>npm i --production</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">šÆ</div>
<h4>Purpose</h4>
<p>Install only production dependencies</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">ā”</div>
<h4>Benefit</h4>
<p>50-70% smaller installs</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">š</div>
<h4>Use Case</h4>
<p>Production deployments & Docker</p>
</div>
</div>
<div style="margin-top: 40px; padding: 25px; background: rgba(0,0,0,0.3); border-radius: 15px;">
<h3 style="color: white; margin-bottom: 20px; text-align: center;">š Key Takeaways</h3>
<ul style="color: white; line-height: 2; font-size: 1.05rem;">
<li>ā
Use in production environments, Docker, and CI/CD</li>
<li>ā
Skips devDependencies (testing, building tools)</li>
<li>ā
Results in faster installs and smaller deployments</li>
<li>ā
Alternative: <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">npm ci --only=production</code></li>
<li>ā
Don't use during local development!</li>
</ul>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<h3 style="background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">š Congratulations!</h3>
<p style="margin: 20px 0;">You're now ready to deploy like a professional developer!</p>
<div>
<div class="badge">š¦ NPM</div>
<div class="badge">š Production</div>
<div class="badge">š³ Docker</div>
<div class="badge">āļø DevOps</div>
<div class="badge">š¾ Optimization</div>
</div>
<p style="margin-top: 30px; opacity: 0.7;">
š Generated by <strong>AI Prompt Dictionary</strong>
</p>
<p style="font-size: 0.9rem; opacity: 0.6; margin-top: 10px;">
Ā© 2026 Interactive Tutorial System
</p>
</footer>
</div>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
// Scroll to Top
window.addEventListener('scroll', () => {
const scrollTop = document.getElementById('scrollTop');
if (window.scrollY > 300) {
scrollTop.classList.add('show');
} else {
scrollTop.classList.remove('show');
}
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Copy Command
function copyCommand() {
const command = document.getElementById('mainCommand').textContent;
navigator.clipboard.writeText(command).then(() => {
const btn = document.querySelector('.copy-btn');
btn.textContent = 'ā Copied!';
btn.classList.add('copied');
setTimeout(() => {
btn.textContent = 'š Copy';
btn.classList.remove('copied');
}, 2000);
});
}
// Accordion
function toggleAccordion(header) {
const item = header.parentElement;
const wasActive = item.classList.contains('active');
document.querySelectorAll('.accordion-item').forEach(el => {
el.classList.remove('active');
});
if (!wasActive) {
item.classList.add('active');
}
}
// Tabs
function switchTab(index) {
document.querySelectorAll('.tab-btn').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
document.querySelectorAll('.tab-content').forEach((content, i) => {
content.classList.toggle('active', i === index);
});
}
// Quiz
let quizScore = 0;
let questionsAnswered = 0;
function checkAnswer(element, isCorrect, questionIndex) {
const options = element.parentElement.querySelectorAll('.quiz-option');
options.forEach(opt => opt.style.pointerEvents = 'none');
const feedback = document.getElementById('feedback' + questionIndex);
if (isCorrect) {
element.classList.add('correct');
feedback.style.background = 'rgba(74, 222, 128, 0.2)';
feedback.style.color = 'var(--success)';
feedback.textContent = 'š Perfect! You got it right!';
quizScore++;
createConfetti();
} else {
element.classList.add('incorrect');
feedback.style.background = 'rgba(248, 113, 113, 0.2)';
feedback.style.color = 'var(--danger)';
feedback.textContent = 'ā Not quite. Review the sections above!';
}
feedback.classList.add('show');
questionsAnswered++;
if (questionsAnswered === 3) {
setTimeout(showFinalScore, 1000);
}
}
function showFinalScore() {
const scoreDiv = document.getElementById('quizScore');
const scoreValue = document.getElementById('scoreValue');
const scoreMessage = document.getElementById('scoreMessage');
scoreValue.textContent = quizScore;
if (quizScore === 3) {
scoreMessage.textContent = 'Perfect score! You\'re a production deployment expert! š';
createConfetti();
} else if (quizScore === 2) {
scoreMessage.textContent = 'Great job! You\'re almost there! š';
} else {
scoreMessage.textContent = 'Keep learning! Practice makes perfect! šŖ';
}
scoreDiv.style.display = 'block';
}
// Confetti Effect
function createConfetti() {
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * window.innerWidth + 'px';
confetti.style.background = ['#667eea', '#f093fb', '#4ade80', '#fbbf24'][Math.floor(Math.random() * 4)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
}
// Add entrance animations on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'fadeInUp 0.8s ease forwards';
}
});
}, observerOptions);
document.querySelectorAll('.section').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>
Live Preview