create-liteflow-app v0.1.2

Create LiteFlow App

A CLI tool for creating modern web applications with LiteFlow framework.

Quick Start

npx create-liteflow-app my-app
cd my-app
npm install
npm run dev

Features

• 🚀 Quick project setup
• ⚡️ Built with Vite for fast development
• 🎯 TypeScript by default
• 🛣️ Type-safe routing
• 🎨 Tailwind CSS for styling
• 📦 Zero configuration
• 🧪 Testing setup with Vitest
• 📱 Mobile-first responsive design

Usage

Creating a New Project

npx create-liteflow-app my-app

Options:

• --template - Template to use (default: "default")
• --typescript - Use TypeScript (default: true)
• --package-manager - Package manager to use (npm, yarn, pnpm)

Project Structure

my-app/
├── src/
│   ├── pages/          # Route components
│   ├── components/     # Reusable components
│   ├── hooks/          # Custom hooks
│   ├── utils/          # Utility functions
│   ├── App.tsx         # Root component
│   └── main.tsx        # Entry point
├── public/             # Static assets
└── package.json        # Dependencies and scripts

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm test - Run tests
• npm run lint - Run linter

Templates

Default Template

The default template includes:

• React with TypeScript
• Vite for development and building
• React Router for routing
• Tailwind CSS for styling
• Vitest for testing
• ESLint and Prettier for code quality

Custom Templates

You can create custom templates by following this structure:

template/
├── src/
│   └── ...
├── package.json
├── tsconfig.json
└── vite.config.ts

CLI Commands

Generate Components

npx create-liteflow-app generate component MyComponent

This will create:

• src/components/MyComponent.tsx
• src/components/MyComponent.test.tsx (optional)

Generate Pages

npx create-liteflow-app generate page About

This will create:

• src/pages/About.tsx
• src/pages/About.test.tsx (optional)

Configuration

TypeScript

The template includes a pre-configured tsconfig.json. You can extend it:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    // Your custom options
  }
}

Vite

Customize your Vite configuration in vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  // Your custom config
});

Tailwind CSS

Customize your Tailwind configuration in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      // Your custom theme
    },
  },
  // Your custom config
};

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Publishing

To publish a new version:

1. Update version in package.json
2. Create and push a new tag:

git tag v0.1.1
git push origin v0.1.1

The GitHub Action will automatically publish the package to npm.

License

MIT © Rahees Ahmed