DEV Community: Vira Velmozhna

How Vite resolves relative and absolute paths

Vira Velmozhna — Fri, 11 Apr 2025 20:01:40 +0000

Hello everyone!

If you're working with Vite and handling static assets like fonts or images, path resolution can be tricky — especially when things work in one environment but not in others. In this article, I’ll explain you how Vite builds projects, the difference between absolute and relative paths, and share a real-life bug I encountered that illustrates why this stuff matters.

How Vite Builds Projects

When you run vite build, Vite compiles, bundles, and optimizes your app into a production-ready folder called dist/. This folder is what you deploy — everything else stays behind.

Here’s an example of a project structure before build:

project-folder/
├── public/
│   └── fonts/
│       └── icon-font.woff
│
├── src/
│   ├── main.js
│   ├── styles/
│   │   └── app.less
│   └── components/
│       └── ...
│
├── index.html
├── vite.config.js
└── package.json

After building, your dist/ folder might look like this:

dist/
├── assets/
│   ├── app-9f3a2b4d.js
│   ├── style-2c1f6a7e.css
│   └── vendor-1a2b3c4d.js
└── fonts/
    └── icon-font.woff

What’s in the `dist/` folder:

assets/: contains final, optimized JS and CSS files:

app-xxxx.js – main application bundle
style-xxxx.css – compiled styles from .less, .scss, or .css files
vendor-xxxx.js – third-party libraries

fonts/: Includes static assets (like fonts) copied from the public/ folder

Key Notes:

The src/ folder and any source files (like app.less) are not included in the build.
All filenames are hashed for cache busting, ensuring browsers load the latest version after deployments.
This build is fully static and ready to be hosted on any static server (Netlify, Vercel, GitHub Pages, etc.)

How Absolute Paths Work in Vite

In Vite, an absolute path starts with a /. For example:

@icon-font-path: "/fonts/icon-font.woff";

The leading slash tells the browser (and Vite) to look in the root of the site.

Here’s how Vite resolves it:

In development (vite dev): Vite serves files in the public/ directory at the root level. So /fonts/icon-font.woff is resolved as public/fonts/icon-font.woff.

In production (vite build): Vite maintains this path, assuming that fonts/icon-font.woff will be at the root of the deployed dist/ folder.

This means that any asset placed in the public/ folder can be accessed directly using an absolute path that starts with /.

How Relative Paths Work in Vite

A relative path points to a file based on the current file’s location. For example:

@icon-font-path: "../fonts/icon-font.woff";

Relative paths work well when you're referencing files inside the src/ folder, as long as the file structure matches and Vite can bundle those files correctly.

However, issues can arise if the relative path doesn't correctly reflect the file system, especially if you're referencing something that lives outside of src/, such as in public/.

Real-life example: Why the relative path failed

Let’s look at a bug I encountered on a new project.
Here's the structure of the project:

project-folder/
│
├── public/
│    └── fonts/
│         └── icon-font.woff
│
├── src/
│    └── styles/
│         └── app.less
│

Originally, in app.less a relative path was used:

@icon-font-path: "../fonts/icon-font.woff";

This path worked fine in production and some environments, but when I ran the project locally with vite dev, the icon fonts didn’t load.

Why it failed locally:

The font folder was in the public/ directory.
Relative paths from within src/ can’t access files in public/.
So the file was simply not found.

Why it worked in production:

Vite was bundling everything, and the compiled CSS or JS file (e.g. app-9f3a2b4d.js) ended up inside the dist/assets/ folder. Meanwhile, the font file from the public/fonts/ directory was copied into dist/fonts/.

The resulting dist/ structure looked like this:

dist/
├── assets/
│   ├── app-9f3a2b4d.js
│   ├── style-2c1f6a7e.css
│   └── vendor-1a2b3c4d.js
└── fonts/
    └── icon-font.woff

The path used in the compiled CSS or JS was relative — and since those files were in dist/assets/, a path like ../fonts/icon-font.woff would still point correctly to dist/fonts/.

In other words, from assets/style-2c1f6a7e.css, the browser goes one level up (../) and finds the fonts/ folder right there at the root of dist/.

The path technically worked in production, but it was coincidental. The structure happened to align, not because the relative path was correct in source files, but because the build output ended up that way.

