# @appaflytech/create-wappa > Scaffold a new Wappa CMS project — Next.js or Expo React Native Latest version **0.0.40** (published 2026-07-10) · MIT license · 0 weekly downloads ## Install ```sh npm install @appaflytech/create-wappa pnpm add @appaflytech/create-wappa yarn add @appaflytech/create-wappa bun add @appaflytech/create-wappa ``` Provides the command `create-wappa`. ## Health **Score 50/100 (C)** — status: active. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. ## Facts | | | |---|---| | Version | 0.0.40 | | Published | 2026-07-10 | | First published | 2026-04-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM | | Dependencies | 2 | | Unpacked size | 243.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | emrahyurttutan, appa-tech | | Keywords | wappa, cms, nextjs, expo, scaffold, create | ## Links - npm: https://www.npmjs.com/package/@appaflytech/create-wappa - Repository: https://github.com/appaflytech/wappa-cli - Homepage: https://github.com/appaflytech/wappa-cli#readme - Issues: https://github.com/appaflytech/wappa-cli/issues - npm.io page: https://npm.io/package/@appaflytech/create-wappa ## Dependencies (2) - [picocolors](https://npm.io/package/picocolors.md) ^1.1.1 - [@clack/prompts](https://npm.io/package/@clack/prompts.md) ^0.9.1 ## Recent versions - 0.0.40 (latest) — 2026-07-10 - 0.0.37 — 2026-07-06 - 0.0.36 — 2026-07-06 - 0.0.35 — 2026-07-03 - 0.0.34 — 2026-07-03 - 0.0.33 — 2026-07-03 - 0.0.32 — 2026-07-02 - 0.0.31 — 2026-07-02 - 0.0.30 — 2026-06-30 - 0.0.29 — 2026-06-30 - 0.0.28 — 2026-06-30 - 0.0.27 — 2026-06-30 - 0.0.26 — 2026-06-26 - 0.0.25 — 2026-06-26 - 0.0.24 — 2026-06-26 - … 17 more at https://npm.io/package/@appaflytech/create-wappa/versions ## README # `@appaflytech/create-wappa` > Scaffold a new [Wappa CMS](https://github.com/appaflytech) project in seconds — Next.js 14 or Expo React Native, with optional gluestack-ui v4 or plain Tailwind/NativeWind. --- ## Usage ```bash npm create @appaflytech/wappa@latest # or npx @appaflytech/create-wappa@latest # or pnpm create @appaflytech/wappa@latest # or bunx @appaflytech/create-wappa@latest ``` Running the command launches an interactive prompt: ``` ◆ create-wappa ◇ Project type? │ ● Web (Next.js 14) ○ Mobile (Expo React Native) ◇ UI framework? │ ● gluestack-ui v4 (Recommended) ○ Tailwind CSS only ◇ Project name? │ my-wappa-app ◇ Target directory? │ my-wappa-app ◇ Wappa site key? │ my-site-key ◇ Wappa API URL? │ https://api.example.com ◇ CDN URL? │ https://cdn.example.com ◇ Default language? │ ● Turkish (tr-tr) ○ English (en-us) ○ ... ◆ ✓ Project "my-wappa-app" created successfully! Next steps: cd my-wappa-app npm install npm run dev ``` --- ## What gets scaffolded ### Web (Next.js 14) | UI Framework | Stack | | --------------------- | ---------------------------------------------------------------------------- | | **gluestack-ui v4** | Next.js 14 · App Router · gluestack-ui v4 · NativeWind tokens · Tailwind CSS | | **Tailwind CSS only** | Next.js 14 · App Router · Tailwind CSS · plain HTML components | Scaffolded files include: - `app/layout.tsx` — root layout (with `GluestackUIProvider` if gluestack) - `app/page.tsx` — entry page using `WapScreen` - `components/WapScreen.tsx` — Wappa page renderer - `core/render.tsx` — Wappa component render system - `components/index.tsx` — 36 component registry - `services/contextService.ts` — `@appaflytech/wappa-client` integration - `store/store.ts` — Zustand store - `next.config.js`, `tailwind.config.js`, `tsconfig.json`, `.env`, `.gitignore` ### Mobile (Expo React Native) Mobile projects are a **thin shell** over [`@appaflytech/wappa-mobile-ui`](https://www.npmjs.com/package/@appaflytech/wappa-mobile-ui), which provides the server-driven render engine + the built-in component library. The scaffold only adds the app wiring and a handful of custom components, so the UI-framework choice no longer changes the mobile component source. Scaffolded files include: - `app/_layout.tsx` — root layout; imports `@/components` to register components - `app/index.tsx` / `app/[...pathname].tsx` — screens using `WapScreen` - `components/WapScreen.tsx` — page loader; calls `render()` from the package - `components/index.tsx` — `registerComponents()` wiring for the custom components - `components/ui/*` — custom components NOT in the package (box, card, table, charts, drawer, …) - `services/contextService.ts` — `@appaflytech/wappa-client` integration - `store/store.ts` — Zustand store + `setWappaStore()` (hands state to the engine) - `utils/path.ts` — CDN image helpers - `CUSTOM_COMPONENTS.md` — guide for adding/overriding components - `app.json`, `babel.config.js`, `metro.config.js`, `tailwind.config.js`, `.env` The render engine, built-in components (button, input, modal, image, lists, camera, …), navigation, overlays and buses all live in the package — they are **not** copied into the project. #### Custom components Add your own components (or override built-ins) with `registerComponents()` in `components/index.tsx`. Every scaffolded project ships a **`CUSTOM_COMPONENTS.md`** with a full walkthrough (create → register → use from the page schema). --- ## Included components ### Web (36 components) `box` · `center` · `hstack` · `vstack` · `grid` · `pressable` · `heading` · `paragraph` · `icon` · `image` · `video` · `embed` · `button` · `link` · `fab` · `card` · `card-list` · `avatar` · `badge` · `divider` · `data-table` · `skeleton` · `spinner` · `alert` · `progress` · `toast` · `accordion` · `tabs` · `modal` · `drawer` · `actionsheet` · `menu` · `alert-dialog` · `tooltip` · `form-control` · `input` · `switch` · `checkbox` · `radio` · `textarea` · `slider` · `select` · `date-picker` ### Mobile (29 components) `box` · `center` · `hstack` · `vstack` · `grid` · `pressable` · `heading` · `paragraph` · `icon` · `image` · `video` · `button` · `link` · `fab` · `card` · `card-list` · `avatar` · `badge` · `divider` · `skeleton` · `spinner` · `alert` · `progress` · `toast` · `accordion` · `tabs` · `modal` · `actionsheet` · `menu` · `alert-dialog` · `tooltip` · `form-control` · `input` · `switch` · `checkbox` · `radio` · `textarea` · `slider` --- ## Environment variables The generated `.env` file contains: ```env # Web (Next.js) NEXT_PUBLIC_WAP_SITE_KEY=your-site-key NEXT_PUBLIC_WAP_API=https://api.example.com NEXT_PUBLIC_WAP_CDN=https://cdn.example.com NEXT_PUBLIC_WAP_LANGUAGE=tr-tr ``` ```env # Mobile (Expo) EXPO_PUBLIC_WAP_SITE_KEY=your-site-key EXPO_PUBLIC_WAP_API=https://api.example.com EXPO_PUBLIC_WAP_CDN=https://cdn.example.com EXPO_PUBLIC_WAP_LANGUAGE=tr-tr ``` --- ## How it works The CLI uses [`@appaflytech/wappa-client`](https://github.com/appaflytech/wappa-client) to fetch page context from Wappa CMS. Each page renders dynamically via the Wappa **render system** — a component registry that maps Wappa widget types to your UI components: ```tsx // core/render.tsx (simplified) import { components } from "@/components"; export function WapRender({ elements }) { return elements.map((el) => { const Component = components[el.type]; return Component ? : null; }); } ``` You can extend the registry by adding components to `components/index.tsx`. --- ## Requirements | Web | Mobile | | ----------- | ------------------ | | Node.js 18+ | Node.js 18+ | | Next.js 14 | Expo SDK 51+ | | React 18 | React Native 0.74+ | --- ## Publishing (maintainers) ```bash npm run build npm publish --access public ``` --- ## License MIT © [appaflytech](https://github.com/appaflytech) --- _Source: https://npm.io/package/@appaflytech/create-wappa · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._