@teamvelix/velix

v5.1.7

Published

a month ago

Velix v5 — A modern full-stack React framework

Downloads

961

0High
0Medium
0Low

asuno

velix react framework ssr ssg islands seo fullstack

Velix v5

A modern full-stack React framework optimized for performance, SEO, simplicity, and developer experience.

Velix is a lightweight but powerful React 19 framework featuring file-based routing, SSR, SSG, Islands architecture, built-in SEO optimization, and an intuitive CLI.

✨ Features

⚡ React 19 — Latest React with Server Components & Actions
📁 File-based Routing — Intuitive app/ directory convention
🏝️ Islands Architecture — Partial hydration for minimal JavaScript
🔍 SEO First — Automatic meta tags, Open Graph, sitemaps, robots.txt
🖥️ SSR + SSG + ISR — Choose the right rendering for each page
🧩 Plugin System — Extend with auth, database, analytics, and more
🛠️ Powerful CLI — Scaffold pages, components, APIs, and more
🔧 DevTools — Route explorer, hydration inspector, performance metrics
📦 Edge Ready — Deploy to any edge platform
🤖 AI Assistant — Built-in CLI AI for code generation

📦 Installation

Option 1: Create New App (Recommended)

The fastest way to get started:

npx create-velix-app@latest my-app
cd my-app
npm install
npm run dev

This will:

✅ Create a new Velix project with your chosen template
✅ Install all dependencies automatically
✅ Set up Tailwind CSS (optional)
✅ Configure TypeScript

Option 2: Install CLI Globally

For multiple projects or advanced usage:

# Install Velix CLI globally
npm install -g @teamvelix/cli

# Create a new project
velix create my-app
cd my-app
npm install

# Start development
velix dev

Option 3: Manual Installation

Add Velix to an existing project:

# Install core framework
npm install @teamvelix/velix react react-dom

# Install dev dependencies
npm install -D @teamvelix/cli typescript @types/react @types/react-dom

# Optional: Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

Then create a velix.config.ts file:

import { defineConfig } from "@teamvelix/velix";

export default defineConfig({
  app: { name: "My App" },
  server: { port: 3000 },
});

📁 Project Structure

my-velix-app/
├── app/
│   ├── layout.tsx          → Root layout
│   ├── page.tsx            → Home page (/)
│   ├── dashboard/
│   │   ├── layout.tsx      → Dashboard layout
│   │   ├── page.tsx        → /dashboard
│   │   └── [id].tsx        → /dashboard/:id
│   └── blog/
│       ├── page.tsx        → /blog
│       └── [slug].tsx      → /blog/:slug
├── components/
├── server/
│   ├── loaders/
│   └── actions/
├── styles/
├── velix.config.ts
└── package.json

⚙️ Configuration

// velix.config.ts
import { defineConfig } from "@teamvelix/velix";

export default defineConfig({
  app: {
    name: "My App",
    url: "https://example.com"
  },
  server: { port: 3000 },
  seo: {
    sitemap: true,
    robots: true,
    openGraph: true
  },
  plugins: []
});

🛠️ CLI Commands

Development

velix dev          # Start development server with hot reload
velix build        # Build for production
velix start        # Start production server
velix doctor       # Health check & diagnostics
velix info         # Framework & environment info

Generators

velix g page <name>        # Generate a new page
velix g component <name>   # Generate a component
velix g api <name>         # Generate an API route
velix g layout <name>      # Generate a layout
velix g action <name>      # Generate a server action
velix g proxy <name>       # Generate a proxy interceptor
velix g hook <name>        # Generate a custom hook
velix g context <name>     # Generate a React context

Project Creation

velix create <name>                    # Create new project (interactive)
velix create <name> --template=minimal # Use minimal template
velix create <name> --no-tailwind      # Skip Tailwind CSS

UI Components (Shadcn-style)

velix ui add button        # Add button component
# More components coming soon

Other

velix analyze      # Bundle analysis (coming soon)

📚 Documentation

Comprehensive guides and API references:

Getting Started - Quick start guide and overview
Server Actions - Execute server code from components
API Routes - Create custom HTTP endpoints
Best Practices - Development guidelines
Roadmap - Upcoming features and plugins

🔧 Troubleshooting

Common Issues

Module not found errors:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Tailwind CSS not working:

# Ensure Tailwind is installed
npm install -D tailwindcss postcss autoprefixer

# Check that velix.config.ts includes tailwindPlugin
import { defineConfig, tailwindPlugin } from "@teamvelix/velix";

export default defineConfig({
  plugins: [tailwindPlugin()]
});

Port already in use:

# Change port in velix.config.ts
export default defineConfig({
  server: { port: 3001 }
});

Getting Help

📖 Check the documentation
💬 Join our Discord community
🐛 Report bugs on GitHub Issues

📦 NPM Packages

| Package | Version | Description | |---------|---------|-------------| | @teamvelix/velix | npm | Core framework | | create-velix-app | npm | Project scaffolding | | @teamvelix/cli | npm | Command-line interface |