create-larc-app
Official CLI tool for creating and managing LARC applications.
Quick Start
# Create a new LARC app
npx create-larc-app my-app
# Or with options
npx create-larc-app my-app --template=dashboard --yes
Features
- ๐ Zero Config - No build step required
- ๐ฆ Template System - Start with pre-built templates
- ๐ฅ Hot Reload - Development server with live updates
- ๐จ Component Generator - Scaffold new components quickly
- ๐ Registry Integration - Add components from the LARC registry
Commands
create-larc-app
Create a new LARC application:
npx create-larc-app <project-directory> [options]
Options:
-t, --template- Template to use (minimal, dashboard, blog)-y, --yes- Skip prompts and use defaults--no-install- Skip npm install--no-git- Skip git initialization
# Interactive mode
npx create-larc-app my-app
# With template
npx create-larc-app my-dashboard --template=dashboard
# Skip prompts
npx create-larc-app my-app --yes
larc dev
Start development server:
larc dev [options]
Options:
-p, --port- Port number (default: 3000)--no-open- Don't open browser--no-hot- Disable hot module reload
larc dev --port=8080
larc add
Add a component from the registry:
larc add <component> [options]
Options:
-y, --yes- Skip confirmation
# Interactive
larc add pan-card
# Skip confirmation
larc add @larcjs/ui --yes
# By npm package
larc add @username/my-component
larc generate
Generate boilerplate code:
larc generate <type> <name> [options]
Alias: larc g
Options:
-d, --dir- Output directory (default: src/components)
# Generate a component
larc generate component my-widget
# Generate in custom directory
larc g component my-widget --dir=src/widgets
larc preview
Preview production build:
larc preview [options]
Options:
-p, --port- Port number (default: 4000)
Project Structure
my-app/
โโโ index.html # Entry point
โโโ src/
โ โโโ app.js # Main application
โ โโโ components/ # Custom components
โโโ public/
โ โโโ styles.css # Global styles
โ โโโ assets/ # Static assets
โโโ larc.config.json # LARC configuration
โโโ package.json
โโโ README.md
larc.config.json
Configuration file for LARC projects:
{
"version": "1.0.0",
"importmap": {
"imports": {
"@larcjs/core": "https://cdn.jsdelivr.net/npm/@larcjs/core@latest/dist/index.js",
"@larcjs/ui": "https://cdn.jsdelivr.net/npm/@larcjs/ui@latest/dist/index.js"
}
},
"devServer": {
"port": 3000,
"hot": true,
"open": true
}
}
Templates
minimal
Basic starter with essential structure:
- Clean HTML/CSS/JS setup
- Import map configuration
- Example component structure
dashboard
Admin dashboard starter:
- Pre-built layout with sidebar
- Navigation components
- Data table examples
- Chart integration
blog
Blog/content site starter:
- Article layout
- Markdown rendering
- Routing setup
- Content components
Development Workflow
npx create-larc-app my-app
cd my-app
npm run dev
larc add pan-card
larc generate component my-widget
# No build needed! Just deploy your files
Hot Module Reload
The dev server includes hot reload:
- Watches
src/,public/, and HTML files - Auto-refreshes on changes
- SSE-based communication
- Zero configuration
Import Maps
LARC uses native import maps for dependency management:
<script type="importmap">
{
"imports": {
"@larcjs/core": "https://cdn.jsdelivr.net/npm/@larcjs/core@latest/dist/index.js"
}
}
</script>
Managed automatically via larc.config.json.
No Build Step
LARC embraces the no-build philosophy:
- Native ES modules
- Import maps for dependencies
- Direct CDN usage
- Browser-native features
Requirements
- Node.js 18+
- Modern browser with:
Contributing
See CONTRIBUTING.md
License
MIT