\n \n \n \n \n \n\n\n```\n\n## Error Handling\n\nThe server provides helpful error messages:\n\n- **404 for missing files**: `\"JavaScript file not found: /missing.js\"`\n- **500 for server errors**: `\"Server error: [error message]\"`\n- **Custom handlers**: Override with your own error responses\n\n## Best Practices\n\n1. **File Organization**: Keep related files in subdirectories\n2. **Error Handling**: Provide custom 404 pages for better UX\n3. **Caching**: Use appropriate cache headers for production\n4. **Security**: Don't serve sensitive files (use proper file extensions)\n5. **Performance**: Consider middleware for compression, logging, etc.\n\n## Migration from Basic Server\n\nIf you have an existing basic server, migration is simple:\n\n```typescript\n// Before\nexport default async function(req: Request) {\n // manual file serving logic\n}\n\n// After\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n## Contributing\n\nThis server module is designed to be:\n- **Extensible** - Easy to add new features\n- **Maintainable** - Clear separation of concerns\n- **Reusable** - Works across different Val Town projects\n\nFeel free to extend it for your specific needs!",[],[212],{"_103":222,"_95":99,"_153":223,"_155":-5,"_156":138,"_157":224,"_159":160,"_105":225,"_100":226,"_162":217,"_164":227,"_165":22,"_166":-5,"_167":228,"_98":229},"7a67fda6-b0ef-11f0-acf0-0224a6c84d84","ef5135d6-b0ec-11f0-b61a-0224a6c84d84",63,["D",1761320304566],12,"# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n importMetaUrl: import.meta.url, // Required!\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html', { importMetaUrl: import.meta.url });\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",[],[99],{"_103":231,"_95":232,"_153":233,"_155":-5,"_156":138,"_157":234,"_159":160,"_105":235,"_100":32,"_162":196,"_164":236,"_165":22,"_166":-5,"_167":237,"_98":238},"3596c860-b0ea-11f0-9bc3-0224a6c84d84","animations.js","3596c950-b0ea-11f0-9bc3-0224a6c84d84",9,["D",1761318041629],"// Animation utilities and effects\nconsole.log('Animations.js loaded!');\n\nconst Animations = {\n // Bounce effect\n bounce: (element) => {\n element.style.animation = 'bounce 0.6s ease-in-out';\n setTimeout(() => {\n element.style.animation = '';\n }, 600);\n },\n \n // Shake effect\n shake: (element) => {\n element.style.animation = 'shake 0.5s ease-in-out';\n setTimeout(() => {\n element.style.animation = '';\n }, 500);\n },\n \n // Pulse effect\n pulse: (element) => {\n element.style.animation = 'pulse 1s ease-in-out';\n setTimeout(() => {\n element.style.animation = '';\n }, 1000);\n }\n};\n\n// Add CSS animations to the page\nconst addAnimationStyles = () => {\n const style = document.createElement('style');\n style.textContent = `\n @keyframes bounce {\n 0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }\n 40%, 43% { transform: translate3d(0,-30px,0); }\n 70% { transform: translate3d(0,-15px,0); }\n 90% { transform: translate3d(0,-4px,0); }\n }\n \n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }\n 20%, 40%, 60%, 80% { transform: translateX(10px); }\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n `;\n document.head.appendChild(style);\n};\n\n// Initialize animations when DOM is ready\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', addAnimationStyles);\n} else {\n addAnimationStyles();\n}\n\n// Make animations available globally\nwindow.Animations = Animations;",[],[232],{"_103":240,"_95":241,"_153":242,"_155":-5,"_156":138,"_157":216,"_159":160,"_105":243,"_100":195,"_162":217,"_164":244,"_165":22,"_166":-5,"_167":245,"_98":246},"41c61140-b0ea-11f0-8687-0224a6c84d84","index.html","657d9744-b0e9-11f0-bc2e-0224a6c84d84",["D",1761318062068],"\n\n\n \n \n My Frontend\n \n\n\n

Welcome to My Frontend

