feat!: vite dev default port is now 5173 (#8148)

Author: patak-dev

docs/config/index.md

@@ -477,7 +477,7 @@ export default defineConfig(({ command, mode }) => {
 ### server.port
 
 - **Type:** `number`
-- **Default:** `3000`
+- **Default:** `5173`
 
   Specify server port. Note if the port is already being used, Vite will automatically try the next available port so this may not be the actual port the server ends up listening on.
 
@@ -551,7 +551,7 @@ export default defineConfig(({ command, mode }) => {
         },
         // Proxying websockets or socket.io
         '/socket.io': {
-          target: 'ws://localhost:3000',
+          target: 'ws://localhost:5173',
           ws: true
         }
       }

docs/guide/api-plugin.md

@@ -11,7 +11,7 @@ Vite strives to offer established patterns out of the box, so before creating a
 When creating a plugin, you can inline it in your `vite.config.js`. There is no need to create a new package for it. Once you see that a plugin was useful in your projects, consider sharing it to help others [in the ecosystem](https://chat.vitejs.dev).
 
 ::: tip
-When learning, debugging, or authoring plugins we suggest including [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) in your project. It allows you to inspect the intermediate state of Vite plugins. After installing, you can visit `localhost:3000/__inspect/` to inspect the modules and transformation stack of your project. Check out install instructions in the [vite-plugin-inspect docs](https://github.com/antfu/vite-plugin-inspect).
+When learning, debugging, or authoring plugins we suggest including [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) in your project. It allows you to inspect the intermediate state of Vite plugins. After installing, you can visit `localhost:5173/__inspect/` to inspect the modules and transformation stack of your project. Check out install instructions in the [vite-plugin-inspect docs](https://github.com/antfu/vite-plugin-inspect).
 ![vite-plugin-inspect](/images/vite-plugin-inspect.png)
 :::
 

docs/guide/backend-integration.md

@@ -29,11 +29,11 @@ If you need a custom integration, you can follow the steps in this guide to conf
    import 'vite/modulepreload-polyfill'
    ```
 
-2. For development, inject the following in your server's HTML template (substitute `http://localhost:3000` with the local URL Vite is running at):
+2. For development, inject the following in your server's HTML template (substitute `http://localhost:5173` with the local URL Vite is running at):
 
    ```html
    <!-- if development -->
-   <script type="module" src="http://localhost:3000/main.js"></script>
+   <script type="module" src="http://localhost:5173/main.js"></script>
    ```
 
    In order to properly serve assets, you have two options:
@@ -47,7 +47,7 @@ If you need a custom integration, you can follow the steps in this guide to conf
 
    ```html
    <script type="module">
-     import RefreshRuntime from 'http://localhost:3000/@react-refresh'
+     import RefreshRuntime from 'http://localhost:5173/@react-refresh'
      RefreshRuntime.injectIntoGlobalHook(window)
      window.$RefreshReg$ = () => {}
      window.$RefreshSig$ = () => (type) => type

docs/guide/ssr.md

@@ -89,7 +89,7 @@ async function createServer() {
     // serve index.html - we will tackle this next
   })
 
-  app.listen(3000)
+  app.listen(5173)
 }
 
 createServer()

packages/vite/src/node/server/index.ts

@@ -571,7 +571,7 @@ async function startServer(
   }
 
   const options = server.config.server
-  const port = inlinePort ?? options.port ?? 3000
+  const port = inlinePort ?? options.port ?? 5173
   const hostname = resolveHostname(options.host)
 
   const protocol = options.https ? 'https' : 'http'

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -92,10 +92,10 @@ const processNodeUrl = (
     originalUrl !== '/' &&
     htmlPath === '/index.html'
   ) {
-    // #3230 if some request url (localhost:3000/a/b) return to fallback html, the relative assets
+    // #3230 if some request url (localhost:5173/a/b) return to fallback html, the relative assets
     // path will add `/a/` prefix, it will caused 404.
-    // rewrite before `./index.js` -> `localhost:3000/a/index.js`.
-    // rewrite after `../index.js` -> `localhost:3000/index.js`.
+    // rewrite before `./index.js` -> `localhost:5173/a/index.js`.
+    // rewrite after `../index.js` -> `localhost:5173/index.js`.
     s.overwrite(
       node.value!.loc.start.offset,
       node.value!.loc.end.offset,

playground/cli-module/__tests__/serve.ts

@@ -94,7 +94,7 @@ export async function serve() {
   }
 
   try {
-    await startedOnPort(serverProcess, port, 3000)
+    await startedOnPort(serverProcess, port, 5173)
     return { close }
   } catch (e) {
     collectErrorStreams('server', e)

playground/cli/__tests__/serve.ts

@@ -79,7 +79,7 @@ export async function serve() {
       const timeoutError = `server process still alive after 3s`
       try {
         await killProcess(serverProcess)
-        await resolvedOrTimeout(serverProcess, 3000, timeoutError)
+        await resolvedOrTimeout(serverProcess, 5173, timeoutError)
       } catch (e) {
         if (e === timeoutError || (!serverProcess.killed && !isWindows)) {
           collectErrorStreams('server', e)
@@ -94,7 +94,7 @@ export async function serve() {
   }
 
   try {
-    await startedOnPort(serverProcess, port, 3000)
+    await startedOnPort(serverProcess, port, 5173)
     return { close }
   } catch (e) {
     collectErrorStreams('server', e)

playground/json/server.js

@@ -78,8 +78,8 @@ async function createServer(
 
 if (!isTest) {
   createServer().then(({ app }) =>
-    app.listen(3000, () => {
-      console.log('http://localhost:3000')
+    app.listen(5173, () => {
+      console.log('http://localhost:5173')
     })
   )
 }

playground/optimize-missing-deps/server.js

@@ -51,8 +51,8 @@ async function createServer(root = process.cwd()) {
 
 if (!isTest) {
   createServer().then(({ app }) =>
-    app.listen(3000, () => {
-      console.log('http://localhost:3000')
+    app.listen(5173, () => {
+      console.log('http://localhost:5173')
     })
   )
 }