This is why the path didn’t work in vite dev, where files aren't organized the same way — which leads to the next point: using absolute paths ensures consistency across all environments.

The Fix:

Switching to an absolute path did the trick:

@icon-font-path: "/fonts/icon-font.woff";

Now Vite correctly served the font from public/, and the path worked in all environments: Dev, Prod, and even when viewing the site locally.

Conclusion

Path resolution in Vite is simple — but only once you know how it works.

Here’s the takeaway:

Use absolute paths (/...) for referencing files in public/
Use relative paths only for files inside src/
Always test both vite dev and vite build to ensure consistency

This small path fix saved me hours of debugging — I hope it saves you some too! Let me know if you’ve run into similar issues or have tips of your own.

Understanding Expensive Calculations in React for Beginners

Vira Velmozhna — Tue, 19 Nov 2024 21:17:49 +0000

Hey there 👋

In React development, many factors influence the overall performance of an application. One key factor is the efficiency of calculations. But how can we determine if a calculation is expensive? And why is it so important to know?

React developers, especially beginners, often overuse such hooks like useState and useEffect. Understanding whether a calculation is expensive can help you decide if state or effects are necessary, or if it is acceptable to re-calculate something on every render.

Let's get straight to the point with key factors to consider. By the end, you’ll have a clear checklist to help you identify costly calculations in your React projects.

Theoretical analysis

Time complexity

Constant time O(1)
Operations like simple arithmetic or accessing a fixed element are considered cheap calculations.
Linear time O(n)
Iterating over a list once. The cost depends on the size of the list.
Quadratic time O(n^2)
Nested loops where each element is compared or processed multiple times. These are generally considered as expensive calculations.
Exponential time O(2^n)
Processes like deep recursion or brute-force searching. These are highly expensive calculations

Data size

For small lists (< 100) - Calculations with O(n) are usually fine and considered cheap.
For large lists (>1000) - Even calculations O(n) can become expensive.

Practical test

Browser performance monitoring

Console timing

console.time('name-of-the-process')
process code (calculation)
console.timeEnd('name-of-the-process')

If the time is less than 1-2 ms - the calculation is considered as inexpensive.

For example:

console.time("setIsAuthenticated");
setIsAuthenticated(true);
console.timeEnd("setIsAuthenticated");

Performance tab
The browser's performance tab provides a lot of useful information. While I'm not going to describe it in this article (it deserves its own article), I recommend to learn more about it.

Frequency of calculation

Even if a calculation isn't expensive, if it's being performed extremely frequently, it can still contribute to performance issue.

User experience and performance bottlenecks

The user experience is the best indicator of performance. Ask yourself: Is UI sluggish and unresponsive or smooth and responsive?
If your app has issues in these areas, it might be required to optimize expensive calculations.

Conclusions

I hope the topic became clearer for you. This article is a start to further exploration and learning about React and performance. Consider learning about React's optimization techniques like useMemo and React.memo, diving into browser performance tools, or strengthening your understanding of algorithms and data structures.

Adding Click Animation to a Button with CSS: A Step-by-Step Tutorial

Vira Velmozhna — Wed, 24 Jan 2024 22:14:10 +0000

If you are just starting with CSS, this guide will walk you through the basics of animation, explaining each concept in details. After looking at basics, we will use one of the approaches to add click animation to a button.

Understanding CSS Animation

In the world of web development, CSS animation serves as a powerful tool to make your interface dynamic and engaging. Let's discuss the two fundamental methods of CSS animation: transitions and keyframes.

Transitions:

What are Transitions?
Transitions offer a straightforward and intuitive approach to animating changes in CSS properties. This is a smooth effect, where an element is being changed from one state to another over a specified duration.

How Do Transitions Work?
Transitions work by defining the starting and ending states of an element. When a change occurs (like a hover or a click), the transition property steps in, smoothly interpolating between the old and new states. This is achieved by specifying the property to be transitioned, the duration of the transition, and the timing function defining the pace of the change.

/* Adding a transition to the width property */
.btn {
  width: 200px;
  transition: width 0.5s ease; 
  /* 
  width - the property that will be animated
  0.5 - duration in seconds
  ease - timing function 
  */
}

.btn:hover {
  width: 250px; /* New width on hover */
}

In this example, the button's width changes smoothly from 200px to 250px over 0.5 seconds when hovered.

Keyframes:

