create-phx-frontend-plugin

Scaffold a new PHX ERP frontend plugin — an Angular web component project based on the official PHX plugin template.

Prerequisites

• Node.js 18+
• Yarn Berry (recommended) or npm

Quick start

# Yarn Berry — one-shot, no global install
yarn dlx @phx-erp/create-phx-frontend-plugin

# Same create-* convention as npm
yarn create @phx-erp/phx-frontend-plugin

# npm
npm create @phx-erp/phx-frontend-plugin@latest
npx @phx-erp/create-phx-frontend-plugin@latest

This creates a new directory (by default named after your project) with a ready-to-customize plugin project.

Project name

Use a simple kebab-case name for local development (e.g. my-orders-plugin), or an npm scoped name if you plan to publish (e.g. @your-user/my-orders-plugin).

The CLI uses the kebab-case part for the Angular project, build output paths, and folder name. The full npm package name (including scope) is only applied to package.json and manifest.json.

npm login is not required. If you are logged in and the name does not include your npm username, the CLI prints an optional hint — scaffolding continues either way.

Non-interactive

yarn dlx @phx-erp/create-phx-frontend-plugin my-orders-plugin --yes --install

yarn dlx @phx-erp/create-phx-frontend-plugin \
  -p acme-orders-plugin -t acme-orders \
  --api-url http://localhost:3000/admin-api \
  --ui-url https://localhost:4200 \
  --api-key your-api-key

# npm equivalent
npx @phx-erp/create-phx-frontend-plugin@latest my-orders-plugin --yes --install

Options

| Flag | Description | |------|-------------| | -p, --project | Project name (kebab-case or npm scoped name) | | -t, --tag | Custom element tag (must contain a hyphen) | | --api-url | PHX API base URL (default: http://localhost:3000/admin-api) | | --ui-url | PHX UI URL for deep links (default: https://localhost:4200) | | --api-key | Optional PHX user API key for environment.development.ts (otherwise use login redirect) | | --install | Run yarn install after scaffolding | | -y, --yes | Skip prompts, use defaults | | -h, --help | Show help |

Positional arguments: [project-name] [target-dir]

What it does

1. Copies the official plugin template into the target directory
2. Replaces placeholders (__PROJECT_NAME__, __NPM_PACKAGE_NAME__, __TAG_NAME__, __PHX_UI_URL__, etc.)
3. Creates src/environments/environment.development.ts from the example
4. Optionally runs yarn install

After scaffolding, open the new project and follow its README to start development.