socktop-webterm/static/README.md

Static Assets Directory

This directory contains custom static assets for the webterm application.

How to Add Files

Simply place your files in this directory:

# Example: Add a background image
cp my-background.png static/bg.png

# Example: Add a custom CSS file
cp my-styles.css static/custom.css

# Example: Add a logo
cp logo.svg static/logo.svg

How to Access Files

Files in this directory are served at TWO different URL paths:

Option 1: /assets/* Route (Recommended)

Files are automatically served from this directory at /assets/*:

static/bg.png         → http://localhost:8082/assets/bg.png
static/logo.svg       → http://localhost:8082/assets/logo.svg
static/custom.css     → http://localhost:8082/assets/custom.css

Use in CSS/HTML:

body {
    background-image: url('/assets/bg.png');
}

<link rel="stylesheet" href="/assets/custom.css" />
<img src="/assets/logo.svg" alt="Logo" />

Option 2: /static/* Route (Manual Copy Required)

If you prefer to use /static/* URLs, copy the file to node_modules/:

cp static/bg.png node_modules/

Then access it at:

background-image: url('/static/bg.png');

⚠️ Warning: Files in node_modules/ may be removed when you run npm install or npm ci.

Recommendation

Use /assets/* for your custom assets because:

• ✅ No need to copy files manually
• ✅ Won't be lost when running npm commands
• ✅ Clear separation between your assets and npm packages
• ✅ Better organization and maintainability

Reserve /static/* for npm packages (xterm.js, addons, etc.).

Current Files

• terminado-addon.js - Custom xterm.js addon for Terminado protocol
• bg.png - Background image (1.3 MB)

Server Configuration

The server is configured in src/server.rs:

App::new()
    .service(actix_files::Files::new("/assets", "./static"))  // This directory
    .service(actix_files::Files::new("/static", "./node_modules"))  // npm packages

More Information

See STATIC_ASSETS.md in the project root for comprehensive documentation on:

• Adding different types of assets (images, fonts, CSS, JS)
• Path reference guide
• Best practices
• Troubleshooting
• Performance optimization