Static Directory (public/)

public/

Vite has built-in support for serving static assets living in the public/ directory.

For example, if we save a file public/robots.txt, then it will be served as-is at https://example.com/robots.txt.

Official docs: Vite - The public/ Directory.

dist/client/

After running $ vite build, all static assets live in dist/client/.

# The browser-side JavaScript bundle of our page `pages/hello-world.page.js`
dist/client/assets/hello-world.b0c3b30b.js
# Our file `public/robots.txt`
dist/client/robots.txt

Note how Vite:

• Adds the content hash b0c3b30b for improved cachability.
• Copies all files living under public/ to dist/client/.

Server static middleware

If we use a Node.js production server (i.e. we don't pre-render our app), we can alternatively use a server static middleware such as express.static().

We may want to do this if we have a lot of heavy static assets, in order to avoid Vite from copying all our large static assets over to dist/client/ and thus slowing down our build time.