Flisk Ecommerce Example (Vue + Hono)

A small, complete Flisk project: a Vue 3 storefront and a Hono catalog API, two resources of one store stack. It is the smallest example of opting into the Vue provider with flisk resource --framework vue.

storefront-web (Vue + Vite + TypeScript) shows a product grid with search, a cart, and checkout. catalog-api (Hono on Bun, Postgres) serves products and creates orders, pricing them in integer cents and refusing to oversell. Products and orders are stored in Postgres: catalog-api-migrator runs the Prisma migrations and seeds the catalog once, and catalog-api starts after it. Stock sold stays sold across restarts.

Requires Flisk CLI 1.3.75 or newer (flisk#149 added Vue support). Older releases ignore "framework": "vue" and would generate React config for these files. Check with flisk resource --help | grep -- --framework.

What it looks like

Product grid and cart	Order placed

Sold-out items (Brew Scale) can't be added, and checkout empties the cart. On a phone the cart moves below the product list:

Run it

Repository-pinned CLI (optional): Run bun install from the repository root to install the version pinned in package.json. Use bun run flisk:project to initialize project config, bun run flisk:dry-run to preview startup, or bun run flisk:up -- <stack> to start a stack. The global npm and standalone binary installation paths remain available.

Prerequisites: Docker running, Tilt, Bun and the Flisk CLI.

git clone https://github.com/flisk-sh/flisk-ecommerce-example.git
cd flisk-ecommerce-example
flisk up store

Resource	Type	Stack	Port	URL
catalog-api-migrator	migrator (runs once)	store	7300	none
catalog-api	Hono API	store	4300	http://api.flisk-ecommerce-example.localhost/api/catalog/api/products
storefront-web	Vue 3 app	store	3300	http://app.flisk-ecommerce-example.localhost/storefront-web

Both go through Traefik; Flisk does not publish the container ports on localhost. flisk networks lists the *.localhost routes; flisk down stops everything.

How it was made

mkdir flisk-ecommerce-example && cd flisk-ecommerce-example
flisk project --yes
flisk resource catalog-api --type backend --stack store
flisk resource storefront-web --type frontend --framework vue --stack store

--framework vue writes "framework": "vue" into storefront-web/service.json. That single field makes Flisk generate the Vue Vite config (@vitejs/plugin-vue) and a TypeScript config without React's JSX setting, into .autogenerated/. Docker, nginx, Traefik and Tilt are shared with React frontends.

Resources live under services/<stack>/<name>/ because that is where discovery.paths in .flisk/project.json looks. flisk resource picks that folder for you and tells you when it does.

Where to look

• catalog-api/src/app.ts: GET /api/products?q=, GET /api/products/:id, POST /api/orders (one transaction, rows locked, 409 when short) and CORS, since the Vue app calls the API from its own origin.
• catalog-api-migrator/prisma/migrations: the schema, applied by prisma migrate deploy. src/seed.ts is the starting catalog.
• storefront-web/src/App.vue: the UI. cart.ts holds the cart rules and api.ts the typed client, both unit tested.
• service.json in each resource is the whole Flisk contract. storefront-web declares dependsOn: ["catalog-api"].

Important

Edit service.json or the sources. Never edit .autogenerated/; Flisk regenerates it.

Test each resource

# catalog-api runs against a real Postgres. flisk up provides DATABASE_URL; apply the migrations first:
cd services/store/catalog-api-migrator && DATABASE_URL=postgres://... bun run migrate
cd ../catalog-api && bun install && DATABASE_URL=postgres://... bun run test
cd ../storefront-web && bun run test && bun run build

bun run build runs tsc && vite build --config .autogenerated/vite.config.build.autogenerated.ts, the same command the Docker image runs. The config file appears after the first flisk up (or flisk config regenerate).

License

MIT