create-ranger

v1.4.0

Published

17 days ago

Scaffold production-ready monorepos with Next.js or React/Vite, Expo, tRPC, Better Auth, and Prisma.

0High
0Medium
0Low

ranger scaffold generator create-app monorepo nextjs vite tanstack-router expo trpc better-auth prisma turbo pnpm fullstack typescript

Ranger သည် web၊ mobile၊ auth၊ API နဲ့ database ကို အဆင်သင့်ချိတ်ထားပေးထားတဲ့ production-ready monorepo တွေကို scaffold လုပ်ပေးတဲ့ zero-dependency Node.js CLI ဖြစ်ပါတယ်။

Dahlai-style stack အတွက် တရားဝင် project generator ဖြစ်ပြီး black-box framework မဟုတ်ဘဲ သင်ပိုင်ဆိုင်တဲ့ source files တွေကို generate လုပ်ပေးပါတယ်။

npm: create-ranger

အသုံးပြုနည်း

Ranger သည် project generator (CLI) ဖြစ်ပြီး dependencies ထဲ ထည့်သုံးတဲ့ library မဟုတ်ပါ။

npm sidebar မှာ npm i create-ranger ပြနေပေမယ့် ဒါက CLI tool ကိုသာ install လုပ်တာပါ။ project အသစ် generate လုပ်ဖို့ အောက်ပါ command တွေကို သုံးပါ။

# ✅ အကြံပြု — တစ်ခါ run၊ install မလို
npx create-ranger my-app

# ✅ npm create shorthand (package တူ)
npm create ranger my-app

# ✅ global install လုပ်ပြီးရင်
npm install -g create-ranger
ranger my-app

| ✅ Project generate | ❌ မှားနည်း | | --- | --- | | npx create-ranger my-app | npm i create-ranger တစ်ခုတည်း (CLI သာ install၊ project မထွက်) | | npm create ranger my-app | app ရဲ့ package.json ထဲ create-ranger ထည့်ခြင်း | | pnpm dlx create-ranger my-app | import {} from "create-ranger" လို library import မျှော်ခြင်း |

App အသစ်ထည့်ခြင်းနှင့် ဖြုတ်ခြင်း

ရှိပြီးသား Ranger workspace ထဲကနေ (သို့) အဲဒီအောက်က folder တစ်ခုကနေ run နိုင်ပါတယ်။ App အသစ်တွေကို ရှိပြီးသား blog/auth templates နဲ့ apps/<name> ထဲမှာ ထည့်ပေးပါတယ်။

ranger add             # mobile / web / desktop / server ရွေးပြီး နာမည်မေးမယ်
ranger add -m          # နာမည်မေးပြီး Expo blog app ထည့်မယ်
ranger add -w          # နာမည်မေးပြီး web app ထည့်မယ်
ranger add -d          # နာမည်မေးပြီး Wails app ထည့်မယ်
ranger add -s          # Next.js / Express server: new or existing

# နာမည်ကို တစ်ခါတည်းပေးလည်း ရပါတယ်
ranger add -m reader
ranger add -w dashboard --frontend react
ranger add -d office

ranger remove          # ရှိပြီးသား app နာမည်တွေကို checkbox နဲ့ရွေးမယ်
ranger remove -reader
ranger remove -dashboard -office

Remove list မှာ ↑/↓ နဲ့ရွှေ့၊ Space နဲ့ app တစ်ခုထက်ပိုရွေး၊ Enter နဲ့ဖြုတ်၊ Esc နဲ့ cancel လုပ်နိုင်ပါတယ်။ ရွေးထားတဲ့ app folder အတွင်းက local changes အပါအဝင် ဖျက်မှာဖြစ်ပြီး နာမည်ပေးပြီး remove လုပ်ရင် confirmation ထပ်မမေးပါဘူး။

နာမည်ကို lowercase letters၊ numbers နဲ့ hyphens သုံးပေးပါ။ ရှိပြီးသား folder/package ကို overwrite မလုပ်ပါဘူး။ Web framework က ရှိပြီးသား web အတိုင်း default ယူပြီး --frontend next / --frontend react နဲ့ပြောင်းနိုင်ပါတယ်။ App အသစ်တိုင်းအတွက် dev port သီးသန့်၊ pnpm dev:<name> command နဲ့ root Turbo dev ချိတ်ဆက်မှု ထည့်ပေးပါတယ်။ Expo app တွေက workspace ရဲ့ auth scheme ကို ပြန်သုံးပါတယ်။

Wails က မူလ scaffold အတိုင်း Express backend၊ UI ပြန်သုံးမယ့် web app၊ Go နဲ့ Wails v2 CLI လိုပါတယ်။ Next.js API workspace ဖြစ်နေရင် Wails မထည့်ခင် Express သို့ migrate လုပ်ရပါမယ်။ App တစ်ခုက အခြား app ကို မှီခိုနေရင် အတူရွေးဖြုတ်ရပါမယ်။ ကျန် app တွေ သုံးနေတဲ့ API host/web UI ကို တစ်ခုတည်းဖြုတ်တာကို တားပေးပါတယ်။

