Quick start
This page does one thing: scaffold and run your first Viewfly app with the official CLI.
Try it quickly
If you already finished Installation, follow the steps below to see the first screen.
Create a Viewfly app
Open a terminal in the folder where you want the project, then run the create command.
Using the CLI
@viewfly/cli creates a project in the current directory from a template. Here is the no-global-install flow:
npx @viewfly/cli create my-apppnpm dlx @viewfly/cli create my-appyarn dlx @viewfly/cli create my-appbun x @viewfly/cli create my-appIf you do not pass flags, the wizard asks for template, optional features, package manager, and whether to install dependencies—press Enter to accept defaults when unsure.
Non-interactive (scripts or CI) example:
npx @viewfly/cli create my-app \
--template vite \
--features router,scoped-css \
--pm pnpm \
--installWhen it finishes, cd into the project. If dependencies were not installed for you, install them, then start the dev server:
cd my-app
npm install
npm run devcd my-app
pnpm install
pnpm devcd my-app
yarn
yarn devcd my-app
bun install
bun run devThe terminal prints a local URL (often http://localhost:5173); open it in the browser to see the app.
Production build
When you are ready to ship, from the project root run:
npm run buildpnpm buildyarn buildbun run buildOutput usually lands in dist/, produced by Vite. How you deploy depends on your host or backend—out of scope here.
Tips
- The template already includes baseline TypeScript / JSX settings.
- The official Vite template ships Viewfly HMR via
@viewfly/devtools—savingTSX/JSXusually hot-updates components; see CLI & tooling for behavior and limits. - If you use decorator-based DI, follow Installation to wire up metadata in the build pipeline.
What the entry looks like
The scaffolded src/main.tsx will look roughly like below (exact code follows the template): createApp mounts the root component onto the container in index.html.
import { createApp } from '@viewfly/platform-browser'
import { App } from './app'
createApp(<App />).mount(document.getElementById('app')!)The app entry uses createApp to attach the root component to #app. See Creating an application for the full lifecycle and common patterns.