RedwoodSDK Docs — The React Framework for Cloudflare

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:

mkdir public

Place any static assets you want to serve in this directory:

public/
- images/
  - logo.png
  - background.jpg
- fonts/
  - custom-font.woff2
- documents/
  - sample.pdf
- favicon.ico

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

// In your component
function Header() {
  return (
    <header>
      <img src="/images/logo.png" alt="Logo" />
      <h1 className="font-custom">My Application</h1>
    </header>
  );
}

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

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

Common Use Cases

Images and Media

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

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

Fonts

Host custom font files for your application:

/* In your CSS */
@font-face {
  font-family: "BrandFont";
  src: url("/fonts/brand-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

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

Favicon and Browser Icons

Store favicon and other browser icons:

// In your Document.tsx
<head>
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/manifest.json" />
</head>

Security Considerations

Remember that all files in the public directory are accessible to anyone who knows the URL. Don't store sensitive information in this directory.

Production Considerations

In production, files in the public directory:

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

Public Assets