Static Assets

Static files like CSS, JavaScript, images, and fonts are served from the public/ directory at the root of each app. Files in public/ are served as-is with no template processing.

Prerequisites: File-Based Routing. What you'll learn: Where to place static files, how to reference them from templates, and how static file serving works.

The `public/` Directory

Each app has a public/ directory at its root. Files placed here are served directly at the corresponding URL path:

apps/main/
  public/
    styles.css         # served at /styles.css
    app.js             # served at /app.js
    images/
      logo.png         # served at /images/logo.png
    fonts/
      inter.woff2      # served at /fonts/inter.woff2
  layout.html
  index.html

Referencing Assets in Templates

Use absolute paths from the app root to reference static files in your templates:

<html>
<head>
  <title>Static Assets — Grove Docs</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  
  <script src="/app.js"></script>
</body>
</html>

Images and other media follow the same pattern:

<img src="/images/logo.png" alt="Logo">

Static vs Template Files

Grove distinguishes between static and template files by location:

Location	Behavior
`public/`	Served as-is, no processing
Anywhere else	Treated as templates (`.html` files) or data loaders (`.jq` files)

A file named public/index.html is served as a static file. A file named index.html at the app root is processed as a template.

File Types

Any file type can be placed in public/. Common static assets include:

Type	Examples
Stylesheets	`.css`
Scripts	`.js`
Images	`.png`, `.jpg`, `.svg`, `.ico`
Fonts	`.woff`, `.woff2`, `.ttf`
Documents	`.pdf`, `.txt`

Organizing Assets

For larger apps, organize assets into subdirectories:

public/
  css/
    main.css
    components.css
  js/
    app.js
    utils.js
  images/
    logo.png
    hero.jpg

Reference them with their full path:

<link rel="stylesheet" href="/css/main.css">
<script src="/js/app.js"></script>