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.
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:
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">.
<!-- 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.ico is in the public folder, and it is referenced using an absolute path.main.js is in the src directory, 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.
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.
Create a Vite project and add a favicon.ico file to your public directory. Reference it in your index.html file.
Add a robots.txt file 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?
After creating a Vite project and adding a favicon.ico file to your public directory, you can reference it in your index.html file like so: <link rel="icon" href="/favicon.ico" />.
To reference the robots.txt file, 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.