CodeNex

Setting Up React with Vite: A Modern Development Workflow

Hazrat Mosaddique Ali's photo
Hazrat Mosaddique Ali
·

3 min read

Setting Up React with Vite: A Modern Development Workflow

Introduction

React is now one of the most popular JavaScript libraries for building user interfaces. While tools like Create React App (CRA) have been the standard choice for starting React projects, Vite has appeared as a faster, more modern option. In this article, we’ll guide you through setting up a React project with Vite and explore its file structure to see why it’s a game-changer for developers.

Why Vite?

Vite (French for "fast") is a build tool created by Evan You, the author of Vue.js. It offers:

  • Lightning-fast development server with Hot Module Replacement (HMR).

  • Optimized production builds using Rollup.

  • Out-of-the-box support for TypeScript, CSS preprocessors, and more.

  • Simpler configuration compared to Webpack-based setups.

Step 1: Setting Up a React Project with Vite

Prerequisites

  • Node.js (lts recommended)

  • npm/yarn/pnpm (we’ll use npm here)

Create the Project

  1. Run the following command in your terminal:

     npm create vite@latest

  2. Follow the prompts:

    • Project name: Enter a name (e.g., my-react-app).

    • Framework: Select React.

    • Variant: Choose JavaScript or TypeScript (we’ll use JavaScript for this guide).

  3. Navigate to your project directory and install dependencies:

     cd my-react-app
 npm install

  4. Start the development server:

     npm run dev

    Your app will be running at http://localhost:5173.

Step 2: Understanding the File Structure

After setup, your project will look like this:

my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
│   └── App.css
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

Let’s break down the key files and folders:

1. public/

  • Contains static assets like images or fonts that are directly copied to the build output.

  • Example: vite.svg is accessible at /vite.svg in your app.

2. src/

The heart of your React application:

  • assets/: Stores static assets (e.g., images) used in components.

  • main.jsx: The entry point for your app. It renders the root App component into the DOM.

      import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.jsx'
  import './index.css'

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )

  • App.jsx: The root component of your app. Modify this to build your UI.

  • index.css: Global CSS styles.

  • App.css: Component-specific styles (optional; you can use CSS-in-JS libraries instead).

3. index.html

  • The single HTML page where your React app mounts.

  • Note: Vite places this file in the root directory (unlike CRA, which hides it in public/).

  • The <div id="root"> is where your React app is injected.

  • Vite automatically injects scripts using ES modules (no manual bundling required!).

4. Configuration Files

  • vite.config.js: Customize Vite’s behavior (e.g., add plugins, configure proxies).We will add Tailwind CSS in the next vlog.

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

  export default defineConfig({
    plugins: [react()],
  })

  • package.json: Lists dependencies and scripts. Key scripts:

    • dev: Starts the development server.

    • build: Creates an optimized production build.

    • preview: Locally previews the production build.

Key Differences from Create React App

  1. Speed: Vite’s dev server starts instantly thanks to ES modules.

  2. Build Tool: Uses Rollup instead of Webpack for smaller, optimized builds.

  3. Configuration: Less boilerplate; easier to extend.

Tips for Development

  • Use CSS Modules: Rename .css files to .module.css for scoped styles.

  • Environment Variables: Prefix variables with VITE_ to expose them to your app (e.g., VITE_API_KEY).

  • Routing: Install react-router-dom for client-side routing.

Conclusion

Vite revolutionizes the React development workflow by prioritizing speed and simplicity. Its intuitive file structure and modern tooling make it an excellent choice for both small projects and large-scale applications. Give it a try, and you might never go back to traditional setups!

react jsvite