How to Handle Static Assets in Vite?

In Vite, static assets are files such as images, fonts, and other resources that are served directly to the browser. They should be placed in the public directory, which makes them accessible via the root URL. Vite efficiently handles these assets during development and builds them into the final output.

Prerequisites

• Nodejs
• React

Approach

We have discussed how to handle static assets in Vite by placing them in the public directory, where they are served directly at the root URL. By referencing these assets in your React components using relative paths, you can dynamically manage their appearance and behavior.

Steps to Set Up and Handle Static Assets in Vite Project

Step 1: Install NodeJs, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

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

Step 3: Select a framework: select the React framework here using the downward arrow key. You can select any of the frameworks as per your requirements.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to my-react-app directory

cd my-react-app

Step 6: Install Dependencies

npm install

Dependencies:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

Step 8: Create a public Directory for Static Assets

Create a public directory in your project root if not present. This directory will be used to store static assets like images, fonts, and other files that need to be served as-is.

mkdir public

Step 9: Add Static Assets, Place your static assets in the public directory. For example, if you have an image named gfglogo.png, you can place it in the public directory:

Project Structure:

Example: In this example, we are handling static assets in a Vite-powered React application by using an image file (gfglogo.png) from the public directory. The image is displayed with dynamic styling, toggling its size between small and large when clicked, showing how to manage and interact with static files in a React component.

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #282c34;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.App {
  text-align: center;
}

.App-header {
  background-color: #61dafb;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}

.App-header:hover {
  background-color: #21a1f1;
}

.logo {
  cursor: pointer;
  transition: transform 0.3s ease-in-out, 
      box-shadow 0.3s ease-in-out;
  margin: 20px;
}

.logo.small {
  width: 100px;
  height: auto;
}

.logo.large {
  width: 200px;
  height: auto;
}

p {
  font-size: 18px;
}

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [toggle, setToggle] = useState(false);

  const handleToggle = () => {
    setToggle(!toggle);
  };

  return (
    <div className="App">
      <h1>Handle Static Assets in Vite</h1>
      <img 
        src="/gfglogo.png" 
        alt="Logo" 
        className={`logo ${toggle ? 'large' : 'small'}`}
        onClick={handleToggle}
      />
      <p>Click the logo to toggle its size!</p>
    </div>
  );
};

export default App;

Step 10: Start Server using below command, make sure check your port no on the terminal it may be different for you system.

npm run dev
  ➜  Local:   http://localhost:5173/

Output: