Run the Vite dev server on a custom port

The Vite development server defaults to the network port 3000. Or it tries to find an available port if it is already taken, unless the strictPort option is set to true.

Since port 3000 is not uncommon for a development server it might already be taken by your Ruby on Rails development server.

A first option is to pass the port as a CLI option. Assuming that npm run dev will start the development server you can use the following to start on port 8000.

$ npm run dev -- --port 8000

Personally I prefer this over setting a port in the package.json file. This way I don't dictate which port other developers in the team have to use in their development environment.

Another option would be add the according configuration to your vite.config.[js|ts] file.

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 8000,
  },
})

Instead of hardcoding a specific as I did above you could for example check for an environment variable PORT. Which again you would set when running the npm run dev command.