# Deployment, Tokens and Application Export

**Quick summary:** Learn to use design tokens for consistent styling, customize your application theme, and deploy your project as a web app or desktop application.

---

## Introduction to application finalization

This tutorial demonstrates how to polish your application using design tokens, customize its visual theme, and deploy it in multiple formats - from web hosting to standalone desktop applications.

## 1. Setting up your main page

### Creating the entry point
1. Create a new page with an **empty path** ("/") - this will be your main page
2. Add your component (rename it to "main" for clarity)
3. **Best practice**: Always name your files properly for better project organization

### Improving the layout
1. Add a **flex display** with vertical direction
2. Add a **gap** between elements
3. Add some **padding** for spacing

**Problem**: Using random pixel values (like 11px here, 15px there) creates inconsistent spacing throughout your application.

## 2. Understanding design tokens

### What are design tokens?
Design tokens are preset values for your theme that ensure consistency across your entire application. Instead of using "magic numbers", you use standardized values.

### The token selector
Look for the **chain icon** (third element) in property fields - this opens the token selector.

### Using spacing tokens
1. For the **gap** property: select token "S" (12 pixels)
2. For the **padding** property: select token "M" (16 pixels)
3. **Key benefit**: These values are consistent everywhere in your app

### Using color tokens
1. Add a **background** color to your container
2. Instead of picking a random color, click the **token selector**
3. Choose from predefined colors like "background" or "primary"
4. **Result**: Your colors match the overall application theme

## 3. Customizing your theme

### Accessing theme settings
Click the **palette icon** in the toolbar to open theme customization.

### Setting your primary color
1. Choose your **main color** (e.g., orange instead of default blue)
2. This color is used for buttons and primary UI elements
3. **Automatic magic**: All primary color variations are generated automatically
4. **Instant update**: Check your tokens - all primary colors are now updated

### Configuring background colors
1. Set your **background color** (second color in theme settings)
2. **Design tip**: Don't use pure gray - add a warm or cool hue
   - Blue tones create a cold atmosphere
   - Orange/red tones create a warm atmosphere
3. Find a balance that matches your brand

### Additional theme options
- **Match editor**: Synchronizes editor colors with your app theme for better visual consistency
- **Light/Dark mode**: Switch between themes (dark mode recommended for comfort)
- **Borders**: Customize border styles
- **Radius**: Adjust corner roundness for sharper or softer designs

## 4. Deploying your application

### Web deployment
1. **Save your project** first
2. Click the **hammer icon** → **Deploy**
3. Wait 2-3 seconds for compilation
4. **Result**: Your application is now live and accessible via URL
5. **Performance**: The deployed version is optimized for speed

### Self-hosting options
1. Click **Download** to get the source files
2. You'll receive all generated CSS and JavaScript files
3. **Upload these files to any hosting service**:
   - GitHub Pages
   - Cloudflare
   - Any web host of your choice

**Important**: Unapart hosting is intended for testing and debugging, not production distribution.

## 5. Desktop application export

### Understanding the two formats

#### Portable version
- **No installation required** - runs immediately
- Uses WebView technology
- **Limitation**: WebView must be present on the user's system
- **Availability**: Built into Windows 11, may require additional software on older systems
- **Updates**: Users must manually replace old version with new one

#### Installer version
1. **Installs WebView** if not present on the system
2. **Version management**: Set version numbers (major.minor.patch)
3. **Easy updates**: Users can install new versions over old ones
4. **Preserves shortcuts** and system integration

### Application settings explained

#### Basic settings
- **App name**: Your application's display name
- **PWA**: Enable Progressive Web App features
- **Version**: Track releases (update major, minor, or patch numbers)

#### History mode options
1. **Hash mode** (recommended): Uses URLs like `#/option`
   - Works everywhere without server configuration
   - Most reliable option
2. **Web mode**: Uses clean URLs like `/option`
   - Requires server configuration to redirect all routes to index.html
   - More aesthetic but needs setup
3. **Memory mode**: No visible URL changes
   - Works everywhere
   - Less user-friendly (users can't bookmark specific pages)

#### Window settings
- **Default dimensions**: Set initial window size
- **Resizable**: Allow/prevent window resizing
- **Fullscreen**: Launch in fullscreen mode by default

## 6. Practical example: Snake game

### Performance demonstration
The tutorial includes a fully functional Snake game built entirely without code:
- All cells use **computed values** for dynamic rendering
- Smooth gameplay with fast performance
- Color-coded elements (blue for snake, gray for empty cells)
- **Conditional rendering**: Different styles for snake body, food, and head (with eyes)

### What this proves
- **No coding required**: Everything built with visual tools
- **High performance**: Optimized export handles complex calculations
- **Real-world viability**: Can build actual games and applications

## Key concepts

### Design tokens
- **Consistency**: Same values across entire application
- **Maintainability**: Change once, update everywhere
- **Spacing tokens**: S, M, L for gaps, padding, margins
- **Color tokens**: Primary, background, surface colors

### Theme customization
- **Primary color**: Buttons and interactive elements
- **Background color**: Overall app atmosphere (warm/cool)
- **Generated variants**: Automatic color palette creation
- **Editor matching**: Synchronize workspace with app theme

### Deployment formats
- **Web**: Hosted on any server, accessible via browser
- **Portable**: Standalone executable, no installation
- **Installer**: Full application with version management

### Version management
- **Major**: Breaking changes or major features
- **Minor**: New features, backwards compatible
- **Patch**: Bug fixes and small improvements

## Best practices

### Design consistency
- **Always use tokens** instead of arbitrary values
- **Test both themes** (light/dark) before deploying
- **Choose a cohesive color scheme** that reflects your brand

### Deployment strategy
- **Use Unapart hosting** for testing and debugging only
- **Self-host for production** on reliable platforms
- **Choose installer version** for desktop apps with updates
- **Use portable version** for simple, one-time distributions

### Project organization
- **Name all files** descriptively
- **Use clear page paths** for navigation
- **Document version numbers** when releasing updates

### Testing
- **Preview before deploying** to catch visual issues
- **Test on target platforms** (web browsers, Windows versions)
- **Verify all interactive elements** work in deployed version