Add and run a frontend (storefront, SPA, admin app) in a Flisk stack and work with what Flisk generates for it - nginx config, Vite configs, tsconfig, `.env.frontend.autogenerated`, `env.ts` and the typed `api-client.ts` that calls the stack's backend - plus base paths behind Traefik. Use when adding a web app to a stack or when a frontend build, route or API call fails. To choose between React, Vue, Next.js and the other frameworks, see flisk-build-runtimes.
Installs into .claude/skills of the current project.
Are you the author of Flisk Frontend?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/flisk-sh-flisk-frontend)
---
name: flisk-frontend
description: Add and run a frontend (storefront, SPA, admin app) in a Flisk stack and work with what Flisk generates for it - nginx config, Vite configs, tsconfig, `.env.frontend.autogenerated`, `env.ts` and the typed `api-client.ts` that calls the stack's backend - plus base paths behind Traefik. Use when adding a web app to a stack or when a frontend build, route or API call fails. To choose between React, Vue, Next.js and the other frameworks, see flisk-build-runtimes.
license: MIT
compatibility: Requires the flisk CLI. Does not deploy.
metadata:
author: flisk-sh
version: "1.0"
---
# Frontend services
## Workflow
1. Scaffold it: `flisk resource storefront --type frontend --stack shop --yes` (React by default; `--framework vue` and others, see flisk-build-runtimes). `--base-path /shop` sets the path it is served under (`basePath` in `service.json`).
2. Write the app in the service directory. Call the backend through the generated `api-client.ts` (or the URL exported by `env.ts`) instead of hard-coding a host.
3. `flisk up shop` builds it and serves it through nginx behind Traefik. Take the URL from `flisk networks`.
4. Change ports, dependencies or the base path in `service.json`; `flisk up` regenerates the files.
## What Flisk generates in `.autogenerated/`
| File | Purpose |
| --- | --- |
| `nginx.autogenerated.conf` | serves the built app and routes API requests |
| `Dockerfile.app.autogenerated` | builds the image for the local stack |
| `vite.config.frontend.autogenerated.ts`, `vite.config.build.autogenerated.ts` | dev server and production build |
| `tsconfig.autogenerated.json`, `tsconfig.docker.autogenerated.json` | host and container TypeScript settings |
| `.env.frontend.autogenerated`, `env.ts`, `api-client.ts`, `api-index.ts` | API URL and a preconfigured client |
Next.js (`--framework next`) has no Vite config and no nginx: it runs `next dev` in development and the standalone server for production.
## Guardrails
- Do not hand-edit generated nginx, Vite or tsconfig files; `flisk up` refuses to start when they drift.
- If `bun run build` says a `.autogenerated/vite.config...` file does not exist yet, run `flisk up` once to generate it.
- List of generated files: [docs/generated-files.md](https://github.com/flisk-sh/flisk/blob/main/docs/generated-files.md).
