Static Assets
Serve static files like images, fonts, or HTML from your deployment. Globe auto-detects common folders, or you can define exactly what to include in your app.
What Are Static Assets?
Static assets are files that don’t change at runtime. Think .png
, .css
, .html
, fonts, or even compiled .wasm
files. Globe serves these assets via a global edge network to ensure speedy delivery anywhere in the world.
1. Automatic Detection (Zero Config)
Globe automatically detects common static asset directories used by most frameworks, such as public/
, static/
, and assets/
. For Serverpod projects, it also includes web/
, config/
, and migrations/
. All files and subdirectories within these folders are served as static assets by default.
2. Manual Configuration (globe.yaml
)
For more control, explicitly list files and directories in your globe.yaml
file under the assets
key.
Include Specific Directories
To include all files under a folder, simply add the directory with a trailing slash:
assets:
- directory/
- directory/subdirectory/
Use Glob Patterns
You can match multiple files using glob-like syntax. This helps include file types in bulk, like all .png
images in a directory:
assets:
- public/\*.png
This will include every .png
file in the public/ directory.
Map Files to Custom Paths
Want more control over where your assets end up at runtime? You can map a local source path to a destination path in Globe’s runtime using source_path:destination_path
:
assets:
- fake_lib_rust/target/fake_library.so:public/fake_library.so
This is useful when renaming files, serving compiled libraries, or tidying up your directory structure before deployment.
Example: Serving Static Files in Dart
Globe supports static file serving with popular Dart web frameworks like Shelf and Dart Frog. Here’s an example using shelf_static
to serve a basic index.html
file:
Directory Structure
/your_project └── public/ └── index.html
Dart Server Code
import 'package:shelf/shelf_io.dart' as io; import 'package:shelf_static/shelf_static.dart'; void main() async { final handler = createStaticHandler('public', defaultDocument: 'index.html'); final server = await io.serve(handler, 'localhost', 8080); print('Serving at http://${server.address.host}:${server.port}'); }
Deploy with Globe
globe deploy
And your static site is live from the edge.
Important Considerations
- Static assets only work if they are correctly configured. Globe won’t magically serve them unless they’re detected or explicitly listed.
- If both automatic and manual configurations are used, globe.yaml settings override automatic detection.
- The order of items in globe.yaml matters; later rules can override earlier ones.