Frontend work often stops at the browser's edge. The app runs against a mock API, and the real backend appears late, with its own URLs and CORS settings. TDK CLI Core keeps the frontend inside the same local stack as its backends, so it talks to the real services from the start.
Starting a frontend
Create a frontend resource with tdk resource <name> --type frontend. The default framework is React, and the CLI also supports Vue, Svelte, Preact, Lit, Solid, Qwik, Vanilla, and TanStack Router. Pick the framework with --framework, and list the options with --frameworks.
The resource is written under services/<stack>/<name>/. Install dependencies, then start the stack with tdk up.
What you get
Each frontend is a Vite app built into a container that serves through nginx. TDK also generates three helper files that remove the usual setup work:
-
api-client.tsis a client preconfigured for the frontend's API route, so you do not hand-write URLs. -
env.tsexports the API URL the generated stack uses. -
api-index.tsre-exports the client and URL, so imports stay short.
These files live in .autogenerated/. Import from them, and do not edit them. If the API changes, change the backend and let TDK regenerate.
Working day to day
Edit the source files in your src/ folder. The stack is built with Tilt, so changes reach the running container without a full rebuild. Check the stack's state with tdk status --json or the dashboard from tdk ui, which lets you move through services and search their output.
What stays your job
TDK generates the plumbing. It does not design the interface, handle loading and error states, or decide how the app behaves when the API is slow. Those belong to you, and they are where most of the frontend work is.
A practical first session
- Create a frontend with
tdk resource shop-web --type frontend -y. - Run
tdk up main --dry-runand check the plan. - Start the stack with
tdk up, and open the frontend's URL from the output. - Import the generated API client in one component, and call one endpoint.
- Make the loading and error states explicit before you add anything else.
Summary
A frontend in TDK CLI Core runs in the same stack as its backends, with a generated API client and environment config. You write the interface and its states. TDK keeps the wiring consistent with the services behind it.
Top comments (1)
yes it works with react