Skip to content

Fix Vite dev server not starting on port 5173 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Fix Vite dev server not starting on port 5173 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
facb24f
Initial plan
Copilot Oct 1, 2025
9d85885
Fix Vite dev server accessibility on port 5173
Copilot Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ Start the development server with HMR:
npm run dev
```

This will create a `dist` folder with the extension build. To load it in Chrome:
The development server will start on `http://localhost:5173/`. You can:
- View the dev server dashboard at `http://localhost:5173/`
- Preview individual components like `http://localhost:5173/src/popup/popup.html`

This will also create a `dist` folder with the extension build. To load it in Chrome:

1. Open Chrome and navigate to `chrome://extensions/`
2. Enable "Developer mode" (toggle in the top right)
Expand Down
111 changes: 111 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Tools - Development Server</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin: 0;
padding: 40px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
max-width: 600px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
margin-top: 0;
font-size: 32px;
}
p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
}
.links {
margin-top: 30px;
}
.link-card {
background: rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 15px;
text-decoration: none;
color: white;
display: block;
transition: transform 0.2s, background 0.2s;
}
.link-card:hover {
transform: translateX(10px);
background: rgba(255, 255, 255, 0.3);
}
.link-card h3 {
margin: 0 0 5px 0;
font-size: 18px;
}
.link-card p {
margin: 0;
font-size: 14px;
opacity: 0.8;
}
.info-box {
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 20px;
margin-top: 20px;
border-left: 4px solid white;
}
.info-box h3 {
margin-top: 0;
}
code {
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;
border-radius: 4px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>🛠️ Modern Tools Extension</h1>
<p>Chrome Extension Development Server</p>

<div class="info-box">
<h3>✅ Dev Server Running</h3>
<p>The Vite development server is running successfully! You can access the extension components below:</p>
</div>

<div class="links">
<a href="/src/popup/popup.html" class="link-card">
<h3>📱 Popup Page</h3>
<p>View the extension popup interface</p>
</a>
</div>

<div class="info-box">
<h3>🔧 Loading the Extension</h3>
<p>To use this extension in Chrome:</p>
<ol style="margin: 10px 0; padding-left: 20px;">
<li>Open Chrome and navigate to <code>chrome://extensions/</code></li>
<li>Enable "Developer mode" (toggle in the top right)</li>
<li>Click "Load unpacked"</li>
<li>Select the <code>dist</code> folder from this project</li>
</ol>
<p>Changes to your code will automatically update in the extension with Hot Module Replacement (HMR)!</p>
</div>
</div>
</body>
</html>
7 changes: 7 additions & 0 deletions vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ export default defineConfig({
plugins: [
crx({ manifest })
],
server: {
port: 5173,
strictPort: true,
hmr: {
port: 5173
}
},
build: {
rollupOptions: {
input: {
Expand Down