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: v319View 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. Also notice thebackend/weeklyInspirationEmail.tsfile - we'll use that in Step 5! - 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 the code from
backend/weeklyInspirationEmail.ts. - Read the instructions: You need to create this as a separate Scheduled Val.
- Either:
- Click "Create This Val Now" to open the code directly in the Val Town editor (recommended!), OR
- Click "Copy Code" to copy it manually for a new Scheduled Val.
- Close the modal (using Γ or clicking outside it). The tracker will refresh, showing Step 5 checked.
- (If you clicked "Create This Val Now"): Review the code in the new Val Town editor tab, ensure the
@crontag is uncommented, adjust the schedule if desired, and save it!
π 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 files like
backend/index.ts,backend/state.ts,frontend/tracker.html, and nowbackend/weeklyInspirationEmail.tsto see how the application is structured. - Try modifying the code!