Zecron CLI

Scaffold, configure, and maintain Vite + React projects from the terminal.

zecron
# or
react my-app

zecron (also accessible globally via react) is a high-performance CLI for creating, configuring, and maintaining Vite + React applications. It provides one-command component generators, real-time socket printer pages, backdrop blur loaders, automated font/image mapping, git remote workflow tools, and terminal response styling.

Contents

• Features
• Requirements
• Installation
• Create An App
• Flags
• Commands
• Component & Boilerplate Generators
• Performance & Engine Optimizations
• Git & Security Protection
• Package Installer
• Maintenance

Features

Zecron CLI (zecron)
├─ Zecron Interactive Agent Welcome Hub (zecron)
├─ Fast Vite + React project creation (<1s initialization)
├─ Native node:fs/promises engine (2x-3x faster file I/O)
├─ Fast package manager auto-detection (bun -> pnpm -> yarn -> npm)
├─ Centered ASCII Zecron banner with aligned column framing
├─ Electric Cyan & Emerald Green vibrant terminal color system
├─ Automatic .env Gitignore security protection
├─ Component & Page Boilerplate Generators:
│  ├─ react set loader   (pure Tailwind CSS backdrop-blur loader)
│  ├─ react set printer  (socket print-image queue + react-to-print)
│  ├─ react set form     (styled React form component with state)
│  ├─ react set --font   (scan public/fonts & auto-configure @font-face)
│  └─ react set --image  (scan public/images & generate src/utils/images.js)
├─ Integrated Git remote wrapper (react push --github / react push -m)
├─ Web Setup Wizard (--ui mode) with particle canvases & TextType intro
└─ Frontend API Watch logger (react watch)

Requirements

| Requirement | Version | | --- | --- | | Node.js | >=18 | | npm / pnpm / bun | Modern Node package manager | | Project type | Vite + React |

Installation & Quick Start

Option 1: Instant run with npx (No installation needed & avoids PATH issues):

npx zecron-cli

Option 2: Install globally on your system:

npm install -g zecron-cli

After global installation, these commands become available in your terminal:

| Command | Purpose | | --- | --- | | zecron | Main interactive CLI command & Agent Welcome Hub | | react | Scaffold Vite + React project | | get | Package alias installer inside existing React projects |

Create An App

Interactive terminal mode:

react my-app

Create inside the current directory:

react .

Non-interactive flags mode:

react my-app --tailwind --axios --router --env

Flags

| Flag | Description | | --- | --- | | --tailwind | Installs tailwindcss and @tailwindcss/vite, writes vite.config.js, creates src/index.css | | --axios | Installs axios | | --zod | Installs zod schema validation library | | --socket | Installs socket.io-client, scaffolds src/services/socket.js | | --toast | Installs react-hot-toast, configures <Toaster /> in src/App.jsx | | --router | Installs react-router-dom | | --qr | Installs react-qr-code | | --webcam | Installs react-webcam | | --printer | Installs react-to-print, socket.io-client, and scaffolds src/pages/Printer.jsx | | --icon | Installs react-icons | | --lucide | Installs lucide-react | | --env | Creates .env with VITE_SERVER_URL and ensures .env is listed in .gitignore | | --watch | Configures frontend API response logger | | --ui | Launches local browser setup wizard |

Commands

Quick command reference:

react list -c

| Command | Purpose | | --- | --- | | react <name> | Create a new Vite + React app | | react <name> --ui | Configure the app in a local browser setup wizard | | react . | Create the app in the current directory | | react run | Run npm run dev -- --host 0.0.0.0 | | react run --port 3000 | Run dev server on a specific port | | react run -f | Run dev server and open in Firefox Developer Edition | | react update | Check outdated dependencies using npm outdated | | react doctor | Audit project health, setup, dependencies, and environment keys | | react set loader | Generate a responsive backdrop-blur Loader.jsx component | | react set printer | Generate Printer.jsx page with socket queue & react-to-print | | react set form -name -email | Generate a styled React Form component with state & field icons | | react set --font | Scan public/fonts and register @font-face rules in src/index.css | | react set --image | Scan public/images and generate src/utils/images.js asset map | | react env list | List Vite environment variables from .env | | react env add VITE_SERVER_URL <url> | Add or update a VITE_ environment variable | | react env remove VITE_SERVER_URL | Remove a VITE_ environment variable | | react make f components/ui | Create a directory under src/ | | react make components Button | Create a file inside an existing src directory | | react asset | Create public/images and public/fonts folders | | react watch | Log frontend fetch() & browser Axios/XHR responses | | react push --github <url/msg> | Stage, commit, and push updates to Git remote repository |

Component & Boilerplate Generators

1. Backdrop Blur Loader (react set loader)

Generates src/components/Loader.jsx:

• Pure Tailwind CSS overlay (absolute inset-0 z-30 bg-[#060818]/80 backdrop-blur-sm).
• Built-in spinning indicator with custom text prop support (defaults to 'Please wait...').
• Pure CSS/HTML implementation (zero third-party React dispatcher dependencies).

react set loader

2. Print Queue Page (react set printer / react set print)

Generates src/pages/Printer.jsx:

• Listens to Socket.IO "print-image" events from VITE_SERVER_URL.
• Maintains an in-memory print image preview queue.
• Automatically triggers native browser print dialogs using react-to-print (useReactToPrint).
• Auto-scaffolds src/services/socket.js connection client if missing.

react set printer

3. Font Asset Configurator (react set --font)

Scans public/fonts/ for .ttf, .woff, .woff2, and .otf files:

• Generates @font-face declarations pointing to asset paths.
• Appends rules to src/index.css and configures Tailwind @theme font variables.

react set --font

4. Image Asset Map Generator (react set --image)

Scans public/images/ and outputs a camelCased asset map in src/utils/images.js:

import { images } from '../utils/images'

const Banner = () => <img src={images.heroBanner} alt="Hero" />

Performance & Engine Optimizations

Zecron CLI is optimized for instant execution and minimal I/O overhead:

1. Native node:fs/promises Engine: Replaced heavy file wrappers with native node:fs/promises (mkdir, access, readFile, writeFile, rm, cp) for 2x-3x faster file operations.
2. Fast Package Manager Auto-Detection (detectPackageManager): Automatically checks for bun, pnpm, or yarn on the developer's system to install dependencies in under 1 second (falling back to npm install --prefer-offline).
3. Parallelized File Creation (Promise.all): Scaffolds template files, Vite configs, CSS styles, and imports concurrently.

Git & Security Protection

• Automated .env Gitignore Protection: Whenever a project is created or .env is configured, Zecron CLI automatically generates or updates .gitignore to ensure .env, .env.local, and .env.*.local are never accidentally pushed to Git remotes.
• Formatted Git Stream: react push outputs colorized git status stream showing branch names ([main 8152f98]), insertions (+), deletions (-), and file modes in real time.

Package Installer

Use get inside an existing project:

get zod
get axios
get router toast
get qr webcam printer
get --dev @types/node

Short aliases: tailwind, axios, zod, socket, toast, icon, lucide, router, qr, webcam, printer.

Maintenance

Build and check unit test suite after making changes to the CLI:

npm run build
npm test

License

MIT License. Designed and implemented by Anshh.