Installation

deno install -A -f -g -r -n huuma jsr:@huuma/cli

This command installs the Huuma CLI globally, making it available as the huuma command in your terminal.

Creating a New Project

To create a new Huuma project, run:

huuma project

You'll be prompted to provide a project name and select a project type:

Project name: my-huuma-app

Select the type of application to initialize:
---------------
0 - website
---------------

Type 0 and press Enter to select the website template.

The CLI will create a new directory with your project name and set up a basic Huuma application structure:

my-huuma-app/
├── assets/
├── pages/
│   ├── page.tsx
│   ├── root.tsx
│   └── layout.tsx
├── src/
├── app.ts
├── dev.ts
└── deno.json

Project Structure

• assets/: Static files like images, CSS, and other assets
• pages/: Page components for your application
  • page.tsx: The main page component
  • root.tsx: The root layout component
  • layout.tsx: Shared layout component
• src/: Application source code and utilities
• app.ts: Main application entry point
• dev.ts: Development server entry point
• deno.json: Deno configuration file with tasks and dependencies

Running Your Project

Navigate to your project directory and start the development server:

cd my-huuma-app
deno task dev

Your application will be available at http://localhost:8000.

The development server includes:

• Hot reloading: Changes are reflected immediately
• TypeScript compilation: Automatic type checking
• Error reporting: Clear error messages in the browser

Making Your First Changes

Edit the files in the pages/ directory to modify your application. For example, to modify the main page, edit pages/page.tsx:

import { JSX } from "@huuma/ui/jsx-runtime";

export default () => {
  return (
    <>
      <main class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold text-blue-600 mb-4">
          Welcome to My Huuma App
        </h1>
        <p class="text-lg text-gray-600">
          This is my first Huuma application! 🚀
        </p>
        <div class="mt-8">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Get Started
          </button>
        </div>
      </main>
    </>
  );
};

Building for Production

To build your application for production, run:

deno task bundle

This will generate optimized files for deployment with:

• Minified JavaScript and CSS
• Tree-shaken code
• Optimized assets

To start the production server:

deno task start

Alternative Installation Methods

Using Existing Project

You can also add Huuma to an existing Deno project:

deno add @huuma/ui

Then configure your deno.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@huuma/ui"
  },
  "imports": {
    "@huuma/ui": "jsr:@huuma/ui@^0.1.0"
  }
}

Manual Setup

For more control, you can set up Huuma manually:

1. Create project structure:

   mkdir my-huuma-app
   cd my-huuma-app

2. Initialize deno.json:

   {
     "name": "my-huuma-app",
     "version": "1.0.0",
     "exports": "./app.ts",
     "tasks": {
       "dev": "deno run --allow-read --allow-net --allow-env --watch dev.ts",
       "start": "deno run --allow-read --allow-net --allow-env app.ts"
     },
     "imports": {
       "@huuma/ui": "jsr:@huuma/ui@^0.1.0"
     },
     "compilerOptions": {
       "jsx": "react-jsx",
       "jsxImportSource": "@huuma/ui"
     }
   }

3. Create your entry files and start building!

Troubleshooting

Common Issues

Permission errors: Make sure you have the necessary permissions when running Deno commands:

deno run --allow-read --allow-net --allow-env your-file.ts

Module not found: Ensure your import map is correctly configured in deno.json

TypeScript errors: Check that your jsxImportSource is set to @huuma/ui in the compiler options

Getting Help

• 📖 Check the Quick Start guide for step-by-step tutorials
• 🔧 Review Configuration for advanced setup options
• 💡 Browse Examples for practical usage patterns
• 🐛 Report issues on GitHub

Next Steps

Now that you have Huuma installed and running, explore these resources:

• Quick Start Guide - Build your first interactive component
• Configuration - Customize your development environment
• Examples - Learn from real-world usage patterns
• Component Library - Discover available UI components
• API Documentation - Deep dive into Huuma's APIs

Welcome to the Huuma ecosystem! 🎉