Fix Vite dev server not starting on port 5173

[Copilot]

Problem

When running npm run dev, the Vite development server was not accessible at http://localhost:5173/. The root URL returned a 404 error, making it seem like the server wasn't running at all, even though the @crxjs/vite-plugin was successfully building the extension.

This issue occurs because @crxjs/vite-plugin is specifically designed for Chrome extension development and doesn't configure a traditional web server by default. While the plugin does start Vite in watch mode to build the extension, it doesn't expose the typical development server interface that developers expect.

Solution

Added explicit server configuration to vite.config.js to ensure the Vite dev server runs properly on port 5173:

export default defineConfig({
  plugins: [
    crx({ manifest })
  ],
  server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173
    }
  },
  // ... rest of config
})

Created a user-friendly index.html landing page that serves as a development dashboard, providing:

• Confirmation that the dev server is running
• Direct links to extension components (popup, etc.)
• Clear instructions for loading the extension in Chrome
• Information about HMR functionality

Updated the README to clarify that the dev server is accessible and how to use it during development.

Result

✅ Dev server now properly starts and is accessible at http://localhost:5173/
✅ Root URL displays a helpful development dashboard
✅ Extension components can be previewed directly in the browser (e.g., http://localhost:5173/src/popup/popup.html)
✅ Extension still builds correctly to the dist/ folder for Chrome
✅ HMR functionality is fully preserved

Screenshots

Development Server Dashboard:

The landing page provides clear instructions and links to extension components.

Popup Component Preview:

Individual extension components can now be previewed directly in the browser with HMR support.

Original prompt

when running npm run dev the vite server does not starts import any port, in fact the http://localhost:5173/ is unreachable. How to fix that?

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.