Vite Introduction to Accelerate React Development: A Fast and Flexible Project Setup Guide

Introduction

As frontend development continues to evolve, the demand for tools that enable faster and more efficient development is increasing. Among these tools, Vite has been attracting a lot of attention in recent years. In this article, we’ll explain Vite’s basic characteristics and advantages, walk through how to actually set up a React project, and show you how to make use of its convenient features. By leveraging Vite, you can experience how much your development speed and overall DX can improve—give it a try and feel its appeal for yourself.

Goal of this article

We’ll set up Vite so that we can run React.

After that, we’ll look at how to switch between environments such as production and development, and how to configure aliases to simplify module imports.

What is Vite?

Vite is a next-generation build tool for frontend development. Its name comes from the French word “vite,” meaning “fast.” Its main characteristics and advantages can be summarized as follows:

Features

1. Ultra-fast development server
   Vite uses native ES modules (ESM), so unlike traditional bundlers, it doesn’t need to pre-bundle all modules. This allows the development server to start up almost instantly, even for large projects.

2. On-demand module loading
   Only the modules that are needed are loaded dynamically, which improves performance when reloading pages.

3. Fast builds
   Vite uses Rollup under the hood, providing efficient builds with features like tree-shaking and code splitting. In addition, dependencies are pre-bundled only once, so repeated builds are also fast.

4. Plugin system
   Vite can leverage Rollup plugins, giving it a high degree of customizability. There are also many Vite-specific plugins available.

5. Broad framework support
   You can easily set up frameworks like Vue.js, React, Svelte, and Preact. Official templates and plugins are provided, so you can start using them right away.

6. HMR (Hot Module Replacement)
   When you edit code, the changes are reflected in the browser in real time, greatly improving the development experience.

Starting React with Vite

Let’s immediately create a project and start React.

You can create a project with the following command.

After that, you’ll be prompted with several interactive options; choose them according to the requirements for this article.

npm create vite@latest

• Project name: vite-project
• Select a framework: React
• Select a variant: TypeScript + SWC

That’s all it takes to create the project.

As shown on the screen, install the packages and try starting React.

cd vite-project
npm install
npm run dev

React is now running.

If you click the button in the center, the count will increase.

Since it runs so easily, you might not understand how it works at all, so let’s go through it step by step.

Explanation of the command line

If you open package.json, you’ll see that some commands are defined.

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

To start the development server, you can use the npm run dev command we used earlier.
When you edit code, the changes are detected, rebuilt, and displayed automatically.

To build the project, run npm run build.
By default, the dist folder will be generated containing html, css, js, and other assets such as images.

npm run build

If you want to check the built files, run npm run preview.
You can use the server built into vite to view the already-built files.

npm run preview

https://ja.vite.dev/guide/cli.html#vite-preview

Environment variables and modes

In Vite, you can easily determine whether the app is currently running in development mode or production mode using import.meta.env.
Let’s slightly modify the sample code that was provided.

function App() {
  const isDev = import.meta.env.DEV
  return (
    <>
      {isDev ? 'Development mode' : 'Production mode'}
    </>
  )
}

export default App

import.meta.env.DEV returns a boolean indicating whether the app is running in development.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Therefore, if you start the app with the following command, it will display Development mode:

npm run dev

If you start it with the commands below, it will display Production mode.

npm run build

npm run preview

In this example we just switched the text, but you could also switch the background with CSS, for example, to clearly distinguish whether you’re currently accessing the development environment or the production environment.

Vite configuration

You can configure Vite in the vite.config.ts file.

Basic structure

The following configuration relates to how the app runs in the development environment. It specifies the port number and sets the browser to open automatically.

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+ server: {
+   port: 3000, // Specify the port for the development server
+   open: true, // Automatically open the browser when the dev server starts
+ },
});

Setting up aliases

This is how to configure aliases to shorten long relative paths.

We’ll configure this while doing a simple behavior check.

Create a new components directory and add a component.

const SampleComponent = () => {
  return (
    <div>
      sample
    </div>
  )
}

export default SampleComponent

If you get a type error, modify the tsconfig.app.json file.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
- "include": ["src"]
+ "include": ["src", "components"]
}

Component that imports it:

import SampleComponent from "../../components/Sample"

function Test() {
  return (
    <div>
      <SampleComponent />
    </div>
  )
}

export default Test

The directory depth isn’t that great yet, so it might not be a problem at this stage, but as development progresses, the structure will likely get deeper and deeper.

We’ll address this by using aliases to shorten the import paths.

First, change the settings in vite.config.ts.

npm install --save-dev @types/node

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path';

// https://vite.dev/config/
export default defineConfig(() => {
  return {
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './components'),
      },
    },
  };
});

Next, update the settings in tsconfig.app.json as well.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

+   "baseUrl": ".",
+   "paths": {
+     "@/*": ["src/*"],
+     "@components/*": ["components/*"]
+   }
  },
- "include": ["src"]
+ "include": ["src", "components"]
}

After changing the settings, the editor will also switch to showing imports using the aliases.

By using aliases like this, imports remain easy to read even with deep directory structures, improving code readability.

- import SampleComponent from "../../components/Sample"
+ import SampleComponent from "@components/Sample"

function Test() {
  return (
    <div>
      <SampleComponent />
    </div>
  )
}

export default Test

Benefits of setting aliases

• Improved readability: You no longer need long relative paths, so your code becomes more concise.
• Easier refactoring: Even if you change the project structure, you only need to update the aliases.
• Bug prevention: Reduces the risk of specifying incorrect relative paths.

Alias configuration is a powerful way to improve development efficiency, especially as your project grows larger.

Conclusion

Vite is a lightweight, fast, and highly flexible frontend build tool that has gained strong support from many developers. In this article, we covered its features, how to use it in a React project, how to work with environment variables, and key customization points. By introducing Vite, your development experience can improve dramatically, and you may rediscover the joy of writing code. Give Vite a try in your next project and experience its speed and convenience for yourself.