hamroun-framework-create

A modern full-stack JavaScript framework with built-in file-based routing and automatic API generation.

Features

• 🚀 Modern full-stack JavaScript framework
• ⚡ Built with Solid.js and TailwindCSS
• 📁 File-based routing
• 🔄 Hot Module Replacement
• 🛠️ Built-in CLI tools for project generation
• 🎨 Automatic Tailwind configuration
• 📱 Responsive by default

Quick Start

# Create a new project
npx hamroun-framework-create create my-app

# Navigate to the project
cd my-app

# Start the development server
npm start

CLI Commands

Create a New Project

npx hamroun-framework-create create <project-name>

Generate Components/Pages/Layouts

# Using full command
npm run generate <type> <name>

# Using shorthand
npm run g <type> <name>

# Examples
npm run g component Button
npm run g page About
npm run g layout Admin

Available generators:

• component - Generate a new component
• page - Generate a new page with routing
• layout - Generate a new layout

Project Structure

my-app/
├── .dist/              # Build output
├── src/
│   ├── app/           # Frontend application
│   │   ├── components/# Shared components
│   │   ├── layout.jsx # Root layout
│   │   └── home/      # Home page
│   └── api/           # API routes
└── dep/
    └── front/         # Frontend dependencies

Features

File-based Routing

• Create pages by adding page.jsx files in src/app/
• Automatic route generation based on file structure
• Nested routing support

Layouts

• Default layout provided
• Create custom layouts per route
• Nested layouts support

Components

• Built-in component generation
• TailwindCSS integration
• Automatic style loading

API Routes

• Automatic API route generation
• Simple route definition
• HTTP method handling

Development Workflow

1. Create a new page:

npm run g page About

2. Add a custom layout:

npm run g layout About

3. Create reusable components:

npm run g component Button

Configuration

The framework comes with sensible defaults but can be customized:

• Vite configuration in dep/front/vite.config.js
• TailwindCSS configuration in dep/front/tailwind.config.js
• Server configuration in .dist/index.js

License

MIT