modbender Deno Deploy Skill (Standalone)
Deploy simple web pages and HTML apps to Deno Deploy using a bundled Python script that calls the Deno REST API directly. No MCP tool required.
Credentials Setup (First Time)
Before deploying, the user must create a Deno Subhosting organization and retrieve their credentials:
- Go to dash.deno.com/subhosting/new_auto and create a new subhosting org
- From the org dashboard, copy the org ID and access token
Then save them as config files under ~/.config/deno-deploy/:
mkdir -p ~/.config/deno-deploy
echo "your_token_here" > ~/.config/deno-deploy/access_token
echo "your_org_id_here" > ~/.config/deno-deploy/org_id
If these files don't exist, the deploy script will print a clear error with setup instructions. Direct the user to dash.deno.com/subhosting/new_auto to get started.
Step 1: Plan the App
Before writing code, think about:
- What HTML/CSS/JS is needed?
- Does it need external libraries? (Use CDN links — no npm installs)
- Is it purely static, or does it need a simple backend (e.g., an API route)?
For simple pages: serve everything from a single main.ts file with inline HTML.
Step 2: Write Good Deno-Compatible Code
Standard Pattern
All Deno Deploy apps must export a fetch handler:
export default {
async fetch(req: Request): Promise<Response> {
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
</head>
<body>
<!-- content here -->
</body>
</html>`;
return new Response(html, {
headers: { "Content-Type": "text/html; charset=utf-8" },
});
},
};
Key Rules
- No Node.js APIs — no
require(), nofs, nopath - No npm packages — use CDN links (e.g.
https://cdn.tailwindcss.com) - Single file — inline all HTML, CSS, JS as template literals in
main.ts - Always set Content-Type — include
charset=utf-8for HTML responses - Routing — use
new URL(req.url).pathnamefor multi-route apps
Useful CDN Libraries
| Purpose | URL |
|---|---|
| Tailwind CSS | https://cdn.tailwindcss.com |
| Alpine.js | https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js |
| Chart.js | https://cdn.jsdelivr.net/npm/chart.js |
| Marked (markdown) | https://cdn.jsdelivr.net/npm/marked/marked.min.js |
Step 3: Save the Code to a File
Write the TypeScript code to a temporary file, e.g. /tmp/main.ts:
cat > /tmp/main.ts << 'EOF'
export default {
async fetch(req: Request): Promise<Response> {
...
},
};
EOF
Step 4: Deploy Using the Script
Run the bundled deploy script:
python scripts/deploy.py \
--name <project-name> \
--code /tmp/main.ts
Project naming tips:
- Use the topic/purpose:
birthday-card,sales-dashboard,quiz-game - Lowercase, hyphens only, max ~30 chars
- Avoid generic names like
apportest
The script will:
- Create a new Deno Deploy project
- Upload the code
- Print the live URL
Step 5: Verify the Deployment
After the deploy script runs, you MUST verify the deployment was successful:
Check the script output — look at the deployment response JSON printed by the script:
"status"should NOT be"failed". If it is, the code has errors — fix and redeploy.- If the status is
"pending", wait a few seconds and proceed to the next check.
Curl the live URL to confirm it's serving correctly:
curl -s -o /dev/null -w "%{http_code}" https://<project-name>.deno.dev- 200 = success, the page is live
- 404 or 500 = something is wrong — check the deployment logs URL printed by the script
- Any other error = the deployment may still be propagating, wait 5 seconds and retry once
If the deployment failed, check for these common causes:
- Syntax errors in the TypeScript code (missing braces, unclosed template literals)
- Missing
export default { fetch }handler - Use of Node.js APIs (
require,fs, etc.) - Fix the issue in the code file and redeploy
Do NOT tell the user the deployment succeeded until you have confirmed it with curl.
Step 6: Share the Result
After a verified successful deployment, always:
- Share the live URL prominently as a clickable link
- Briefly explain what the user will see when they open it
Example:
Your page is live at https://your-project.deno.dev
It shows [brief description]. Let me know if you'd like to change anything!
Common Pitfalls
- Don't forget
<!DOCTYPE html>— browsers may render in quirks mode without it - Don't use backticks inside template literals without escaping them
- Don't forget
export default { fetch }— the app won't start without it - If the project name is already taken, try a more specific name or add a suffix