Teleforge Getting Started
This guide is the shortest path from clone to a working Teleforge app.
If you want the broader framework model, read Developer Guide. If you want package boundaries and data flow, read Architecture. If you are new to Telegram Mini Apps, read Telegram Mini App Basics first.
Goal
By the end of this guide you should have:
- a Teleforge app scaffolded or one of the repo examples running
- a local Mini App open in the browser with the Telegram mock bridge
- an optional live Telegram path through
/start
Background: How Telegram Mini Apps Work
Teleforge apps always have two connected surfaces:
- a bot chat, where users send commands like
/start - a Mini App web view, where your React app runs inside Telegram
Telegram opens the Mini App inside its web view and passes launch context such as user identity and start parameters through the WebApp bridge. That launch payload is usually called initData. Teleforge wraps that bridge with hooks such as useTelegram() and useLaunch() so your app code can read the current user, platform, launch mode, and validation state without parsing raw Telegram fields by hand.
When a Mini App needs to send something back to the bot, the normal Telegram mechanism is web_app_data. Teleforge supports that directly, and it also supports richer coordinated flows where a chat action opens a Mini App, the Mini App persists progress, and the result returns to chat in a structured way. If those terms are new, read Telegram Mini App Basics before continuing.
Prerequisites
You need:
- Node.js 18 or newer
pnpm- a Telegram account
- BotFather access if you want to test against live Telegram
Optional but useful:
- Telegram Desktop or Telegram Web for faster local iteration
- a mobile Telegram client to verify the final Mini App behavior on-device
Fastest Path
If you want the shortest route to something working, use the starter example:
pnpm install
pnpm build
cd examples/starter-app
pnpm install
cp .env.example .env
pnpm dev
You should see:
- a local web dev server start
- a bot process start in preview mode if
BOT_TOKENis still unset - a browser window or local URL showing the Starter App
- theme/user/platform cards rendered even outside Telegram
If that works, skip ahead to Open in Telegram.
1. Install and Build the Workspace
From the repository root:
pnpm install
pnpm build
This builds the local packages so the examples and scaffolded apps can consume them.
You should see:
- all framework packages build successfully
- no missing workspace-package errors
If this fails, start with Troubleshooting.
2. Pick a Starting Point
You have three practical entry points in this repo.
Option A: Minimal Example
Use this when you want the fastest working setup:
cd examples/starter-app
pnpm install
cp .env.example .env
pnpm dev
This gives you:
- one Mini App page
- one
/startbot command - local mock-friendly development
See examples/starter-app/README.md for the example-specific details.
When it is running, use the README’s walkthrough section to map the working app back to real files.
Option B: Full Reference App
Use this when you want to see the complete V1 flow:
cd apps/task-shop
pnpm install
cp .env.example .env
pnpm dev
This shows:
- bot commands
web_app_datahandling- launch-mode-aware checkout
- resumable flow state
- Mini App return-to-chat coordination
See apps/task-shop/README.md for the sample details.
Option C: Generate a New App
Build the local scaffold:
pnpm --filter create-teleforge-app build
Generate a project:
node packages/create-teleforge-app/dist/cli.js my-app --mode spa
node packages/create-teleforge-app/dist/cli.js my-bff-app --mode bff
Use spa when the Mini App can talk to your existing backend directly.
Use bff when you want a Telegram-aware backend layer with route middleware, identity/session helpers, and service adapters.
You should see:
- a new project directory
apps/web,apps/bot, andapps/apiteleforge.app.json.env.example- root scripts for
pnpm run dev,pnpm run dev:public, andpnpm run doctor - baseline bot and web smoke tests behind
pnpm test
3. Run Local Development
Teleforge’s main local-dev commands are:
teleforge dev
teleforge dev --public --live
teleforge mock
teleforge doctor
Use them like this:
teleforge dev: local Telegram simulator with chat, embedded Mini App, Telegram-like state controls, and any companionapps/botdevserviceteleforge dev --public --live: HTTPS local development for Telegram-facing testing, using Cloudflare Tunnel by default when public reachability is neededteleforge mock: standalone profile/state server for saved scenarios, headless CI, or manual mock-state editingteleforge doctor: environment and manifest diagnostics
For first-time local work:
teleforge dev --open
You should see:
- Teleforge validate
teleforge.app.json - the simulator shell boot in a normal browser
- a chat pane and an idle Mini App panel
- real local bot command handling when
apps/bot/src/runtime.tsexportscreateDevBotRuntime() - inline keyboard callback buttons routed back as local
callback_queryupdates - built-in fixtures for quick fresh-session, dark-mobile, and resume-flow setups
- a Replay Last action for rerunning the most recent chat, callback, or
web_app_datastep - the companion bot dev process start when the workspace defines it
- Telegram-like theme, viewport, launch, and user state injected into the embedded app
- a debug panel showing the current mode, active scenario, latest event, and profile snapshot
- saved scenarios available for reloading transcript plus Telegram state from
~/.teleforge/scenarios
If your workspace does not have apps/bot/src/runtime.ts, the simulator still works, but chat falls back to manifest-level /start and /help behavior.
By default, the embedded Mini App stays closed until you send /start, click a web_app button, or press Open App. If you want the iframe to load immediately for UI work, run:
teleforge dev --open --autoload-app
Recommended local loop:
- Start
teleforge dev --open. - Apply a built-in fixture to get close to the state you want.
- Drive the flow from the chat pane.
- Save the scenario once the state is useful.
- Reload that scenario later as a local regression case.
4. Create a Telegram Bot
If you want to open the app in Telegram instead of only in the local browser:
- Open BotFather in Telegram.
- Create a bot and copy the token.
- Put the token in your
.envasBOT_TOKEN. - Leave
MINI_APP_URLblank unless you need to force a fixed override. Duringteleforge dev, Teleforge injects the resolved local or public URL into the companion bot automatically.
For the polling-first scaffolds and repo examples, the minimum bot configuration in teleforge.app.json is:
bot.usernamebot.tokenEnv
bot.webhook.path and bot.webhook.secretEnv only matter when your primary web runtime actually serves /api/webhook. The current starter and Task Shop flows use polling, not webhook delivery.
5. Open in Telegram
Use teleforge dev --public --live when you need a Telegram-openable URL:
teleforge dev --public --live
Then open the Mini App through your bot entry point.
teleforge dev --public --live prefers Cloudflare Tunnel as the default public tunnel provider. Install cloudflared locally for the smoothest path. If you need provider-specific behavior, you can still pass --tunnel-provider localtunnel or --tunnel-provider ngrok. teleforge dev:https remains available as a compatibility alias.
Typical flow:
- From the workspace root, start
pnpm run dev:publicorteleforge dev --public --live. - Wait for Teleforge to print the public URL and start the companion bot process.
- Send
/startto your bot in Telegram. - Tap the Mini App button or menu button.
You should see:
- Telegram open the Mini App instead of just the browser preview
- the same route load with Telegram-provided theme and user state
- native controls like Main Button or Back Button respond through the Telegram client
This can be tested from:
- Telegram Desktop
- Telegram Web
- mobile Telegram clients
If the Mini App does not open, go to Troubleshooting.
Webhook Note
Webhook mode is optional and more constrained than the polling flow:
- use it only when your primary web runtime serves
/api/webhook - the shipped starter and Task Shop examples do not use webhook mode
- the generated scaffold includes webhook placeholders, but that does not make webhook mode active by itself
6. Verify the First Run
After the first successful run, verify these checkpoints:
- the Mini App renders without runtime crashes
useTelegram()reports a ready state in Telegram or safe defaults outside Telegram/startopens the expected Mini Appteleforge doctorreports a healthy local setup
Run:
teleforge doctor
If you are working inside this repo, also run:
pnpm test
pnpm docs:build
Core Surfaces to Learn Next
The main packages are:
@teleforgex/core: manifest, validation, launch parsing, flow-state contracts@teleforgex/web: Telegram hooks and Mini App coordination@teleforgex/ui: Telegram-native React UI primitives@teleforgex/bot: bot routing,web_app_data, webhook helpers@teleforgex/bff: Telegram-aware backend routes, adapters, sessions@teleforgex/devtools: local development and diagnostics