ဖြုတ်တဲ့အခါ root scripts၊ app-specific Turbo tasks/references၊ workspace paths နဲ့ pnpm lockfile importers တွေကိုပါ cleanup လုပ်ပေးပါတယ်။ Shared packages တွေကို ထိန်းထားပါတယ်။ Add/remove ပြီးတိုင်း dependencies နဲ့ lockfile update အတွက် pnpm install run ပေးပါ။

Web app အသစ်ရဲ့ /api နဲ့ /uploads ကို ရှိပြီးသား API host ဆီ proxy လုပ်ပေးပါတယ်။ React/Vite ကို deploy လုပ်တဲ့အခါ reverse-proxy routes ထည့်ပေးရန် သို့မဟုတ် app ရဲ့ .env.local မှာ VITE_API_URL သတ်မှတ်ပြီး backend CORS configure လုပ်ရန် လိုပါတယ်။

အမြန် စတင်

Folder အလွတ်တစ်ခုကနေ Ranger run ပြီး database setup လုပ်ကာ dev စတင်ပါ။

# 1. Project အသစ် generate (interactive prompts)
npx create-ranger my-app

# 2. Dependencies install
cd my-app
pnpm install

# 3. Secrets သတ်မှတ်၊ database ဖန်တီး၊ seed လုပ်
#    - .env ထဲ BETTER_AUTH_SECRET
#    - root .env ထဲ SEED_ADMIN_PASSWORD
pnpm db:reset    # prompt မှာ "yes" ရိုက်ပါ
pnpm db:push
pnpm db:seed

# 4. App အားလုံး စတင်
pnpm dev

http://localhost:3000 ဖွင့်ပြီး /login မှာ sign up လုပ်ပါ သို့မဟုတ် pnpm db:seed နဲ့ ဖန်တီးထားတဲ့ admin account သုံးပါ။

One-liner (non-interactive, full stack + Express API + desktop):

npx create-ranger my-app --yes --web --mobile --desktop --backend express

Ranger ဘာကြောင့် လိုအပ်လဲ

Full-stack monorepo စတင်တိုင်း အလုပ်တူတူ ထပ်ခါထပ်ခါ လုပ်ရတတ်ပါတယ်။

web နဲ့ mobile မှာ auth ချိတ်ဆက်ခြင်း
client နဲ့ server အကြား API type မျှဝေခြင်း
backend ပုံစံ ရွေးချယ်ခြင်း (Next.js routes vs Express)
Prisma၊ seed data၊ admin roles၊ env files မှန်ကန်စွာ ထားခြင်း
team နဲ့ AI tools အတွက် architecture convention မှတ်တမ်းတင်ခြင်း

Ranger က command တစ်ခုတည်းနဲ့ အခြေခံ foundation ကို generate လုပ်ပေးလို့ product logic ပဲ အာရုံစိုက်နိုင်ပါတယ်။

ရရှိမည့် အရာများ

Generate လုပ်ထားတဲ့ project တိုင်းမှာ ပါဝင်ပါတယ်။

| Layer | Technology | | --- | --- | | Workspace | pnpm workspaces + Turbo | | API | Shared @repo/api package with tRPC routers | | Auth | Better Auth with Prisma adapter, admin plugin, Expo support | | Database | Prisma + PostgreSQL (Better Auth models + Post model) | | Web (optional) | Next.js App Router သို့မဟုတ် React + Vite + TanStack Router | | Mobile (optional) | Expo Router, React Native StyleSheet only | | Desktop (optional) | Wails v2 app — framework-neutral web features ကို Vite နဲ့ ပြန်သုံး | | Backend | Next.js server + tRPC သို့မဟုတ် Express server + tRPC | | Tooling | Shared TypeScript config, Prettier, Cursor rules |

Built-in features

Email/password auth with role-based access (user, admin, etc.)
Public post feed + authenticated post creation with image upload
Admin dashboard: users, posts, summary stats
Database seed script for local admin user and sample post
.cursor/rules for API, database, web, and mobile architecture

လိုအပ်ချက်များ

| Tool | Version | | --- | --- | | Node.js | >= 20 | | pnpm | 9.x (generated apps pin [email protected]) | | PostgreSQL | local instance with psql available | | Expo Go / simulator | mobile app ဖွင့်မှသာ လို | | Go + Wails CLI v2 | desktop app ဖွင့်မှသာ လို (go 1.23+) |

Ranger install လုပ်နည်း

npm package name: create-ranger

Repo clone မလုပ်ရပါ။ အောက်ပါနည်းလမ်းတစ်ခု ရွေးပါ။

1. `npx` — အကြံပြု

Global install မလိုဘဲ latest version run ပါ။

npx create-ranger my-app

Version သတ်မှတ်ချင်ရင်:

npx [email protected] my-app

2. `npm create`

npm create ranger my-app

create-ranger package ကို run လုပ်ပါတယ် (npm က create- prefix ဖယ်ပေးတယ်)။

3. `pnpm dlx`

pnpm dlx create-ranger my-app

4. `yarn create`

yarn create ranger my-app

5. Global CLI install

ranger command ကို နေရာတိုင်း သုံးချင်မှသာ:

npm install -g create-ranger

ranger my-app           # primary
create-ranger my-app    # same CLI
renger my-app           # typo-safe alias

npm i create-ranger (-g မပါ) ဆိုရင် လက်ရှိ project ရဲ့ node_modules ထဲ CLI သာ install လုပ်တယ်။ အများအားဖြင့် npx create-ranger က ပိုသင့်တော်ပါတယ်။