This HTML file is being served as raw text from a Val Town HTTP val.

You can edit this HTML file directly and the changes will be reflected when you refresh the page.

Try clicking the title above! The JavaScript files are dynamically served - no hardcoding required!

Multiple JS files loaded: script.js, utils.js, and animations.js

\n \n \n \n \n \n\n",[],[241],{"_103":248,"_95":249,"_153":250,"_155":-5,"_156":138,"_157":251,"_159":160,"_105":252,"_100":253,"_162":196,"_164":254,"_165":22,"_166":-5,"_167":255,"_98":256},"363ebf3e-b0ef-11f0-be1f-0224a6c84d84","index.ts","c1a51606-b0ed-11f0-b0dc-0224a6c84d84",49,["D",1761320190206],8,"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport interface StaticServerOptions {\n /** Default HTML file to serve at root. Defaults to '/index.html' */\n indexFile?: string;\n /** Custom 404 handler. If not provided, returns default 404 message */\n notFoundHandler?: (pathname: string) => Response;\n /** Custom error handler. If not provided, returns default error message */\n errorHandler?: (error: Error, pathname: string) => Response;\n /** Additional MIME types mapping. Extends default types */\n mimeTypes?: Record;\n /** Custom headers to add to all responses */\n headers?: Record;\n}\n\nexport interface FileServerResult {\n /** The request handler function to use as your HTTP val export */\n handler: (req: Request) => Promise;\n /** Utility to serve files programmatically */\n serveFile: (pathname: string, options?: { mimeType?: string }) => Promise;\n}\n\n/**\n * Creates a static file server that can serve HTML, JS, CSS, and other text files\n * from your Val Town project directory.\n * \n * @param options Configuration options for the server\n * @returns Object containing the request handler and utility functions\n * \n * @example\n * ```ts\n * import { createStaticServer } from \"./index.ts\";\n * \n * const { handler } = createStaticServer({\n * indexFile: '/index.html',\n * headers: { 'Cache-Control': 'no-cache' },\n * importMetaUrl: import.meta.url\n * });\n * \n * export default handler;\n * ```\n */\nexport function createStaticServer(options: StaticServerOptions = {}): FileServerResult {\n const {\n indexFile = '/index.html',\n notFoundHandler,\n errorHandler,\n mimeTypes = {},\n headers = {}\n } = options;\n\n // Default MIME types\n const defaultMimeTypes: Record = {\n '.html': 'text/html; charset=utf-8',\n '.js': 'application/javascript; charset=utf-8',\n '.css': 'text/css; charset=utf-8',\n '.json': 'application/json; charset=utf-8',\n '.txt': 'text/plain; charset=utf-8',\n '.md': 'text/markdown; charset=utf-8',\n '.xml': 'application/xml; charset=utf-8',\n '.svg': 'image/svg+xml; charset=utf-8',\n ...mimeTypes\n };\n\n /**\n * Get MIME type for a file based on its extension\n */\n function getMimeType(pathname: string): string {\n const ext = pathname.toLowerCase().substring(pathname.lastIndexOf('.'));\n return defaultMimeTypes[ext] || 'text/plain; charset=utf-8';\n }\n\n /**\n * Create response headers\n */\n function createHeaders(mimeType: string): Record {\n return {\n 'Content-Type': mimeType,\n ...headers\n };\n }\n\n /**\n * Default 404 handler\n */\n function defaultNotFoundHandler(pathname: string): Response {\n const fileType = pathname.substring(pathname.lastIndexOf('.') + 1);\n const message = fileType ? \n `${fileType.toUpperCase()} file not found: ${pathname}` : \n `File not found: ${pathname}`;\n \n return new Response(message, {\n status: 404,\n headers: createHeaders('text/plain; charset=utf-8')\n });\n }\n\n /**\n * Default error handler\n */\n function defaultErrorHandler(error: Error, pathname: string): Response {\n console.error(`Error serving ${pathname}:`, error);\n return new Response(`Server error: ${error.message}`, {\n status: 500,\n headers: createHeaders('text/plain; charset=utf-8')\n });\n }\n\n /**\n * Serve a file from the project directory\n */\n async function serveFile(pathname: string, options: { mimeType?: string } = {}): Promise {\n try {\n const content = await readFile(pathname, import.meta.url);\n const mimeType = options.mimeType || getMimeType(pathname);\n \n return new Response(content, {\n headers: createHeaders(mimeType)\n });\n } catch (error) {\n if (error instanceof Error && error.message.includes('not found')) {\n return (notFoundHandler || defaultNotFoundHandler)(pathname);\n }\n return (errorHandler || defaultErrorHandler)(error as Error, pathname);\n }\n }\n\n /**\n * Main request handler\n */\n async function handler(req: Request): Promise {\n try {\n const url = new URL(req.url);\n let pathname = url.pathname;\n\n // Handle root path\n if (pathname === '/') {\n pathname = indexFile;\n }\n\n // Serve the requested file\n return await serveFile(pathname);\n \n } catch (error) {\n return (errorHandler || defaultErrorHandler)(error as Error, 'unknown');\n }\n }\n\n return {\n handler,\n serveFile\n };\n}\n\n/**\n * Quick setup function for basic static serving\n * \n * @example\n * ```ts\n * import { quickStaticServer } from \"./index.ts\";\n * export default quickStaticServer();\n * ```\n */\nexport function quickStaticServer(indexFile = '/index.html'): (req: Request) => Promise {\n const { handler } = createStaticServer({ indexFile });\n return handler;\n}\n\n/**\n * Advanced setup with custom routing and middleware support\n * \n * @example\n * ```ts\n * import { advancedStaticServer } from \"./index.ts\";\n * \n * export default advancedStaticServer({\n * routes: {\n * '/api/health': () => new Response('OK'),\n * '/api/time': () => new Response(new Date().toISOString())\n * },\n * middleware: [\n * (req, next) => {\n * console.log(`${req.method} ${req.url}`);\n * return next();\n * }\n * ]\n * });\n * ```\n */\nexport function advancedStaticServer(config: {\n routes?: Record Response | Promise>;\n middleware?: Array<(req: Request, next: () => Promise) => Promise>;\n staticOptions?: StaticServerOptions;\n} = {}): (req: Request) => Promise {\n const { routes = {}, middleware = [], staticOptions = {} } = config;\n const { handler: staticHandler } = createStaticServer(staticOptions);\n\n return async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Apply middleware\n let finalHandler = async (): Promise => {\n // Check custom routes first\n if (routes[url.pathname]) {\n return await routes[url.pathname](req);\n }\n \n // Fall back to static file serving\n return await staticHandler(req);\n };\n\n // Apply middleware in reverse order\n for (let i = middleware.length - 1; i >= 0; i--) {\n const currentHandler = finalHandler;\n const currentMiddleware = middleware[i];\n finalHandler = () => currentMiddleware(req, currentHandler);\n }\n\n return await finalHandler();\n };\n}",[],[249],{"_103":258,"_95":259,"_153":260,"_155":-5,"_156":138,"_157":261,"_159":160,"_105":262,"_100":263,"_162":196,"_164":264,"_165":22,"_166":-5,"_167":265,"_98":266},"51a3ab22-b0ea-11f0-aca4-0224a6c84d84","script.js","d9d8ccb2-b0e9-11f0-aa10-0224a6c84d84",11,["D",1761318088686],1,"// Main JavaScript functionality\nconsole.log('JavaScript loaded successfully!');\n\n// DOM Content Loaded event listener\ndocument.addEventListener('DOMContentLoaded', function() {\n console.log('DOM fully loaded');\n \n // Add some interactive functionality\n initializeApp();\n});\n\nfunction initializeApp() {\n // Add a click handler to the title\n const title = document.querySelector('h1');\n if (title) {\n title.addEventListener('click', function() {\n title.style.color = getRandomColor();\n showMessage('Title color changed!');\n \n // Use animations from animations.js if available\n if (window.Animations) {\n const effects = ['bounce', 'shake', 'pulse'];\n const randomEffect = effects[Math.floor(Math.random() * effects.length)];\n window.Animations[randomEffect](title);\n }\n });\n \n // Add a subtitle to indicate it's clickable\n title.style.cursor = 'pointer';\n title.title = 'Click me to change color and animate!';\n }\n \n // Add a button for more interactivity\n addInteractiveButton();\n \n // Add a demo of utilities\n addUtilsDemo();\n}\n\nfunction getRandomColor() {\n const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c'];\n return colors[Math.floor(Math.random() * colors.length)];\n}\n\nfunction showMessage(text) {\n // Create a temporary message element using DOMUtils if available\n let message;\n if (window.DOMUtils) {\n message = window.DOMUtils.createElement('div', '', text);\n } else {\n message = document.createElement('div');\n message.textContent = text;\n }\n \n message.style.cssText = `\n position: fixed;\n top: 20px;\n right: 20px;\n background: #2ecc71;\n color: white;\n padding: 10px 20px;\n border-radius: 5px;\n z-index: 1000;\n transition: opacity 0.3s ease;\n `;\n \n document.body.appendChild(message);\n \n // Use DOMUtils fadeOut if available\n if (window.DOMUtils) {\n setTimeout(async () => {\n await window.DOMUtils.fadeOut(message);\n document.body.removeChild(message);\n }, 2000);\n } else {\n // Fallback animation\n setTimeout(() => {\n message.style.opacity = '0';\n setTimeout(() => {\n document.body.removeChild(message);\n }, 300);\n }, 2000);\n }\n}\n\nfunction addInteractiveButton() {\n const container = document.querySelector('.container');\n if (container) {\n const button = document.createElement('button');\n button.textContent = 'Click for a surprise!';\n button.style.cssText = `\n background: #3498db;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n margin-top: 20px;\n transition: background 0.3s ease;\n `;\n \n button.addEventListener('click', function() {\n const surprises = [\n 'You found the secret button! 🎉',\n 'JavaScript is working perfectly! ✨',\n 'Val Town is awesome! 🚀',\n 'Keep coding! 💻',\n 'You\\'re doing great! 👏',\n 'Dynamic JS serving works! 🔥'\n ];\n \n const randomSurprise = surprises[Math.floor(Math.random() * surprises.length)];\n showMessage(randomSurprise);\n \n // Change button color temporarily\n const originalColor = button.style.background;\n button.style.background = getRandomColor();\n setTimeout(() => {\n button.style.background = originalColor;\n }, 1000);\n \n // Add animation if available\n if (window.Animations) {\n window.Animations.pulse(button);\n }\n });\n \n button.addEventListener('mouseenter', function() {\n button.style.background = '#2980b9';\n });\n \n button.addEventListener('mouseleave', function() {\n button.style.background = '#3498db';\n });\n \n container.appendChild(button);\n }\n}\n\nfunction addUtilsDemo() {\n const container = document.querySelector('.container');\n if (container && window.MathUtils) {\n const demoDiv = document.createElement('div');\n demoDiv.style.cssText = `\n margin-top: 20px;\n padding: 15px;\n background: #f8f9fa;\n border-radius: 5px;\n border-left: 4px solid #3498db;\n `;\n \n const randomNum = window.MathUtils.randomBetween(1000, 9999);\n const formatted = window.MathUtils.formatNumber(randomNum);\n \n demoDiv.innerHTML = `\n

Utils Demo

Random number: ${formatted}

Percentage example: ${window.MathUtils.percentage(75, 100)}%

\n This demo uses MathUtils from utils.js!\n `;\n \n container.appendChild(demoDiv);\n \n // Fade in the demo using DOMUtils if available\n if (window.DOMUtils) {\n window.DOMUtils.fadeIn(demoDiv);\n }\n }\n}",[],[259],{"_103":268,"_95":269,"_153":270,"_155":-5,"_156":138,"_157":271,"_159":160,"_105":272,"_100":273,"_162":176,"_164":274,"_165":22,"_166":-5,"_167":275,"_98":276},"9247ca14-b0ef-11f0-bb2f-0224a6c84d84","server.ts","68b6eafa-b0e9-11f0-b756-0224a6c84d84",66,["D",1761320344620],7,"import { createStaticServer } from \"./index.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/index.html',\n importMetaUrl: import.meta.url\n});\n\nexport default handler;",[],[269],{"_103":278,"_95":279,"_153":280,"_155":-5,"_156":138,"_157":253,"_159":160,"_105":281,"_100":32,"_162":196,"_164":282,"_165":22,"_166":-5,"_167":283,"_98":284},"2ffe03dc-b0ea-11f0-8323-0224a6c84d84","utils.js","2ffe04a4-b0ea-11f0-8323-0224a6c84d84",["D",1761318032240],"// Utility functions for the frontend\nconsole.log('Utils.js loaded!');\n\n// Math utilities\nconst MathUtils = {\n randomBetween: (min, max) => {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n \n formatNumber: (num) => {\n return new Intl.NumberFormat().format(num);\n },\n \n percentage: (value, total) => {\n return Math.round((value / total) * 100);\n }\n};\n\n// DOM utilities\nconst DOMUtils = {\n createElement: (tag, className, textContent) => {\n const element = document.createElement(tag);\n if (className) element.className = className;\n if (textContent) element.textContent = textContent;\n return element;\n },\n \n fadeIn: (element, duration = 300) => {\n element.style.opacity = '0';\n element.style.transition = `opacity ${duration}ms ease`;\n setTimeout(() => {\n element.style.opacity = '1';\n }, 10);\n },\n \n fadeOut: (element, duration = 300) => {\n element.style.transition = `opacity ${duration}ms ease`;\n element.style.opacity = '0';\n return new Promise(resolve => {\n setTimeout(resolve, duration);\n });\n }\n};\n\n// Make utilities available globally\nwindow.MathUtils = MathUtils;\nwindow.DOMUtils = DOMUtils;",[],[279],"files",[150,169,180,189,200,210,221,230,239,247,257,267,277],"counts",{"_289":32,"_290":263,"_291":32,"_292":293},"pulls","branches","forks","envVars",{"_294":32,"_295":32},"count","emptyCount","contents",[],{"_103":222,"_156":138,"_153":223,"_95":99,"_164":227,"_162":217,"_100":226,"_155":-5,"_105":299,"_157":224,"_166":-5,"_98":300},["D",1761320304566],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":309,"_217":314,"_317":318,"_384":385,"_400":-7,"_401":32,"_402":22},{"_103":104,"_95":96,"_105":310,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":311,"_132":312,"_135":313,"_147":22},["D",1761317556708],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},{"_103":222,"_95":99,"_153":223,"_155":-5,"_156":138,"_157":224,"_159":160,"_105":315,"_100":226,"_162":217,"_164":227,"_165":22,"_166":-5,"_98":316},["D",1761320304566],[99],"history",[319,321,326,331,336,341,346,352,358,364,369,374,379],{"_103":222,"_156":138,"_153":223,"_95":99,"_164":227,"_162":217,"_100":226,"_155":-5,"_105":320,"_157":224,"_166":-5},["D",1761320304566],{"_103":322,"_156":138,"_153":223,"_95":99,"_164":323,"_162":217,"_100":261,"_155":-5,"_105":324,"_157":325,"_166":-5},"772b7e60-b0ef-11f0-8373-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n}, import.meta.url); // Required!\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761320299132],62,{"_103":327,"_156":138,"_153":223,"_95":99,"_164":328,"_162":217,"_100":216,"_155":-5,"_105":329,"_157":330,"_166":-5},"74e8a45c-b0ef-11f0-a438-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n },\n importMetaUrl: import.meta.url // Required!\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761320295342],61,{"_103":332,"_156":138,"_153":223,"_95":99,"_164":333,"_162":217,"_100":234,"_155":-5,"_105":334,"_157":335,"_166":-5},"7197aa8c-b0ef-11f0-8536-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer(import.meta.url);\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761320289777],60,{"_103":337,"_156":138,"_153":223,"_95":99,"_164":338,"_162":217,"_100":253,"_155":-5,"_105":339,"_157":340,"_166":-5},"6eccb356-b0ef-11f0-b6de-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./index.ts\";\nexport default quickStaticServer(import.meta.url);\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/index\";\nexport default quickStaticServer(import.meta.url);\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761320285080],59,{"_103":342,"_156":138,"_153":223,"_95":99,"_164":343,"_162":217,"_100":273,"_155":-5,"_105":344,"_157":345,"_166":-5},"f5e00462-b0ed-11f0-a90c-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./index.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761319652717],39,{"_103":347,"_156":138,"_153":223,"_95":99,"_164":348,"_162":217,"_100":349,"_155":-5,"_105":350,"_157":351,"_166":-5},"f3612040-b0ed-11f0-aa4b-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./index.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",6,["D",1761319648531],38,{"_103":353,"_156":138,"_153":223,"_95":99,"_164":354,"_162":217,"_100":355,"_155":-5,"_105":356,"_157":357,"_166":-5},"f0d61452-b0ed-11f0-9570-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./index.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",5,["D",1761319644266],37,{"_103":359,"_156":138,"_153":223,"_95":99,"_164":360,"_162":217,"_100":361,"_155":-5,"_105":362,"_157":363,"_166":-5},"eeabf638-b0ed-11f0-a2a4-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./index.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",4,["D",1761319640626],36,{"_103":365,"_156":138,"_153":223,"_95":99,"_164":366,"_162":217,"_100":175,"_155":-5,"_105":367,"_157":368,"_166":-5},"ea31d2a8-b0ed-11f0-ba60-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./index.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761319633117],35,{"_103":370,"_156":138,"_153":223,"_95":99,"_164":371,"_162":217,"_100":195,"_155":-5,"_105":372,"_157":373,"_166":-5},"e7a66e7c-b0ed-11f0-8f4d-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── index.ts # Copy this file\n├── server.ts # Your HTTP val (imports index.ts)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761319628853],34,{"_103":375,"_156":138,"_153":223,"_95":99,"_164":376,"_162":217,"_100":263,"_155":-5,"_105":377,"_157":378,"_166":-5},"e49246f2-b0ed-11f0-aaee-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `index.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./index.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/index\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

\n \n \n \n \n \n\n\n```\n\n## 🛠️ Development Workflow\n\n1. **Create your HTML/JS/CSS files** in your project\n2. **Set up the server** using one of the examples above\n3. **Set the server file as HTTP trigger** in Val Town\n4. **Test your site** - all files will be served automatically\n5. **Add more files** - just reference them in HTML, no server changes needed\n\n## 🔍 Debugging\n\n### Check Server Logs\n\nUse the Val Town requests panel to see:\n- Which files are being requested\n- Response status codes\n- Any error messages\n- Middleware logs (if using advanced server)\n\n### Common Issues\n\n**404 Errors**: Make sure file paths in HTML match actual file locations\n```html\n\n\n```\n\n**MIME Type Issues**: Add custom MIME types if needed\n```typescript\nmimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n}\n```\n\n**SPA Routing**: Use the SPA example for client-side routing\n\n## 🚀 Deployment\n\n1. Your server file should be set as an HTTP trigger\n2. All other files (HTML, JS, CSS) are served automatically\n3. No build step required - files are served as-is\n4. Changes to files are reflected immediately\n\n## 💡 Tips\n\n- **File Organization**: Use subdirectories for better organization\n- **Performance**: Add appropriate cache headers for production\n- **Security**: Only serve files you intend to be public\n- **Debugging**: Use middleware for logging and monitoring\n- **APIs**: Mix static files with dynamic API endpoints easily\n\n## 📚 Examples in This Project\n\nCheck out the `/examples/` directory for working examples:\n- `basic-server.ts` - Minimal setup\n- `custom-server.ts` - Custom configuration \n- `advanced-server.ts` - API routes + middleware\n- `spa-server.ts` - Single Page Application\n\nEach example is a complete, working server you can copy and modify!",["D",1761319623688],33,{"_103":380,"_156":138,"_153":223,"_95":99,"_164":381,"_162":217,"_100":32,"_155":-5,"_105":382,"_157":383,"_166":-5},"ef5134fa-b0ec-11f0-b61a-0224a6c84d84","# How to Use the Exportable Static Server\n\nThis guide shows you how to import and use the static server in your own Val Town projects.\n\n## 🚀 Quick Import\n\n### Method 1: Copy the Module\n\n1. Copy `static-server.ts` to your project\n2. Import and use:\n\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\nexport default quickStaticServer();\n```\n\n### Method 2: Direct Import (if public)\n\n```typescript\nimport { quickStaticServer } from \"https://esm.town/v/[username]/[project]/static-server\";\nexport default quickStaticServer();\n```\n\n## 📁 Project Setup\n\nCreate this file structure in your Val Town project:\n\n```\nyour-project/\n├── static-server.ts # Copy this file\n├── server.ts # Your HTTP val (imports static-server)\n├── index.html # Your main HTML file\n├── script.js # JavaScript files\n├── style.css # CSS files\n└── assets/\n ├── utils.js\n └── components.js\n```\n\n## 🎯 Usage Examples\n\n### 1. Basic Static Server\n\n**File: `server.ts`**\n```typescript\nimport { quickStaticServer } from \"./static-server.ts\";\n\n// Serves index.html at root, all other files by path\nexport default quickStaticServer();\n```\n\nSet this file as an HTTP trigger and you're done!\n\n### 2. Custom Configuration\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler } = createStaticServer({\n indexFile: '/app.html',\n headers: {\n 'Cache-Control': 'max-age=3600',\n 'X-Powered-By': 'My Static Server'\n },\n mimeTypes: {\n '.ts': 'text/typescript; charset=utf-8'\n }\n});\n\nexport default handler;\n```\n\n### 3. API + Static Files\n\n**File: `server.ts`**\n```typescript\nimport { advancedStaticServer } from \"./static-server.ts\";\n\nexport default advancedStaticServer({\n routes: {\n '/api/users': async () => {\n // Your API logic here\n return new Response(JSON.stringify([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' }\n ]), {\n headers: { 'Content-Type': 'application/json' }\n });\n },\n '/api/health': () => new Response('OK')\n },\n staticOptions: {\n indexFile: '/index.html'\n }\n});\n```\n\n### 4. Single Page Application\n\n**File: `server.ts`**\n```typescript\nimport { createStaticServer } from \"./static-server.ts\";\n\nconst { handler, serveFile } = createStaticServer({\n notFoundHandler: async (pathname) => {\n // For routes without extensions, serve the SPA\n if (!pathname.includes('.')) {\n return await serveFile('/index.html');\n }\n return new Response('File not found', { status: 404 });\n }\n});\n\nexport default handler;\n```\n\n## 🔧 Configuration Options\n\n### Quick Setup Options\n\n```typescript\n// Default index file\nquickStaticServer()\n\n// Custom index file \nquickStaticServer('/app.html')\n```\n\n### Advanced Options\n\n```typescript\ncreateStaticServer({\n indexFile: '/index.html', // File served at root\n headers: { // Headers for all responses\n 'Cache-Control': 'no-cache'\n },\n mimeTypes: { // Custom MIME types\n '.vue': 'text/vue; charset=utf-8'\n },\n notFoundHandler: (pathname) => { // Custom 404 handler\n return new Response(`Not found: ${pathname}`, { status: 404 });\n },\n errorHandler: (error, pathname) => { // Custom error handler\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n})\n```\n\n## 📝 HTML File Setup\n\nYour HTML files can reference any JS/CSS files:\n\n**File: `index.html`**\n```html\n\n\n\n My App\n \n \n\n\n

peterqliu

staticServer

History for USAGE.md