Deployment, Tokens and Application Export

Deployment
Design Tokens
Theme
Learn to use design tokens, customize themes, and deploy your Unapart application.
Feature Tour (Episode 8)
Back to the Academy

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