6. Source ကနေ (contributors)

git clone https://github.com/rangorithm/ranger.git
cd ranger
node ./bin/ranger.js my-app

npm ကို publish မလုပ်ဘဲ local source ကို global command အဖြစ် သုံးချင်ရင်:

npm link
create-ranger my-app

npm link က global symlink ချိတ်ပေးတာဖြစ်လို့ ဒီ repository ထဲက code ပြင်တာတွေ command မှာ ချက်ချင်းသက်ရောက်ပါတယ်။ မသုံးတော့ရင် npm unlink -g create-ranger နဲ့ ဖြုတ်နိုင်ပါတယ်။

Command cheat sheet

| ရည်ရွယ်ချက် | Command | | --- | --- | | Project generate (အကောင်းဆုံး) | npx create-ranger <name> | | npm create ဖြင့် generate | npm create ranger <name> | | pnpm ဖြင့် generate | pnpm dlx create-ranger <name> | | yarn ဖြင့် generate | yarn create ranger <name> | | Global CLI သုံး | npm i -g create-ranger ပြီးရင် ranger <name> |

Output

npx create-ranger my-app
# creates → ./my-app/

Ranger က target folder အတွင်းမှာသာ ဖိုင်တွေ ရေးပါတယ်။

Interactive mode

Flag မပါဘဲ run လုပ်ရင် setup ကို လမ်းညွှန်ပေးပါတယ်။

npx create-ranger

မေးမည့်အရာများ:

Project name — folder name နဲ့ package.json name (kebab-case)
Include Expo mobile app? — Y/n
Include web/admin app? — Y/n
Web frontend — Next.js App Router သို့မဟုတ် React + Vite + TanStack Router
Include Wails desktop app? — y/N
Backend server:
- Next.js ရွေးထားရင် Next.js server + tRPC သို့မဟုတ် Express server + tRPC ကို ရွေးနိုင်ပါတယ်။
- React + Vite ရွေးထားရင် Ranger က Express server + tRPC ကို အလိုအလျောက်ထည့်ပြီး frontend နဲ့ ချိတ်ပေးပါတယ်။
- Wails desktop ကလည်း Express + tRPC server ကို လိုအပ်ပါတယ်။

Ranger က လက်ရှိ directory ရဲ့ ./<project-name> ထဲ project ရေးပါတယ်။

CLI reference

ranger <project-name> [options]

Options

| Flag | ဖော်ပြချက် | | --- | --- | | --yes, -y | Prompt ကျော်ပြီး defaults သုံး | | --force, -f | folder မဗလာ ဖြစ်နေရင် generated files overwrite | | --web | Web/admin app ထည့် | | --no-web | Web app မထည့် (Express backend only) | | --mobile | Expo mobile app ထည့် | | --no-mobile | Mobile app မထည့် | | --desktop | Wails desktop app ထည့် | | --no-desktop | Desktop app မထည့် | | --frontend next\|react | Web frontend ရွေးချယ်ရန် | | --next, --nextjs | Next.js ရွေးပြီး web ဖွင့်ရန် | | --react | React + Vite + TanStack Router ရွေးပြီး web ဖွင့်ရန် | | --backend next | Auth၊ tRPC နဲ့ uploads အတွက် Next.js server သုံးရန် | | --backend express | Port 4000 မှာ Express + tRPC server သုံးရန် | | --backend=express | --backend express နဲ့ တူ |

Examples

Express backend နဲ့ full stack (web + mobile + desktop အတွက် အကြံပြု):

npx create-ranger my-app --yes --web --mobile --desktop --backend express

React + Vite + TanStack Router (Express + tRPC အလိုအလျောက်ပါဝင်):

npx create-ranger my-app --yes --react --mobile

Web + desktop with Express API:

npx create-ranger my-app --yes --web --no-mobile --desktop --backend express

Web-only with Next.js API routes:

npx create-ranger my-app --yes --web --no-mobile --backend next

Mobile-only with Express API:

npx create-ranger my-app --yes --no-web --mobile --backend express

CI / automation with forced overwrite:

npx create-ranger my-app --yes --web --mobile --backend express --force

Defaults with `--yes`

| Setting | Default | | --- | --- | | Project name | my-ranger-app (မပေးရင်) | | Web app | enabled | | Web frontend | Next.js App Router | | Mobile app | enabled | | Desktop app | disabled | | Backend | next; React၊ desktop သို့မဟုတ် --no-web ဆိုရင် express အလိုအလျောက်သုံး |

မှတ်ချက်: --backend next ရွေးရင် web app ကို အမြဲ enable လုပ်ပါတယ် — Next.js က API routes ကို host လုပ်လို့ပါ။

မှတ်ချက်: Desktop app က web app နဲ့ Express backend လိုပါတယ်။ apps/web UI ကို Vite aliases နဲ့ ပြန်သုံးပြီး API ကို VITE_API_URL နဲ့ ခေါ်ပါတယ်။

မှတ်ချက်: React + Vite က Express backend ကို အမြဲသုံးပါတယ်။ Next.js က Next.js route handlers သို့မဟုတ် Express ကို ရွေးနိုင်ပါတယ်။

Backend modes

