reactHonoStarterDupe
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.
Viewing readonly version of main branch: v265View latest version
This interactive project guides you through Val Town basics with a streamlined UI.
➡️ Get Set Up (Just 2 Steps!):
- Open Your Code: In the File Tree (left), select
backend/config.ts. This is the only file you'll need to edit for this onboarding. - Open & Pin Your Tracker: Click the "Open HTTP endpoint" button (🔗 icon, top-right). This opens your Live Progress Tracker in a new browser tab.
- 📌 IMPORTANT: Pin the Tracker tab! Right-click the tracker browser tab and select "Pin Tab". This keeps it visible and accessible while you switch between code files in the editor.
Ready? Follow the steps below. You'll make one edit in backend/config.ts and perform the rest of the actions directly in the Pinned Tracker Tab.
🚀 Onboarding Steps:
-
Launch Live App (Done!)
- You've already done this by opening and pinning the tracker!
-
Make Your First Code Edit
- Go to the
backend/config.tsfile in the editor. - Find the line
export const GREETING = ...;. - Change the text inside the quotes (e.g., "Hi from [Your Name]!").
- Click the green Save button (top-right in the editor).
- Switch to your Pinned Tracker Tab and Refresh it (using its 🔄 button or browser refresh).
- See: The greeting updates, and Step 2 is checked!
- Go to the
-
Enable Visit Counter & Refresh
- In your Pinned Tracker Tab:
- Click the "Enable Visit Counter (Step 3)" button. The page will reload.
- Refresh the Tracker tab one more time.
- See: The "Visits" count appears (starting at 1), and Step 3 is checked!
-
Send a Test Email
- In your Pinned Tracker Tab:
- Click the "Send Test Email (Step 4)" button. The page will reload.
- See: Step 4 gets checked. Check your email inbox!
-
Create Your First Cron Val
- In your Pinned Tracker Tab:
- Click the "Show Weekly Cron Code (Step 5)" button.
- See: A modal appears with code for a scheduled val.
- Read the instructions in the modal, copy the code, and click the Close button (×) or outside the modal. The tracker will refresh, showing Step 5 checked.
- (Optional, Recommended!) Manually create a new "Scheduled Val" in your Val Town account using the copied code to get weekly project ideas!
🎉 Congratulations! You've completed the basic onboarding.
✨ Resetting Progress:
- If you want to start over, click the "Reset Progress" button in the Tracker UI.
- This clears your visit count, email status, and cron step status.
- Note: Resetting does not change the
GREETINGyou edited inbackend/config.ts. Manually change it back if desired.
Explore Further:
- Look through the other files (
backend/index.ts,backend/state.ts,frontend/tracker.html, etc.) to see how the application is structured. - Try modifying the code! What else could you build?