What are Keyframes?
Keyframes provide a more detailed control over the animation process. They allow you to define specific points (keyframes) in an animation sequence, each representing a unique state of the element.

How Do Keyframes Work?
You set up keyframes at different intervals, specifying the styles for each of them. The browser transitions between these keyframes, creating a more complex and customized animation sequence.

/* Defining keyframes for a bouncing animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Applying the keyframe animation to an element */
.element {
  animation: bounce 2s infinite; 
  /* Bouncing animation lasting 2 seconds, repeating infinitely */
}

In this example, the element will smoothly bounce up and down in a loop.

Choosing Between Transitions and Keyframes:

When deciding between transitions and keyframes, consider which effect do you want to achieve. Transitions are perfect for simple effects, like hovering over a button, while keyframes are preferable when creating more dynamic and complex animations, when you need more control.

`transition` and `transform` properties

Now, let's take a closer look at the specific CSS properties we will be using in the tutorial – transition and transform. Understanding how these properties work will empower your control of the animations.

transition:

What is it?
The transition property is a fundamental tool for facilitating smooth changes in CSS properties over a specified duration.
How does it work?
In the example below, we use transition to set the animation's duration and easing function. The duration determines how long the transition takes, while the easing function influences the speed variations throughout the animation.

.btn {
  width: 200px;
  transition: width 3s ease; /* Duration: 3 seconds with an ease timing function */
}

.btn:hover {
  width: 250px; /* New width on hover */
}

In this example, the button smoothly transitions its width over 3 seconds with an ease timing function.

transform:

What is it?
The transform property is a great tool that enables two-dimensional and three-dimensional transformations in CSS. It provides functionalities like rotation, scaling, skewing, or translating elements, allowing for dynamic adjustments in their appearance and position.
How does it work?
In the example below, we use transform to give the checkmark icon a dynamic movement. By using translate in combination with opacity, we create a visually appealing transformation when the icon appears.

.icon {
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease 3s;
}

.icon.done {
  opacity: 1;
  transform: translate(-50%, -180%);
}

In this example, the icon smoothly translates upwards and becomes visible over 2 seconds, with a delay of 3 seconds.

Let's add a click animation to a button

Breaking Down the Requirements:

We will create a button with a rounded border and some text inside.
When the user clicks on it, we want the text to disappear, making room for a checkmark icon.
As an extra touch, let's make the border gradually narrow until it forms a circle.

Let’s start with HTML structure.
We need a div wrapper, and a button and an icon inside it.

<div class="wrapper">
  <button class="btn">
    <span class="btn-text">
      Click on me!
    </span>
  </button>
  <div class="icon">✔️</div>
</div>

Add some css styles for the button and icon.
For the button, we will be animating width and border-radius properties. Initial values of these properties we set for the class name .btn, and the new values for the class name .btn.clicked, which will be applied after clicking on the button. The same is for the icon.

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 40px;
}

.btn {
  height: 40px;
  color: white;
  background: #FFB3CB;
  border: 1px solid white;
  cursor: pointer;
  width: 200px;
  border-radius: 10px;
  transition: width 2s ease, border-radius 2s ease;
}

.btn.clicked {
  color: #FFB3CB;
  width: 40px;
  border-radius: 50px;
}

.btn.clicked .btn-text {
  display: none;
}

.icon {
  position: absolute;
  top: 110%;
  left: 50%;    
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease 1s;
}

.icon.done {
  opacity: 1;
  transform: translate(-50%,-180%);
}

Now add event listener in JS, so that the animations will be working.
We will be adding the additional classes to the button and the icon, when clicking on the button.

/* choose the elements */
const button = document.querySelector(".btn");
const icon = document.querySelector(".icon");

/* add callback function, which will be executed after clicking on the button */
const callback = () => {
  button.classList.add("clicked");
  icon.classList.add("done");
};

/* add event listener */
button.addEventListener("click", callback);

That's it! The animation is ready.

I have prepared a live presentation of the transition animation for you in codepen sandbox. Use this link to find it.

Conclusions:

Mastering CSS animation with the transition and transform properties provides for developers the essential tools for creative web design.
After this tutorial, transitioning between styles should feel more intuitive, empowering developers to effortlessly enhance user experiences with dynamic and engaging web animations.

If you have any questions, don't hesitate to ask me in the comments section.