Ranger က backend architecture နှစ်မျိုး ပံ့ပိုးပါတယ်။ deploy ပုံစံနဲ့ ကိုက်ညီအောင် ရွေးပါ။

`next` — Next.js server + tRPC

Browser / Mobile  →  Next.js (port 3000)
                       ├── /api/auth/*
                       ├── /api/trpc/*
                       └── /api/uploads

Web နဲ့ API အတွက် single origin
NEXT_PUBLIC_API_URL ဗလာ — same-origin requests
သင့်တော်သည်: web-first apps, Vercel-style deploy, local dev ရိုးရှင်း

`express` — Express server + tRPC

Web (3000)  ──→  Express API (4000)
Mobile      ──→       ├── /api/auth/*
                      ├── /api/trpc/*
                      └── /api/uploads

Web နဲ့ API က process ခွဲထား
root .env ထဲ Next အတွက် NEXT_PUBLIC_API_URL=http://localhost:4000 သို့မဟုတ် React အတွက် VITE_API_URL=http://localhost:4000
သင့်တော်သည်: mobile + web combo, custom server middleware, traditional API deploy

| | Next backend | Express backend | | --- | --- | --- | | API port | 3000 (web နဲ့ မျှသုံး) | 4000 | | Web env | same-origin | :4000 ကို ညွှန်း | | apps/server/ | မထွက် | ထွက် | | Mobile API URL | http://localhost:3000 | http://localhost:4000 |

Generate လုပ်ထားသော project structure

my-app/
├── apps/
│   ├── web/                 # Next.js or React/Vite admin + public app
│   ├── mobile/              # Expo app (if enabled)
│   ├── desktop/             # Wails desktop app (if enabled)
│   └── server/              # Express API (express backend only)
├── packages/
│   ├── api/                 # tRPC routers: post, user, admin
│   ├── auth/                # Better Auth config + session helpers
│   └── db/                  # Prisma schema, client, seed script
├── tooling/
│   └── typescript-config/   # shared tsconfig presets
├── scripts/
│   └── reset-database.sh    # creates local Postgres DB from project name
├── .cursor/rules/           # architecture rules for Cursor AI
├── .env                     # local env တစ်ခုတည်းသော source of truth
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

Package naming

Ranger က project folder နာမည်ကနေ derive လုပ်ပါတယ်။

| Input folder | package.json name | Database name | | --- | --- | --- | | MyApp | my-app | my_app | | TestRanger | test-ranger | test_ranger |

Database name သည် kebab-case package name ကို snake_case ပြောင်းထားတာပါ။

ပထမဆုံး setup (generated app)

အပြည့်အစုံ copy-paste flow အတွက် အမြန် စတင် ကို ကြည့်ပါ။ ဒီအပိုင်းက အဆင့်တိုင်းကို အသေးစိတ် ရှင်းပြထားပါတယ်။

Ranger က project ဖန်တီးပြီးရင်:

cd my-app
pnpm install

1. Secrets သတ်မှတ်ပါ

Generated root .env ကိုဖွင့်ပြီး auth နဲ့ seed secrets သတ်မှတ်ပါ။ Root .env က local environment တစ်ခုလုံးအတွက် source of truth ဖြစ်ပါတယ်။

BETTER_AUTH_SECRET="use-a-long-random-string-at-least-32-chars"
SEED_ADMIN_PASSWORD="use-a-strong-local-password"

Scoped .env.example files တွေက runtime တစ်ခုချင်းစီအတွက် variable reference ဖြစ်ပြီး root scripts တွေက root .env ကို app အားလုံးထဲ load လုပ်ပေးပါတယ်။

| File | သုံးသူ | | --- | --- | | packages/db/.env.example | Prisma CLI reference | | apps/web/.env.example | Next.js သို့မဟုတ် Vite client variables | | apps/server/.env.example | Express reference | | apps/mobile/.env.example | Expo reference | | apps/desktop/frontend/.env.example | Wails desktop reference |

2. Database ဖန်တီးပါ

pnpm db:reset

Prompt မှာ yes ရိုက်ပါ။ Script က:

package.json name ဖတ်ပါတယ်
ကိုက်ညီ PostgreSQL database ဖန်တီးပါတယ် (ဥပမာ my_app)
root .env ထဲ DATABASE_URL update လုပ်ပါတယ်
packages/db/.env ကို root .env နဲ့ link လုပ်ပါတယ်

3. Schema push & seed

pnpm db:push
pnpm db:seed

4. Development စတင်ပါ

pnpm dev

| Script | လုပ်ဆောင်ချက် | | --- | --- | | pnpm dev | Turbo TUI — app အားလုံး | | pnpm dev:stream | App တူ၊ log ရိုးရှင်း | | pnpm dev:web | Web/admin သာ | | pnpm dev:mobile | Expo သာ | | pnpm dev:server | Express API သာ | | pnpm desktop:setup | Go/Wails ရှိ/မရှိ စစ်ပြီး install | | pnpm dev:desktop | Wails desktop သာ | | pnpm dev:desktop:all | Express API + Wails desktop |

Sign in

pnpm db:seed ပြီးရင် web app မှာ /login ဖွင့်ပါ။ Seeded admin user နဲ့ login လုပ်နိုင်သလို sign-up နဲ့ account အသစ်လည်း ဖန်တီးနိုင်ပါတယ်။

Production မတိုင်ခင် packages/db/prisma/seed.mjs ထဲ seed credentials ကို update လုပ်ပါ သို့မဟုတ် ဖယ်ပါ။

Environment variables

Root `.env`

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/my_app?schema=public"
BETTER_AUTH_SECRET="replace-with-a-long-random-secret"
BETTER_AUTH_URL="http://localhost:4000"      # or :3000 for next backend
CORS_ORIGIN="http://localhost:3000"
NEXT_PUBLIC_API_URL="http://localhost:4000"  # empty for next backend
EXPO_PUBLIC_API_URL="http://127.0.0.1:4000"
EXPO_PUBLIC_API_PORT="4000"

Express backend ports

| Service | URL | | --- | --- | | Web | http://localhost:3000 | | API | http://localhost:4000 |

Next backend ports

| Service | URL | | --- | --- | | Web + API | http://localhost:3000 |

Physical device testing (Expo)

Root .env ထဲ EXPO_PUBLIC_API_URL ကို machine ရဲ့ LAN IP နဲ့ update လုပ်ပါ။

EXPO_PUBLIC_API_URL="http://192.168.1.10:4000"

Android emulator မှာ generated mobile code က 10.0.2.2 ကို auto-fallback လုပ်ပါတယ်။

Architecture conventions

Ranger က opinionated structure ထားပေးလို့ team (နဲ့ AI assistants) တူညီစွာ ဆက်လုပ်နိုင်ပါတယ်။

Web (`apps/web`)

src/
├── app/ or router.tsx # thin Next.js or TanStack route definitions
├── modules/
│   ├── posts/        # public feature
│   ├── auth/         # login/signup
│   └── admin/        # admin-only features
├── components/ui/    # shared primitives
└── trpc/             # client setup

Mobile (`apps/mobile`)

app/                  # Expo Router screens (thin)
src/features/         # MVVM-style feature modules
  └── posts/
      ├── components/
      └── hooks/      # tRPC calls, navigation, uploads

Desktop (`apps/desktop`)

frontend/src/         # Vite shell, auth storage, routing adapter
apps/web/src/         # framework-neutral UI modules ကို Vite aliases နဲ့ reuse

Wails v2 + Vite + React Router frontend
apps/web/src modules (posts, auth, admin) ကို ပြန်သုံး
Better Auth session ကို Go bindings နဲ့ local storage ထဲ သိမ်း
Express API ကို VITE_API_URL (default http://localhost:4000) နဲ့ ခေါ်

pnpm desktop:setup က Go/Wails ကို စစ်ပြီး install လုပ်ပေးပါတယ် (desktop enable နဲ့ generate လုပ်တဲ့အခါ auto run လုပ်ပါတယ်)။

Local desktop dev:

pnpm dev:desktop:all
# or separately:
pnpm dev:server
pnpm dev:desktop

Build:

pnpm --filter @repo/desktop build

API (`packages/api`)

publicProcedure — auth မလို
protectedProcedure — login လုပ်ထားရမည်
adminProcedure — staff/admin role လို

Routers: post, user, admin

Database (`packages/db`)

Prisma models:

User, Session, Account, Verification — Better Auth
Post — title, content, image, published flag, author relation

Cursor rules

Project တိုင်းမှာ .cursor/rules/ ပါဝင်ပါတယ်။

| Rule file | အကြောင်းအရာ | | --- | --- | | api/api.mdc | tRPC procedure auth levels, Zod validation, error handling | | database/database-rule.mdc | Prisma schema conventions | | web-arch/nextjs.mdc | Next.js module နဲ့ desktop compatibility rules | | web-arch/react-vite.mdc | React/Vite, TanStack Router, Query နဲ့ MVVM rules | | mobile-arch/mobile-arch.mdc | Expo MVVM + StyleSheet-only UI | | server-arch/server-arch.mdc | Express transport နဲ့ production bundle boundaries | | desktop-arch/desktop-arch.mdc | Wails/web reuse နဲ့ authentication constraints |

Cursor မှာ အလိုအလျောက် load ဖြစ်ပြီး generated code က scaffold architecture နဲ့ ကိုက်ညီအောင် ထိန်းပေးပါတယ်။

Database scripts

| Command | ဖော်ပြချက် | | --- | --- | | pnpm db:reset | Project name အလိုက် local Postgres DB drop & recreate | | pnpm db:push | Migration မသုံး schema push | | pnpm db:migrate | Prisma migrations ဖန်တီး & apply | | pnpm db:seed | Admin user + welcome post seed | | pnpm db:studio | Prisma Studio ဖွင့် | | pnpm db:generate | Prisma Client regenerate |

ပြဿနာဖြေရှင်းခြင်း

`Environment variable not found: DATABASE_URL`

Prisma က packages/db/ ကနေ run လုပ်ပါတယ်။ packages/db/.env ရှိမရှိ စစ်ပါ။

ဖြေရှင်းနည်း:

pnpm db:reset   # DB ပြန်ဖန်တီး + env link
# or manually:
ln -sf ../../.env packages/db/.env

Web မှာ `post.getAll` / `user.me` errors (Express backend)

Web app က Express API origin မှားခေါ်နေတာ ဖြစ်နိုင်ပါတယ်။ Root .env ကိုစစ်ပါ။

NEXT_PUBLIC_API_URL="http://localhost:4000"
VITE_API_URL="http://localhost:4000"

ပြီးရင် restart:

pnpm dev

Express server run နေရဲ့လား စစ်ပါ — ဒီစာသား ပေါ်ရမည်:

API server running on http://localhost:4000

`Target directory is not empty`

Folder ထဲမှာ ဖိုင်ရှိနေရင် --force မပါဘဲ Ranger က မရေးပါ။

npx create-ranger my-app --yes --web --mobile --backend express --force

`psql: command not found`

PostgreSQL client tools install လုပ်ပါ။ macOS + Homebrew:

brew install postgresql@17

Mobile က API ဆီ မရောက်

iOS Simulator: http://127.0.0.1:4000 or http://localhost:4000
Android Emulator: code က 10.0.2.2 auto သုံး
Physical device: root .env ထဲ EXPO_PUBLIC_API_URL ကို Mac ရဲ့ LAN IP နဲ့သတ်မှတ်

Mobile မှာ auth အောင်ပေမယ့် post မတင်ရ

Expo + Better Auth မှာ session cookie ကို manual ပို့တဲ့အခါ React Native fetch က native cookie handling နဲ့ ရောနိုင်ပါတယ်။ Generated project မှာ credentials: "omit" ပါပြီးသား ဖြစ်သင့်ပါတယ်။ Mobile app reload လုပ်ပြီး server restart လုပ်ကြည့်ပါ။

Ranger အတွင်းပိုင်း လုပ်ဆောင်ပုံ

Ranger သည် file တစ်ခုတည်း: bin/ranger.js။

CLI args parse — project name, flags, backend choice
Prompt (--yes မပါရင်) — interactive configuration
Normalize — packageName, dbName, ports, enabled apps derive
Generate — web, mobile, desktop, packages, server အတွက် inline template strings နဲ့ files map တည်ဆောက်
Write — directory tree ရေးသား (Wails icons/fonts အတွက် embedded binary assets ပါ)
Print next steps — install, db setup, dev commands

Runtime dependencies မရှိပါ။ Generated app dependencies ကို project အသစ်ထဲ pnpm install နဲ့ သီးသန့် install လုပ်ရပါမယ်။

Wails desktop app က addDesktopApp() ထဲမှာ addWebApp() / addMobileApp() နဲ့ တူညီတဲ့ pattern သုံးပါတယ်။ ရွေးထားတဲ့ source directory ကနေ embedded template ကို refresh လုပ်လိုရင်:

pnpm run generate:desktop-app -- /absolute/path/to/apps/desktop

Smoke test (maintainers)

pnpm run smoke             # fast static generation matrix
pnpm run verify:generated  # variants အားလုံး install, typecheck, build

Matrix မှာ Next.js + Next server၊ Next.js + Express/tRPC server၊ React/Vite + automatic Express/tRPC server၊ React/Vite + Wails နဲ့ Next.js + Wails projects ပါဝင်ပါတယ်။

npm ပေါ် publish လုပ်နည်း (maintainers)

create-ranger က unscoped public package ဖြစ်ပါတယ်။ Release အသစ်တိုင်းမှာ npm ပေါ် မတင်ရသေးတဲ့ version အသစ်တစ်ခု မဖြစ်မနေသုံးရပါတယ်။

cd /path/to/ranger

# npm account ဝင်ပြီး မှန်ကန်တဲ့ account ဟုတ်မဟုတ်စစ်ပါ
npm login
npm whoami

# Registry version နဲ့ package.json version နှိုင်းယှဉ်ပါ
npm view create-ranger version
npm pkg get version

package.json ထဲမှာ publish မယ့် version အသစ်ရှိပြီးသားဆိုရင် version bump ကို ကျော်ပါ။ မရှိသေးရင် သင့်တော်တဲ့ SemVer အမျိုးအစားတစ်ခုကိုသာ ရွေးပါ။

npm version patch --no-git-tag-version  # bug fix
npm version minor --no-git-tag-version  # backward-compatible feature အသစ်
npm version major --no-git-tag-version  # breaking change

Release checks အားလုံး run ပြီး npm ထဲပါသွားမယ့် files ကို စစ်ပါ:

pnpm test
pnpm verify:generated
npm pack --dry-run
npm publish --dry-run

Checks အားလုံးအောင်မြင်ပြီး package contents မှန်မှ publish လုပ်ပါ:

npm publish
npm view create-ranger version

Publish လုပ်ရန် npm account မှာ 2FA သို့မဟုတ် သင့်တော်တဲ့ granular access token လိုအပ်ပါတယ်။ Interactive 2FA သုံးထားရင် npm publish က one-time password တောင်းပါလိမ့်မယ်။ Upload မလုပ်ခင် prepublishOnly က pnpm test ကို အလိုအလျောက် ထပ် run ပါတယ်။

Default npm cache ထဲမှာ root-owned files ရှိလို့ EPERM ပြရင် cache ownership ကိုပြင်ပါ သို့မဟုတ် ရေးလို့ရတဲ့ temporary cache ကို သုံးပါ:

npm --cache /tmp/create-ranger-npm-cache login
npm --cache /tmp/create-ranger-npm-cache publish --dry-run
npm --cache /tmp/create-ranger-npm-cache publish

Ranger မဟုတ်တဲ့ အရာများ

Framework မဟုတ် — သင်ပိုင်ဆိုင်ပြီး ပြင်ဆင်နိုင်တဲ့ starting repo generate လုပ်ပေးတာ
Deployment tool မဟုတ် — Vercel/Fly/Railway config မထွက်
Design system package မဟုတ် — web UI က lightweight shadcn-style primitives သာ
Migration-aware default မဟုတ် — default က db:push； versioned migrations လိုရင် db:migrate သုံး

Roadmap ideas

Backend targets ထပ်ထည့် (Hono, Fastify)
Auth scaffold မှာ OAuth providers optional
Local Postgres အတွက် Docker Compose
Template variants (e-commerce, SaaS dashboard, etc.)

Contributions နဲ့ feature requests ကြိုဆိုပါတယ်။

License

MIT — repository ထဲ LICENSE ကို ကြည့်ပါ။

Documentation website

React documentation website ကို docs/ ထဲမှာ ထည့်ထားပါတယ်။ Ranger logo၊ English/မြန်မာ docs၊ search နဲ့ light/dark theme ပါဝင်ပါတယ်။

pnpm --dir docs install
pnpm docs:dev
# Production output: docs/dist
pnpm docs:build

Server management

1.4.0 မှာ server add/join ပါဝင်ပါတယ်။ ရှိပြီးသား Ranger workspace ထဲမှာ run ပါ။

ranger add              # mobile / web / desktop / server ရွေးမယ်
ranger add -s           # next / express၊ new / existing ရွေးမယ်
ranger add server       # server interactive flow အတူတူပါပဲ

# Server အသစ်
ranger add -s api-server --backend express
ranger add -s next-api --backend next
ranger add -s reports-server --backend express --new --port 4100

# ရှိပြီးသား app ချိတ်ရန်
ranger add -s --backend next --existing web
ranger add -s --backend express --existing server

pnpm install
pnpm dev:api-server

ရှိပြီးသား app ချိတ်ခြင်း

Interactive mode မှာ compatible ဖြစ်တဲ့ app နာမည်တွေ ပြပေးပါတယ်။ Next new ရွေးရင် blog UI၊ auth၊ uploads နဲ့ tRPC routes ပါတဲ့ Next.js project အသစ်ဖန်တီးပေးပါတယ်။ existing ရွေးရင် Ranger src/app ပုံစံရှိပြီးသား Next app မှာ UI ကိုထိန်းထားပြီး backend routes ထည့်ပေးပါတယ်။ Frontend က ကိုယ်ပိုင် API host ဖြစ်လာတဲ့အခါ Ranger ထည့်ထားတဲ့ API/upload proxy rewrites ကိုဖြုတ်ပေးပါတယ်။ Custom code/config နဲ့ တိုက်နေရင် ဖိုင်မပြင်ခင် error ပြပေးပါတယ်။

Express new က standalone server အသစ်ဖန်တီးပါတယ်။ existing က src/index.ts ထဲ tRPC ပါပြီးသား Ranger Express server ကိုပြန်သုံးပါတယ်။ မည်သည့် custom Express project မှာမဆို entry point ကို အလိုအလျောက် overwrite/mount မလုပ်ပါဘူး။ Existing package နာမည်ကို ထိန်းထားပြီး join ပြီးသား server ကို ထပ် join လုပ်ရင် ထပ်မရေးပါဘူး။

Runtime နှင့် workspace integration

Backend နှစ်မျိုးလုံးက packages/api, packages/auth, packages/db ကိုသုံးပါတယ်။ Port သီးသန့်၊ root dev:<name> / start:<name> scripts နဲ့ Turbo ချိတ်ဆက်မှု ပါပါတယ်။ မူလ commands တွေကို ranger:base:dev, ranger:base:build, ranger:base:start မှာ ထိန်းထားပြီး ranger-run.mjs က server အတွက် port/auth origin ကို သတ်မှတ်ပေးပါတယ်။ Root secrets နဲ့ အခြား apps ကိုမပြောင်းပါဘူး။ @repo/api ရှိပြီးသားမို့ နာမည်ကို api အစား api-server လိုပေးပါ။

Runtime override အတွက် RANGER_SERVER_PORT နဲ့ RANGER_SERVER_URL ကို service တစ်ခုချင်းစီရဲ့ environment မှာ သတ်မှတ်ပါ။ Server အများကြီးကို root dev နဲ့ run နေချိန် global override မပေးပါနဲ့။ .env.server.example က ရှင်းလင်းချက်အတွက်သာဖြစ်ပြီး auto-load မလုပ်ပါဘူး။

RANGER_SERVER_PORT=4100 RANGER_SERVER_URL=https://api.example.com pnpm start:api-server

Client ချိတ်ခြင်းနှင့် server ဖြုတ်ခြင်း

Managed server ဆီချိတ်တဲ့ Expo/Wails client အသစ်မှာ root API URL နဲ့မရောဖို့ app-local .env.ranger-client ကို သုံးပါတယ်။ API target ပြောင်းရင် အဲဒီဖိုင်ကိုပါ update လုပ်ပါ။

ရှိပြီးသား clients တွေက မူလ API ကိုပဲ ဆက်သုံးပါတယ်။ Server အသစ်ဆီချိတ်ဖို့ client public API URL/proxy target ကိုပြောင်းပြီး package.json ရဲ့ ranger.backendApp ရှိရင် reference ကိုပါပြောင်းပါ။ Expo အတွက် EXPO_PUBLIC_API_URL / EXPO_PUBLIC_API_PORT၊ desktop အတွက် VITE_API_URL သုံးပါ။ Added web app မှာ .env.local နဲ့ proxy configuration ကို စစ်ပြင်ပါ။ Interactive terminal မှာ backend အများကြီးရှိရင် client အသစ်ထည့်ချိန် backend နာမည်ကိုမေးပါတယ်။

မသုံးတော့တဲ့ added server ကို ranger remove -api-server နဲ့ သီးသန့်ဖြုတ်နိုင်ပါတယ်။ မှီခိုနေတဲ့ client reference နဲ့ မူလ API host တွေအတွက် removal protection ကို ထိန်းထားပါတယ်။

VPS deployment နှင့် service boundaries

ရပါတယ်—Next.js နဲ့ Express API host တွေကို VPS ပေါ်မှာ process/container သီးသန့်တင်နိုင်ပါတယ်။ Next server က Next project တစ်ခုအနေနဲ့ next build / next start run ရမှာပါ။ API routes ပါရင် static export အနေနဲ့ မရပါဘူး။ Express က bundled Node entry point နဲ့ သီးသန့် run ပါတယ်။

Browser / Expo / Wails
         |
   HTTPS reverse proxy
         |
   +-----+---------------------+
   |                           |
Web frontend              API service
Next.js or Vite           Next.js or Express
                               |
                          PostgreSQL

Next app တစ်ခုထဲက routes တွေက process/deployment တစ်ခုကို မျှသုံးပါတယ်။ tRPC ကို packages/api ထဲခွဲထားတာက source-code separation ဖြစ်ပြီး runtime microservices မဖြစ်သေးပါဘူး။ Router အတူတူနဲ့ database အတူတူသုံးတဲ့ API hosts အများကြီးက modular backend ရဲ့ deployments အများကြီးသာ ဖြစ်ပါတယ်။ Independent microservices အတွက် business boundaries၊ သီးခြား deploy လုပ်နိုင်တဲ့ entry points၊ data ownership နဲ့ service communication contracts တွေ ခွဲသတ်မှတ်ရပါမယ်။

Build နှင့် run

Workspace dependencies ရရှိဖို့ monorepo root ကနေ build ပါ။

pnpm install --frozen-lockfile
pnpm db:generate
pnpm exec dotenv -e .env -- pnpm --filter @repo/api-server build
pnpm exec dotenv -e .env -- pnpm --filter @repo/next-api build

# Deploy လုပ်မယ့် service ကို process manager/container နဲ့ run ပါ
NODE_ENV=production RANGER_SERVER_URL=https://api.example.com pnpm start:api-server
# Next API project ဖြစ်ရင်
NODE_ENV=production RANGER_SERVER_URL=https://api.example.com pnpm start:next-api

Deployment environment မှာ DATABASE_URL၊ ခိုင်မာတဲ့ BETTER_AUTH_SECRET နဲ့ client CORS_ORIGIN ကို သတ်မှတ်ပါ။ Sample domain ကို ကိုယ့် domain နဲ့အစားထိုးပါ။ Start alias က root .env ကို load လုပ်ပြီး သတ်မှတ်ပြီးသား environment values ကို ဦးစားပေးပါတယ်။ Runner က service ရဲ့ port/auth base URL ကို ထပ်သတ်မှတ်ပါတယ်။ Frontend public API URLs ကိုလည်း deployed API ဆီပြောင်းပြီး build လုပ်ပါ။

Runtime dependencies နှင့် storage

Release မှာ runtime/workspace dependencies နဲ့ generated Prisma client ပါရပါမယ်။ Express dist/index.js တစ်ဖိုင်တည်း copy လုပ်တာနဲ့ မလုံလောက်ပါဘူး။ Prisma runtime ကို bundle ထဲမထည့်ဘဲ external dependency အဖြစ်သုံးပါတယ်။ Next deployment မှာ production build နဲ့ dependencies လိုပါတယ်။ public/uploads ကို persist လုပ်ပါ။ Replica အများကြီးရှိရင် shared volume/object storage သုံးပါ။ Database migration ကို release step တစ်ကြိမ်အဖြစ်သာ run ပါ။ Production data ပေါ်မှာ db:reset မသုံးပါနဲ့။

Reverse proxy နှင့် CORS

HTTPS အတွက် Nginx/Caddy ကိုရှေ့ကထားပြီး /api, /uploads ကို API service ဆီ route ပေးပါ။ Same-origin proxy သုံးရင် browser cross-origin ပြဿနာတွေ လျော့နည်းပါတယ်။ Generated Next API မှာ general CORS middleware မပါလို့ browser origin သီးခြားဖြစ်ရင် CORS/OPTIONS ကို ထပ်ထည့်ရပါမယ်။ Express က CORS_ORIGIN နဲ့ origin policy ပါပြီးသားပါ။ Wails က Express backend template ကိုပဲ ဆက်သုံးပါတယ်။

References: Next.js self-hosting, tRPC Express adapter။