How to Change vite application port

Question

If you are change the vite application port please follow the procedure.

"scripts": {
  "dev": "vite --port 3006",
  "build": "vite build",
  "preview": "vite preview"
}

Osteogenesis

Is this an answer or a question? – Clea

Answer 1

Try add your port into vite.config.ts:

 export default defineConfig({
  // ...some configs
  server: {
    port: 3006,
  },
});

Lifesaving

I created the file but is not working – Cup

@Cup make sure to run just vite and not vite preview. vite preview does not look at that setting. – Francie

@Cup just to clarify, vite preview looks at preview, which is the identical config format to server – Alcoholize

Answer 2

you can modify the dev script in the package.json file and set the --port to the one you want .

Ingathering

Answer 3

in vite.config.ts you can manage the port separately for production and development. PORT server: production. PORT preview: development

export default defineConfig({
//change port for production
  preview: {
    port: 3001,
  },
// for dev
  server: {
    port: 3000,
  },
});

Gabbert

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Scrip

Answer 4

In addition to defining it in the config or providing it on the command line, it's also possible to configure the port in .env files - anything in .env / .env.production etc that's prefixed with VITE_ will be automatically available to your app via import.meta.env and can be loaded into the vite.config.ts file using loadEnv:

import react from '@vitejs/plugin-react';
import { ConfigEnv, defineConfig, loadEnv } from 'vite';

export default defineConfig(({command, mode} : ConfigEnv) => {
    console.log(`configuring vite with command: ${command}, mode: ${mode}`);
    // suppress eslint warning that process isn't defined (it is)
    // eslint-disable-next-line
    const cwd = process.cwd();
    console.log(`loading envs from ${cwd} ...`);
    const env = {...loadEnv(mode, cwd, 'VITE_')};
    console.log(`loaded env: ${JSON.stringify(env)}`);

    // reusable config for both server and preview
    const serverConfig = {
        host: true,
        port: Number(env.VITE_PORT),
        strictPort: true,
    };

    return {
        base: '/',
        plugins: [react()],
        preview: serverConfig,
        server: serverConfig,
    };
});

Alcoholize