Vite in Practice: Run, Test, and Build a Project

Vite is a modern build tool that dramatically speeds up front-end development. In practice, you run a project with npm run dev, test it with npm run test (after adding a test runner), and build it for production with npm run build. These commands are defined in your package.json and are the core workflow for any Vite-based project.

What Vite Does Differently

Traditional bundlers like webpack process your entire application before showing anything in the browser. Vite takes a different approach: during development, it serves your source files directly as native ES modules, only transforming a file when the browser requests it. This means startup is nearly instant, and hot module replacement (HMR) updates only the changed module without reloading the whole page. For production, Vite uses Rollup to bundle and minify your code into optimized static assets.

Setting Up a New Vite Project

To create a new project, run the following command in your terminal:

npm create vite@latest my-project -- --template react

This scaffolds a project with a package.json, vite.config.js, and a basic src directory. You can choose templates for vanilla JavaScript, Vue, React, Svelte, or others. After scaffolding, install dependencies with npm install.

Running the Development Server

Once dependencies are installed, start the dev server with:

npm run dev

By default, Vite serves your app at http://localhost:5173. The server supports hot module replacement, so edits to your source files appear instantly in the browser without a manual refresh. You can change the port with --port or by editing vite.config.js.

Writing and Running Tests

Vite does not include a built-in test runner, but it integrates seamlessly with popular testing libraries. The most common setup is Vitest, a testing framework designed specifically for Vite. To add it, run:

npm install -D vitest

Then add a test script to your package.json:

"scripts": {
  "test": "vitest"
}

Create a test file, for example src/App.test.js, and write a simple test:

import { describe, it, expect } from 'vitest';

describe('basic math', () => {
  it('adds numbers', () => {
    expect(1 + 2).toBe(3);
  });
});

Run npm run test to execute all test files. Vitest also supports watch mode with vitest --watch.

Building for Production

When you are ready to deploy, run:

npm run build

This command triggers Vite’s production build, which uses Rollup to bundle your code, minify it, and output the result to a dist folder. The build process also handles asset fingerprinting, CSS extraction, and code splitting. You can preview the production build locally with:

npm run preview

The preview server serves the dist folder at a local URL, letting you verify everything works before deploying.

Common Issues and Troubleshooting

• Port already in use: Vite will automatically pick the next available port. You can force a specific port with --port 3000.
• Dependency optimization errors: If you see “Failed to resolve import”, try deleting node_modules and package-lock.json, then run npm install again.
• Environment variables not working: Vite only exposes variables prefixed with VITE_ to the client. Use import.meta.env.VITE_API_URL instead of process.env.
• Slow build times: Large dependencies can slow down the production build. Use dynamic imports (import()) to code-split your app.

Comparing Vite to Other Tools

Vite is often compared to webpack and Create React App (CRA). Webpack is more configurable but requires more setup and has slower dev server startup. CRA hides configuration but gives you less control and has slower HMR. Vite offers a middle ground: fast by default, minimal configuration, and easy to extend via plugins. For new projects, Vite is widely recommended, and many frameworks (like Vue and Svelte) officially recommend it.

Frequently Asked Questions

Do I need to install anything extra to test a Vite project?

Yes, Vite does not include a test runner. You need to install a testing library like Vitest, Jest, or Playwright. Vitest is the most seamless choice because it uses the same configuration file as Vite.

What is the difference between npm run dev and npm run build?

npm run dev starts a development server with hot reloading, serving source files directly. npm run build creates an optimized production bundle in the dist folder, which you can deploy to a web server.

Can I use Vite with TypeScript?

Yes, Vite supports TypeScript out of the box. When you create a project with --template react-ts or --template vue-ts, it sets up TypeScript automatically. You can also add TypeScript to an existing project by installing typescript and creating a tsconfig.json.

How do I change the output directory for the build?

In vite.config.js, set build.outDir to your preferred folder name, for example build or public. The default is dist.

Is Vite suitable for large production applications?

Yes, Vite is used by many large projects. Its production build is based on Rollup, which is mature and supports advanced features like manual chunks and dynamic imports. For very large codebases, you may need to fine-tune the build configuration, but Vite handles most cases well.

Related

• Realtek HD Audio Manager Not Opening? Fix It
• Chicken Fighter Nebula Hen Cycle of Ash Fusion
• Wordle Hard Mode: Rules, Tips & How to Turn It On