Separate local server to be isolated from other servers.
📦 PHP
✨ The Prompt Phrase
The images below show how to configure a local server independently from XAMPP and Laragon. Step 1: Open the Local application window. Step 2: Click the profile icon and select Preferences. Step 3: Navigate to Advanced settings and find the Router Mode dropdown menu. Step 4: Change the setting from "Site Domain" to "Localhost" and click Apply. Step 5: Close and restart Local. The application will now run as an independent server, separate from Laragon and XAMPP. Images and explanations appear in full preview mode following this sequence.
💻 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>Separate Local Server to be Isolated from Other Servers - 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;
--local: #84cc16;
--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: 1400px;
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(--local), var(--success));
width: 0%;
transition: width 0.3s ease;
box-shadow: 0 0 10px var(--local);
}
/* 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(--local) 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(--local), var(--success));
-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;
}
.server-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 40px 0;
animation: fadeIn 1s ease 0.6s backwards;
}
.server-card {
background: var(--glass);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.server-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 50px rgba(132, 204, 22, 0.3);
}
.server-card.xampp { border-color: var(--warning); }
.server-card.laragon { border-color: var(--info); }
.server-card.local {
border-color: var(--local);
box-shadow: 0 0 30px rgba(132, 204, 22, 0.3);
}
.server-icon {
font-size: 4rem;
margin-bottom: 15px;
}
.server-card h3 {
margin-bottom: 10px;
font-size: 1.5rem;
}
.isolation-badge {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 10px;
}
.isolated {
background: rgba(132, 204, 22, 0.2);
color: var(--local);
border: 2px solid var(--local);
}
.connected {
background: rgba(251, 191, 36, 0.2);
color: var(--warning);
border: 2px solid var(--warning);
}
/* 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(--local), var(--success));
-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;
}
/* Screenshot Gallery */
.screenshot-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.screenshot-item {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 15px;
border: 2px solid var(--local);
transition: all 0.3s ease;
cursor: pointer;
}
.screenshot-item:hover {
transform: scale(1.05);
box-shadow: 0 10px 40px rgba(132, 204, 22, 0.4);
}
.screenshot-img {
width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
.screenshot-label {
text-align: center;
color: var(--local);
font-weight: 600;
font-size: 0.95rem;
}
/* Step Cards */
.steps-container {
display: grid;
gap: 25px;
margin: 30px 0;
}
.step-card {
background: rgba(132, 204, 22, 0.1);
border: 2px solid var(--local);
border-radius: 15px;
padding: 30px;
transition: all 0.3s ease;
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: start;
}
.step-card:hover {
transform: translateX(10px);
box-shadow: 0 10px 40px rgba(132, 204, 22, 0.3);
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--local), var(--success));
border-radius: 50%;
font-weight: 700;
font-size: 1.8rem;
flex-shrink: 0;
}
.step-content h3 {
color: var(--local);
margin-bottom: 10px;
font-size: 1.3rem;
}
/* Accordion */
.accordion {
margin: 20px 0;
}
.accordion-item {
background: rgba(132, 204, 22, 0.1);
border: 2px solid var(--local);
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(132, 204, 22, 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: 3000px;
padding: 20px;
}
/* Comparison Table */
.comparison-table {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
overflow: hidden;
margin: 30px 0;
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th {
background: linear-gradient(135deg, var(--local), var(--success));
padding: 15px;
text-align: left;
font-weight: 600;
}
.comparison-table td {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-table tr:hover {
background: rgba(132, 204, 22, 0.1);
}
/* Quiz */
.quiz-container {
background: rgba(132, 204, 22, 0.1);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
border: 2px solid var(--local);
}
.quiz-question {
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.quiz-question h4 {
color: var(--local);
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(--local);
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(--local), var(--success));
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;
}
.warning-box {
background: rgba(251, 191, 36, 0.1);
border: 2px solid var(--warning);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.warning-box h4 {
color: var(--warning);
font-size: 1.3rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
/* Summary */
.summary-card {
background: linear-gradient(135deg, var(--local), var(--success));
border-radius: 25px;
padding: 50px;
margin: 40px 0;
box-shadow: 0 15px 50px rgba(132, 204, 22, 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(--local), var(--success));
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin: 5px;
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--local);
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(--local);
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(--local), var(--success));
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);
}
/* Responsive */
@media (max-width: 768px) {
.hero {
padding: 80px 20px 60px;
}
.section {
padding: 25px;
}
.summary-card {
padding: 30px 20px;
}
.step-card {
grid-template-columns: 1fr;
text-align: center;
}
.step-number {
margin: 0 auto 20px;
}
}
</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">🌐 Local by Flywheel Configuration</div>
<h1>Isolating Local Server from XAMPP & Laragon</h1>
<p class="hero-subtitle">Configure Local to run independently without port conflicts or routing issues!</p>
<div class="server-comparison">
<div class="server-card xampp">
<div class="server-icon">🟠</div>
<h3>XAMPP</h3>
<p>Port 8080, 4443, 3307</p>
<span class="isolation-badge connected">Separate</span>
</div>
<div class="server-card laragon">
<div class="server-icon">🔵</div>
<h3>Laragon</h3>
<p>Port 80, 443, 3306</p>
<span class="isolation-badge connected">Separate</span>
</div>
<div class="server-card local">
<div class="server-icon">🟢</div>
<h3>Local</h3>
<p>localhost:10005</p>
<span class="isolation-badge isolated">✨ Isolated</span>
</div>
</div>
</section>
<!-- What Is It Section -->
<section class="section">
<h2>🤔 What Is This About?</h2>
<p>
<span class="tooltip"><strong>Local by Flywheel</strong><span class="tooltiptext">A popular WordPress development tool that creates local WordPress sites</span></span> is a powerful tool for WordPress development. However, when you have multiple local server environments (XAMPP, Laragon, and Local) on the same computer, they can interfere with each other.
</p>
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🎯 The Problem</h4>
<p>By default, Local uses <strong>"Site domains"</strong> routing mode, which:</p>
<ul style="line-height: 2; margin-top: 15px;">
<li>Creates custom domain names (like dezinecode.local)</li>
<li>Modifies your system's hosts file</li>
<li>Can conflict with XAMPP and Laragon's routing</li>
<li>May cause "router is having trouble starting" errors</li>
</ul>
</div>
<p style="margin-top: 20px;">
The solution? Switch Local to <strong>"localhost" routing mode</strong>, which makes it use ports (like localhost:10005) instead of custom domains. This way, all three servers can coexist peacefully! 🕊️
</p>
<div class="warning-box">
<h4>⚠️ Trade-off: HTTPS Support</h4>
<p>When using localhost routing mode, Local will NOT support HTTPS (SSL). This is a limitation of the localhost mode. If you need HTTPS for testing, you'll need to use site domains mode or configure SSL manually.</p>
</div>
</section>
<!-- Why Use It Section -->
<section class="section">
<h2>🌟 Why Configure Local This Way?</h2>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>Benefit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>🔒 No Conflicts</strong></td>
<td>Prevents routing conflicts with XAMPP and Laragon</td>
</tr>
<tr>
<td><strong>🚀 Faster Startup</strong></td>
<td>Local starts quicker without modifying system files</td>
</tr>
<tr>
<td><strong>🛡️ System Integrity</strong></td>
<td>Doesn't modify your hosts file or system DNS</td>
</tr>
<tr>
<td><strong>⚡ Independent Operation</strong></td>
<td>All three servers can run simultaneously</td>
</tr>
<tr>
<td><strong>🔧 Easy Management</strong></td>
<td>Clear port-based URLs (localhost:10005)</td>
</tr>
</tbody>
</table>
</div>
<div class="tip-card" style="margin-top: 30px;">
<h4 style="color: var(--success); margin-bottom: 10px;">💡 Perfect For Multi-Server Setups</h4>
<p>If you're running XAMPP, Laragon, AND Local on the same machine (like for testing different PHP versions or frameworks), this configuration is essential!</p>
</div>
</section>
<!-- How It Works Section -->
<section class="section">
<h2>⚙️ Step-by-Step Configuration</h2>
<div class="steps-container">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-content">
<h3>Open Local Application</h3>
<p>Launch the Local by Flywheel application on your computer. You should see your list of WordPress sites.</p>
<div class="tip-card" style="margin-top: 15px;">
<p>💡 <strong>Tip:</strong> If Local shows a "router is having trouble starting" error, that's a sign you need this configuration!</p>
</div>
</div>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-content">
<h3>Access Preferences</h3>
<p>Click the <strong>profile icon</strong> (usually in the top-left or bottom-left corner) and select <strong>"Preferences"</strong> from the menu.</p>
<div class="info-card" style="margin-top: 15px;">
<p>📍 <strong>Location:</strong> The profile icon looks like a person silhouette or user avatar.</p>
</div>
</div>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-content">
<h3>Navigate to Advanced Settings</h3>
<p>In the Preferences window, you'll see several tabs on the left:</p>
<ul style="line-height: 2; margin: 15px 0;">
<li>Appearance & behavior</li>
<li>New site defaults</li>
<li>Exporting</li>
<li>Connected accounts</li>
<li><strong>Advanced</strong> ← Click this one!</li>
</ul>
</div>
</div>
<div class="step-card">
<div class="step-number">4</div>
<div class="step-content">
<h3>Change Router Mode</h3>
<p>In the Advanced settings, find the <strong>"Router mode"</strong> dropdown menu. It will show two options:</p>
<div style="background: rgba(0,0,0,0.3); padding: 20px; border-radius: 10px; margin: 15px 0;">
<p><strong>Site domains</strong> (default) - Uses custom domains</p>
<p style="margin-top: 10px;"><strong>localhost</strong> ✅ - Uses port-based URLs</p>
</div>
<p>Change it from <strong>"Site domains"</strong> to <strong>"localhost"</strong> and click the green <strong>"Apply"</strong> button.</p>
</div>
</div>
<div class="step-card">
<div class="step-number">5</div>
<div class="step-content">
<h3>Restart Local</h3>
<p>Close the Local application completely and restart it. This ensures the new routing mode takes effect.</p>
<div class="warning-box" style="margin-top: 15px;">
<h4>⚠️ Important</h4>
<p>After restarting, your site URLs will change! Instead of <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">dezinecode.local</code>, you'll access sites at <code style="background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 5px;">localhost:10005</code> (or similar port numbers).</p>
</div>
</div>
</div>
</div>
</section>
<!-- Visual Guide Section -->
<section class="section">
<h2>📸 Visual Step-by-Step Guide</h2>
<p>Here's what each step looks like in the Local application:</p>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Screenshot 1: Initial Local Window (Before Configuration)</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/cn4JfOUDyLAeH0Vl.png?Expires=1771023987&Signature=bxfconIfajIQvFY68VV-RVtuwIHLjyvVtY0NMBJ5NHO2-6x0V3e~fUI3-F76Gztu5khoR9C7lxeizDDKvx-GLM8iyWFb2uzqfnPnmI5HwndYynposSUVaUc5QVa7c7i0e995uybdTgKwC6ltiGVJKv2~z4CCt4SPf2g4Keypw2DbOfLNQ935UuiC8Ji6VGZsBNcQyWp9YNi1--vUuDPeeZYcL1rR5dMPc~ztpqnppwiOFoOf6yA9bTyiGS-rACp6jw1-Xv-9GZYtaOaqAEXgFuy1fRu53Sj5jgq5usNjvWNXnX1y3DeIhNEln50j7eLC9HYXyUDEyAk8BUWm-zEnkA__&Key-Pair-Id=K3USGZIKWMDCSX" alt="Local Initial Window" style="width: 100%; border-radius: 10px; margin: 20px 0;">
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🔍 What You See:</h4>
<ul style="line-height: 2;">
<li>⚠️ <strong>Error Message:</strong> "Heads-up! Local's router is having trouble starting"</li>
<li>🌐 <strong>Site Domain:</strong> dezinecode.local (using site domains mode)</li>
<li>🔒 <strong>SSL:</strong> Shows "Trust" option (available in site domains mode)</li>
<li>📊 <strong>Site Info:</strong> Apache, PHP 8.3.17, MySQL 8.0.35</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Screenshot 2: Preferences - Appearance & Behavior</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/uwUDpOS6fSN1hXqY.png?Expires=1771023987&Signature=T4NDIQEyAhtNUvpv9hAQc7M-bodyZa6Yse5trKcBXC2OsV6gDlpUJPhvPVQ5PynGfjvekt4HGzDMt8sXORbzZOrqe-AUHDkcL-HZG6828W1Hvq7kMkorzU-PtB9JLm3e8ZnK9hl7xQJFYRKsCsRHcyIGQnFvgpUu3RWX~ZYxg3UFtetAVpvr1EwUlMhV~BwtRMsdeQkrzduzNM0-3ykY~p8w2-c4rJHaMPr2DFWvz3CP3KXNUMTyosKfp3W8sJTe41FGaniSf0yJSYpMElYiqQqeVHuAG4lNHfCms6Tw4lXrFFk6f263TLusIZjIKoRDUjYMbRv6db8-6UCRciKafA__&Key-Pair-Id=K3USGZIKWMDCSX" alt="Preferences Window" style="width: 100%; border-radius: 10px; margin: 20px 0;">
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🔍 What You See:</h4>
<ul style="line-height: 2;">
<li>📋 <strong>Left Sidebar:</strong> Shows all preference categories</li>
<li>🎨 <strong>Theme Setting:</strong> Light/Dark mode option</li>
<li>💻 <strong>Terminal:</strong> Command prompt (Cmd) selected</li>
<li>🌐 <strong>Browser:</strong> System default browser setting</li>
</ul>
<p style="margin-top: 15px;"><strong>Note:</strong> This is NOT where we make the router change - we need to go to "Advanced" settings!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Screenshot 3: Advanced Settings (Before Change)</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/ZNcMRvidzApOof5w.png?Expires=1771023987&Signature=vrxevGCsDs~rf3frLWr5PhgCgdtXqjcjPqF0AGK30wjtmqYwfLK7NdDvDYPEW3xqQiK9l719ogErrHJeCpGIrl4xEm5ILhYjrsXFAhRIQ91SCFD3LfZadQEStVqF6JC8PWM7DuLfGe6BiSlVLUIM1ZGf5a9jj7AY1CNk~lITsmSIrzvBL0hO4j--QrXfq~qytTTx5DdZ63VZ24xBpMmmwPUn190FeEioX-FUDxXBSD~L3M2A~vDJuj2hG9NodzazPfbe8Dp0n7akVh4BvbrZIytSc278nRO2r9P3oO-DwqkoDYbCA7kgkoQlH4Y7zH6HzcZDo4xXHynZt8umON8VzQ__&Key-Pair-Id=K3USGZIKWMDCSX" alt="Advanced Settings Before" style="width: 100%; border-radius: 10px; margin: 20px 0;">
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🔍 What You See:</h4>
<ul style="line-height: 2;">
<li>🔧 <strong>Router Mode:</strong> Currently set to "Site domains"</li>
<li>📝 <strong>Explanation:</strong> "Site domains routing mode will use the Local site's domain and allow HTTPS"</li>
<li>⚠️ <strong>Warning:</strong> "localhost routing is less prone to conflicts but does not support HTTPS"</li>
<li>🔘 <strong>Other Options:</strong> Show Develop menu, Usage reporting, Error reporting (all off)</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Screenshot 4: Changing Router Mode</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/IEXXntGida057WbA.png?Expires=1771023987&Signature=wEdq3MEWhAQYFMYI9nxgVCcJPpln4i63ozFw7ieyt5LmzxhUzPKNqSO~qvh~6jbT-VQ3poGZkhzLmcCGke6ZhvIjpcJ5~BupNnfQblFzgPv4CftQfo2trrTWlQfw1ikOpO1MbZJakelCE6vkGk7uBV0xZ2F4mlNSuAD9MFkcqfkzSkMIC5zfIX6awoJhWEBsXor2NJR26TjTuEEPSX~3OxA--9SbDhbYCIMvs7bMTHarNojCNlKgo-Kk4PZy4qR151Z1TresG9I4UDh9JG~zQ-rTtNo-GR9pPTvh92N-SHKHz8ZOMH4uHgaxwM7do-qXJFDsfEW3HLRizbJAqtSnsg__&Key-Pair-Id=K3USGZIKWMDCSX" alt="Changing Router Mode" style="width: 100%; border-radius: 10px; margin: 20px 0;">
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🔍 What You See:</h4>
<ul style="line-height: 2;">
<li>📋 <strong>Dropdown Opened:</strong> Shows "Site domains" and "localhost" options</li>
<li>✅ <strong>Action:</strong> Select "localhost" from the dropdown</li>
<li>🟢 <strong>Apply Button:</strong> Will turn green when ready to apply</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Screenshot 5: After Restart (localhost Mode Active)</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<img src="https://d41chssnpqdne.cloudfront.net/user_upload_by_module/chat_bot/files/26769899/EdtrP9YdB496teQ6.png?Expires=1771023987&Signature=CMsiCIBevj89Qhpg3oJh7wch9E0ZKQWoEheWr96b0HKFDd4J4EclpRsLxY~FOklp1vHD37JrVk4YbAmIznsFYV71tPY-HTlzTE~9NfeDiqfJ4Zz2ze46cJTUBaZPTNXMri~pkIQw0oPqgO4KyrBpGm5R9nTkwjOYaUr8Rs4fBuefdlnH0MqQDhiQGrJq90jIaPi9IwcjRHNVt03WKc7DiCg1mCHEu-ThMeFIuCdNUzlMM9pf3qhcXVZwjGROtmzY5K4aKU0DIsFXrsih1nFNj0k8EeOait7~jx3TN0zJ6oWrGahUedLvHuXG-GKeiHiv-h3pdp5vmC-Rad7Ggc9HMA__&Key-Pair-Id=K3USGZIKWMDCSX" alt="After Restart" style="width: 100%; border-radius: 10px; margin: 20px 0;">
<div class="info-card">
<h4 style="color: var(--info); margin-bottom: 10px;">🔍 What Changed:</h4>
<ul style="line-height: 2;">
<li>✅ <strong>No More Error:</strong> Router error is gone!</li>
<li>🌐 <strong>Site Host:</strong> Now shows "localhost:10005" instead of "dezinecode.local"</li>
<li>⚠️ <strong>SSL Note:</strong> "Note! HTTPS is not available when using the localhost Routing Mode"</li>
<li>🟢 <strong>Status:</strong> Site is running successfully with green indicator</li>
</ul>
</div>
<div class="tip-card" style="margin-top: 20px;">
<h4 style="color: var(--success); margin-bottom: 10px;">🎉 Success!</h4>
<p>Your Local server is now isolated and running independently. You can access your site at <strong>localhost:10005</strong> (or whatever port Local assigns).</p>
</div>
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section class="section">
<h2>⚠️ Common Mistakes</h2>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Forgetting to Click Apply</h4>
<p><strong>Problem:</strong> Changing the router mode but not clicking the "Apply" button</p>
<p><strong>Result:</strong> Changes don't save, router mode stays on "Site domains"</p>
<p><strong>Fix:</strong> Always click the green "Apply" button after making changes!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Not Restarting Local</h4>
<p><strong>Problem:</strong> Applying changes but not restarting the application</p>
<p><strong>Result:</strong> Router mode doesn't fully switch, sites may not work</p>
<p><strong>Fix:</strong> Completely close and restart Local after changing router mode!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Expecting HTTPS to Work</h4>
<p><strong>Problem:</strong> Trying to access sites via https://localhost:10005</p>
<p><strong>Result:</strong> Connection errors, sites won't load</p>
<p><strong>Fix:</strong> Use HTTP only (http://localhost:10005) in localhost mode. HTTPS is not supported!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Forgetting to Update Bookmarks</h4>
<p><strong>Problem:</strong> Trying to access old domain (dezinecode.local)</p>
<p><strong>Result:</strong> Site won't load, shows DNS error</p>
<p><strong>Fix:</strong> Update your bookmarks to use the new localhost:port URLs!</p>
</div>
<div class="mistake-card">
<h4 style="color: var(--danger); margin-bottom: 10px;">❌ Editing Wrong Preferences Section</h4>
<p><strong>Problem:</strong> Looking for router mode in "Appearance & behavior" or other tabs</p>
<p><strong>Result:</strong> Can't find the setting, get frustrated</p>
<p><strong>Fix:</strong> Router mode is ONLY in the "Advanced" tab!</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;">💎 Document Your Port Numbers</h4>
<p>Keep a note of which ports Local assigns to each site:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px;">
<strong>🟢 Local Sites:</strong><br>
• DezineCode: localhost:10005<br>
• TestSite: localhost:10006<br>
• ClientProject: localhost:10007<br>
<br>
<strong>🟠 XAMPP:</strong> localhost:8080<br>
<strong>🔵 Laragon:</strong> localhost
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Use Browser Bookmarks</h4>
<p>Create a bookmark folder for your Local sites:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li>Create a folder called "Local Sites"</li>
<li>Bookmark each site's localhost:port URL</li>
<li>Add descriptive names (e.g., "DezineCode (Local)")</li>
<li>Quick access without remembering port numbers!</li>
</ol>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 When to Use Site Domains Mode</h4>
<p>Consider switching back to "Site domains" mode if:</p>
<ul style="margin-top: 10px; line-height: 2;">
<li>You need to test HTTPS/SSL functionality</li>
<li>You're not using XAMPP or Laragon</li>
<li>You want prettier URLs (site.local vs localhost:10005)</li>
<li>You're testing domain-specific features</li>
</ul>
<p style="margin-top: 10px;">You can always switch back and forth as needed!</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Check Port Availability</h4>
<p>If Local can't start a site, the port might be in use. Check with:</p>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px; font-family: 'Fira Code', monospace; font-size: 0.9rem;">
# Windows Command Prompt<br>
netstat -ano | findstr :10005<br>
<br>
# This shows if port 10005 is in use
</div>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Restart All Servers in Order</h4>
<p>If you're running all three servers, start them in this order:</p>
<ol style="margin-top: 10px; line-height: 2;">
<li><strong>First:</strong> Laragon (uses default ports 80, 443, 3306)</li>
<li><strong>Second:</strong> XAMPP (uses custom ports 8080, 4443, 3307)</li>
<li><strong>Third:</strong> Local (uses dynamic ports like 10005)</li>
</ol>
<p style="margin-top: 10px;">This minimizes port conflicts!</p>
</div>
<div class="tip-card">
<h4 style="color: var(--success); margin-bottom: 10px;">💎 Understanding the Trade-offs</h4>
<div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-top: 10px;">
<p><strong>Site Domains Mode:</strong></p>
<p>✅ Pretty URLs (site.local)</p>
<p>✅ HTTPS support</p>
<p>❌ Can conflict with other servers</p>
<p>❌ Modifies system files</p>
<br>
<p><strong>Localhost Mode:</strong></p>
<p>✅ No conflicts</p>
<p>✅ Faster startup</p>
<p>❌ Port-based URLs (localhost:10005)</p>
<p>❌ No HTTPS support</p>
</div>
</div>
</section>
<!-- Quiz Section -->
<section class="section">
<h2>🎯 Knowledge Check</h2>
<p>Test your understanding of Local configuration!</p>
<div class="quiz-container">
<div class="quiz-question">
<h4>Question 1: Where do you find the Router Mode setting?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">A) Appearance & behavior tab</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">B) New site defaults tab</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 0)">C) Advanced tab</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 0)">D) Connected accounts tab</div>
<div class="quiz-feedback" id="feedback0"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What happens when you switch to localhost routing mode?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">A) Sites become inaccessible</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">B) Sites use port-based URLs (localhost:10005)</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">C) HTTPS becomes available</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">D) All sites are deleted</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 3: What is the main benefit of localhost routing mode?</h4>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">A) Enables HTTPS support</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">B) Makes sites load faster</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">C) Prevents conflicts with XAMPP and Laragon</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">D) Creates prettier URLs</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 Guide</h2>
<div class="summary-grid">
<div class="summary-item">
<div style="font-size: 3rem;">1️⃣</div>
<h4>Open Local</h4>
<p>Launch the application</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">2️⃣</div>
<h4>Preferences</h4>
<p>Click profile icon → Preferences</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">3️⃣</div>
<h4>Advanced Tab</h4>
<p>Navigate to Advanced settings</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">4️⃣</div>
<h4>Change Mode</h4>
<p>Site domains → localhost</p>
</div>
<div class="summary-item">
<div style="font-size: 3rem;">5️⃣</div>
<h4>Apply & Restart</h4>
<p>Click Apply, restart Local</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>✅ Localhost mode prevents conflicts with XAMPP and Laragon</li>
<li>✅ Sites will use port-based URLs (localhost:10005)</li>
<li>✅ HTTPS is NOT available in localhost mode</li>
<li>✅ Always click Apply and restart Local</li>
<li>✅ Update your bookmarks to new URLs</li>
<li>✅ All three servers can now run simultaneously</li>
</ul>
</div>
<div style="margin-top: 30px; text-align: center;">
<p style="color: white; font-size: 1.3rem; margin-bottom: 15px;">🎉 Configuration Complete!</p>
<p style="color: white; opacity: 0.9; font-size: 1.1rem;">Your Local server is now isolated and running independently from XAMPP and Laragon. Happy developing! 🚀</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<h3 style="background: linear-gradient(135deg, var(--local), var(--success)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">🎉 Tutorial Complete!</h3>
<p style="margin: 20px 0;">You've successfully learned how to isolate Local from other development servers!</p>
<div>
<div class="badge">🟢 Local</div>
<div class="badge">🟠 XAMPP</div>
<div class="badge">🔵 Laragon</div>
<div class="badge">🔧 Configuration</div>
<div class="badge">✅ Multi-Server Setup</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' });
}
// 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');
}
}
// 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,
Live Preview