Vite / Vite and Assets
Understanding the Public Folder in Vite
The public folder in Vite is a special directory for static files that are not processed by the build process. In this tutorial, we'll go over what kind of files you should put in…
Section overview
5 resourcesExplains how to handle static assets and images in a Vite project
Understanding the Public Folder in Vite
1. Introduction
In this tutorial, we aim to help you understand the importance and use of the public folder in Vite. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of a dev server with Hot Module Replacement (HMR) and a build command that bundles your code with Rollup.
By the end of this tutorial, you will understand what kind of files goes into the public folder and how to reference them in your project. Prior knowledge of JavaScript and basic understanding of Vite is recommended.
2. Step-by-Step Guide
The public folder in Vite is a special directory that houses static files which are not processed by the module bundler. These files are copied to the root of the dist (output) directory as-is.
Examples of files that can go into the public folder include:
- Favicon images
- Robots.txt
- Netlify.toml, etc.
To reference these files in your project, use an absolute path. For example, if a file named logo.png is in the public folder, you can reference it in your HTML file like so: <img src="/logo.png" alt="Logo">.
3. Code Examples
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite App</title>
<link rel="icon" href="/favicon.ico" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
In the code snippet above:
favicon.icois in the public folder, and it is referenced using an absolute path.main.jsis in thesrcdirectory, and it is also referenced using an absolute path.
The expected output when navigating to the root URL of your local development server (e.g., http://localhost:3000) would be your Vite app with a favicon image.
4. Summary
We've covered the use of the public folder in Vite. We've learned that it's a special directory for static files that are not processed by Vite's build process. We also learned how to reference these files using absolute paths.
Next, you might want to learn more about the other directories in Vite and their uses. You can find more information in the Vite documentation.
5. Practice Exercises
-
Create a Vite project and add a
favicon.icofile to your public directory. Reference it in yourindex.htmlfile. -
Add a
robots.txtfile to your public directory. How would you reference this file? -
What happens if you try to import a file from the public directory as a module in your JavaScript code?
Solutions
-
After creating a Vite project and adding a
favicon.icofile to your public directory, you can reference it in yourindex.htmlfile like so:<link rel="icon" href="/favicon.ico" />. -
To reference the
robots.txtfile, you would use an absolute path:/robots.txt. However, this is typically accessed by web crawlers at the root of your domain (e.g.,http://yourdomain.com/robots.txt) and not directly referenced in your HTML or JavaScript. -
Importing a file from the public directory as a module in your JavaScript code would fail. Files in the public directory are not processed by Vite's module bundler and should only be referenced using absolute paths.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article