Public Assets

Setting Up the Public Directory

RedwoodSDK provides a simple way to serve static assets like images, fonts, and other files through the public directory.

Create a public directory in the root of your project:
Terminal window
```
mkdir public
```
Place any static assets you want to serve in this directory:
- Directorypublic/
  - Directoryimages/
    logo.png
    background.jpg
  - Directoryfonts/
    custom-font.woff2
  - Directorydocuments/
    sample.pdf
  - favicon.ico

Access your static assets in your application using root-relative URLs:

1
// In your component
2
function Header() {
3
  return (
4
    <header>
5
      <img src="/images/logo.png" alt="Logo" />
6
      <h1 className="font-custom">My Application</h1>
7
    </header>
8
  );
9
}

Or, for custom fonts, reference them in your CSS:

1
@font-face {
2
  font-family: "CustomFont";
3
  src: url("/fonts/custom-font.woff2") format("woff2");
4
}

Common Use Cases

Images and Media

Store and serve images, videos, and other media files:

1
<img src="/images/hero-banner.jpg" alt="Hero Banner" />
2
<video controls>
3
  <source src="/videos/demo.mp4" type="video/mp4" />
4
</video>

Fonts

Host custom font files for your application:

1
/* In your CSS */
2
@font-face {
3
  font-family: "BrandFont";
4
  src: url("/fonts/brand-font.woff2") format("woff2");
5
  font-weight: 400;
6
  font-style: normal;
7
}
8

9
/* Then use it with Tailwind */
10
@theme {
11
  --font-brand: "BrandFont", sans-serif;
12
}

Favicon and Browser Icons

Store favicon and other browser icons:

1
// In your Document.tsx
2
<head>
3
  <link rel="icon" href="/favicon.ico" />
4
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
5
  <link rel="manifest" href="/manifest.json" />
6
</head>

Production Considerations

In production, files in the public directory:

Do not go through the JavaScript bundling process
Maintain their file structure and naming