44 lines
1.6 KiB
Markdown
44 lines
1.6 KiB
Markdown
# Static Assets
|
|
|
|
Use this folder to add static files directly to your app. All included files and folders will be copied directly into the `/dist` folder (created when Vite builds for production). They will also be available during development when you run `yarn rw dev`.
|
|
|
|
> Note: files will _not_ hot reload while the development server is running. You'll need to manually stop/start to access file changes.
|
|
|
|
### Example Use
|
|
|
|
A file like `favicon.png` will be copied to `/dist/favicon.png`. A folder containing a file such as `static-files/my-logo.jpg` will be copied to `/dist/static-files/my-logo.jpg`. These can be referenced in your code directly without any special handling, e.g.
|
|
|
|
```
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
```
|
|
|
|
and
|
|
|
|
```
|
|
<img src="/static-files/my-logo.jpg"> alt="Logo" />
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
Because assets in this folder are bypassing the javascript module system, **this folder should be used sparingly** for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.
|
|
|
|
In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the `dist` folder with a hash.
|
|
|
|
### Example Asset Import with Vite
|
|
|
|
Instead of handling our logo image as a static file per the example above, we can do the following:
|
|
|
|
```
|
|
import React from "react"
|
|
import logo from "./my-logo.jpg"
|
|
|
|
|
|
function Header() {
|
|
return <img src={logo} alt="Logo" />
|
|
}
|
|
|
|
export default Header
|
|
```
|
|
|
|
See Vite's docs for [static asset handling](https://vitejs.dev/guide/assets.html)
|