change port in react project with VITE

Question

I'm working on an application integrated with Laravel 10 and React JS and I'm using Vite. I changed the port in package.json in the scripts part as follows ("dev": "vite --port=3000"), but the server does not open in this port, it opens in the default port they gave me (http:// /localhost:5173) and everything I created doesn't appear. Don't know what the problem is?

I reinstalled Node_modules but I still have the same problem

Answer 1

In your package.json scripts, change your dev command from "dev": "vite" to "dev": "vite --port 3000".

After you run the dev command, you need to go to http://localhost/ not http://localhost:3000.

Answer 2

To change the port number that your react application is served from, open vite.config.ts or vite.config.js which is located at the root of your application then put

import path from "path"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

export default defineConfig({
// add the below code
  server: {
    port: 5173 // change here
  },
})