• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
charmaine

charmaine

reactHonoStarterDupe

Remix of std/reactHonoStarter
Unlisted
Like
1
reactHonoStarterDupe
Home
Code
6
.cursor
backend
1
frontend
3
.vtignore
README.md
deno.json
Branches
1
Pull requests
Remixes
History
Environment variables
2
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
4/10/2025
Viewing readonly version of main branch: v40
View latest version
README.md

Welcome to Your Val Town Project! πŸ‘‹

Let's learn Val Town by doing, right here in the editor.

➑️ Get Started:

  1. Make sure you can see the Editor Pane (where this text is).
  2. Make sure you can see the Preview Pane on the right.
    • (If you don't see it, click the "HTTP" tab above the editor).
    • The Preview Pane shows your Live App and Progress Tracker. You'll interact with it directly!

Keep this README.md open for guidance.


Step 1: Launch Live Preview πŸš€ (Already Done!)

  • How: You're looking at the Preview Pane! It's live code served by backend/index.ts.
  • Concept: Instant deployment, zero config.
  • See: "Step 1" is checked in the Preview Pane.

Step 2: Edit & See Live Changes ✏️

  1. In the Editor, open backend/index.ts (use the File Tree on the left).
  2. Find const GREETING = ... near the top.
  3. ACTION: Change the text inside the quotes.
  4. ACTION: Click the green Save button (top-right of editor).
  5. ACTION: Click the Refresh button (πŸ”„) inside the Preview Pane.
  6. See: The "Greeting" in the Preview Pane updates, and "Step 2" gets checked!
  7. Concept: Edit β†’ Save β†’ Refresh Preview = Instant Updates.

Step 3: Save Data (Blob Storage) πŸ’Ύ

  1. In backend/index.ts, find const enableBlobCounter = false;.
  2. ACTION: Change false to true.
  3. ACTION: Click Save.
  4. ACTION: Refresh the Preview Pane twice.
  5. See: A "Visits" counter appears and increments in the Preview Pane. Step 3 is checked.
  6. Editor UI Tip: Need to debug? Add console.log("...") in your code, Save, refresh the Preview Pane, then check the Logs pane at the bottom of the editor.
  7. Concept: std/blob = Easy data persistence.

Step 4: Send an Email βœ‰οΈ

  1. In backend/index.ts, find enableTestEmail = false;.
  2. ACTION: Change false to true.
  3. ACTION: Click Save.
  4. ACTION: Refresh the Preview Pane.
  5. See: "Step 4" checked in the Preview Pane. Check your Val Town account email!
  6. Concept: std/email = Easy email notifications.

Step 5: Learn About Automation (Cron) ⏰

  1. ACTION: In the Preview Pane, find and click the "Learn Cron" button.
  2. See: Step 5 gets checked in the Preview Pane, and the official Cron guide opens in a new tab (perfect for deeper learning later).
  3. Concept: Use Cron Vals (created via the "+" button near your profile pic) to run code on a schedule.

Next Steps & UI Tour ✨

You've covered the core magic! Keep exploring:

  • Secrets: Use Environment Variables (left sidebar) for API keys. Access with Deno.env.get("...").
  • Collaboration: Like (❀️), Remix, and Comment on vals.
  • βš™οΈ Settings: Control privacy, permissions, etc.

Modify this project, or click "+" (top-right) > Val to create something new!

(More steps can be added later!)

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.