Snapp Kit

A simple build tool for Snapp Framework

Live server powered by @compodoc/live-server

---

Table of Contents

• What is Snapp Kit?
• Quick Start
• Commands
• Troubleshooting

---

What is Snapp Kit?

Snapp Kit compiles your JSX/TSX files to vanilla JavaScript. Simple as that.

What it does:

• Compiles JSX/TSX to JavaScript (powered by esbuild)
• Live server with auto-refresh during development
• Creates page templates instantly

What is Snapp? - A lightweight JavaScript framework. Learn more →

---

Quick Start

Recommended: Create New Project

npm create snapp-app my-app

cd my-app
npm run snapp

Open http://localhost:9000 - Done!

Why use this?

• No global installation needed
• Everything set up automatically
• Works on any machine
• Perfect for team projects

---

Alternative: Global Installation

For personal projects or if you want the CLI everywhere:

npm install -g snapp-kit

# For macOS/Linux
sudo npm install -g snapp-kit

Then use:

snapp create my-app

cd my-app
snapp build -W

---

Commands

Note: If you used npm create snapp-app, add prefix commands with npx (e.g., npx snapp build -W)

---

npm create snapp-app <name>

Creates a new project with everything configured.

npm create snapp-app my-project

cd my-project
npm run snapp

Creates:

my-project/
├── views/
│   └── index.jsx      # Your JSX files
├── src/
│   ├── index.js       
│   └── snapp.js       # Snapp runtime
└── index.html         # HTML

---

snapp create <name>

Creates a new project

snapp create my-project

cd my-project
snapp build -W

---

snapp page <name>

Generates a new page (HTML + JSX). Must be run inside project directory.

With npm create snapp-app:

cd my-project
npx snapp page contact

With global installation:

cd my-project
snapp page contact

Creates:

• contact.html - HTML template
• views/contact.jsx - JSX component

---

snapp build [options]

Compiles JSX/TSX files from views/ to src/.

snapp build          # Build once
snapp build -W       # Build + watch + live server
snapp build -M       # Build minified
snapp build -W -M    # Watch + live server + minify

Options:

Flag	Long	Description
-E	--entry	Project folder (e.g., -E MyApp)
-W	--watch	Watch mode + live server
-M	--minify	Minify output
-P	--port	Server port (default: 9000)

When to use -E:

Inside your project - no -E needed:

cd my-project
snapp build -W

Outside your project - use -E:

snapp build -W -E my-project

---

snapp --version | snapp -V

Check installed version:

snapp --version
snapp -V

---

snapp --help

Show all available commands:

snapp --help

---

How It Works

Snapp Kit compiles your files using esbuild:

views/index.jsx   →  src/index.js
views/about.tsx   →  src/about.js

Supported files: .jsx, .tsx, .ts, .js

Watch mode:

• Starts live server on port 9000
• Rebuilds when files change
• Refreshes browser automatically

---

Troubleshooting

Command not found

For npm create:

npm --version  # Check npm version (need 6+)

For global installation:

npm install -g snapp-kit
snapp --version

For npx commands:

cd my-project
npx snapp --version

---

Files not compiling

Check your folder structure:

ls views/*.jsx   # Verify files exist

Then build:

snapp build -W

---

Port already in use

snapp build -W -P 8080

---

Permission errors (Linux/Mac)

sudo npm install -g snapp-kit

Or use npm create snapp-app (no sudo needed!)

---

Why Snapp Kit?

• Simple - One command to build
• Fast - Powered by esbuild
• Flexible - Global or per-project

---

Snapp Kit v3

Install Now • Snapp Framework • GitHub