UIkit Deployment and Usage Guide

Prerequisites

Node.js (v12.0.0 or higher) - Required for building and development
npm (v6.0.0 or higher) or yarn (v1.0.0 or higher) - Package manager for installing dependencies
Git - For cloning the repository
Modern web browser - For testing and development (Chrome, Firefox, Safari, Edge, or Opera)

Installation

Option 1: Using npm/yarn (Recommended for development)

# Using npm
npm install uikit

# Using yarn
yarn add uikit

# Using pnpm
pnpm add uikit

Option 2: Download pre-built files

Visit the latest release page
Download the uikit.zip file
Extract the contents to your project directory

Option 3: Clone the repository

git clone git@github.com:uikit/uikit.git
cd uikit
npm install

Option 4: CDN integration

Add the following to your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit.min.js"></script>

Configuration

UIkit doesn't require complex configuration for basic usage. However, you can customize it through:

Custom Build Configuration

Create a uikit.config.js file in your project root:

module.exports = {
    theme: {
        primary: '#2d3e50',
        secondary: '#7f8c8d'
    },
    components: ['button', 'modal', 'dropdown']
};

Environment Variables

UIkit doesn't use environment variables for basic functionality. For development, you might want to set:

# Development mode
NODE_ENV=development

# Production mode
NODE_ENV=production

Build & Run

Development

# Clone and install dependencies
git clone git@github.com:uikit/uikit.git
cd uikit
npm install

# Start development server
npm run dev

# Or build for development
npm run build:dev

Production

# Build for production
npm run build

# Or build with custom configuration
npm run build -- --config uikit.config.js

Using UIkit in your project

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/uikit/css/uikit.min.css" />
</head>
<body>
    <button class="uk-button uk-button-primary">Button</button>
    <script src="path/to/uikit/js/uikit.min.js"></script>
</body>
</html>

Deployment

Static Website Hosting

UIkit is perfect for static sites. Deploy to:

GitHub Pages - Great for documentation and simple sites
Netlify - Excellent for static sites with build processes
Vercel - Another great option for static deployments
Surge.sh - Simple CLI-based deployment

Netlify Deployment Example

# Build your site
npm run build

# Deploy to Netlify
netlify deploy --prod

CDN Deployment

For maximum performance, use a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@latest/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/uikit@latest/dist/js/uikit.min.js"></script>

Package Publishing

If you're building a UIkit-based component library:

# Build your package
npm run build

# Publish to npm
npm publish

Troubleshooting

Common Issues

Issue: UIkit components not working

Solution: Ensure you've included both CSS and JS files
Check that your HTML structure follows UIkit's component requirements

Issue: Build fails with missing dependencies

Solution: Run npm install to ensure all dependencies are installed
Check your Node.js version (must be v12.0.0 or higher)

Issue: Components not styling correctly

Solution: Verify CSS file is loaded before JavaScript
Check for CSS conflicts in your existing stylesheets

Issue: Development server not starting

Solution: Check port availability (default is 3000)
Try npm run clean followed by npm install

Performance Issues

Problem: Large bundle size

Solution: Use tree-shaking by importing only needed components
Example: import UIkit from 'uikit/src/js/components/button.js'

Problem: Slow page load

Solution: Use the minified versions of CSS and JS
Consider loading components asynchronously

Browser Compatibility

Problem: Components not working in older browsers

Solution: Ensure you're using the latest UIkit version
Consider adding polyfills for older browsers
Test with BrowserStack (UIkit is tested there)

Development Workflow

Problem: Changes not reflecting

Solution: Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
Check that development server is running
Verify file paths in your HTML

Problem: Build errors in production

Solution: Run npm run build to check for errors
Ensure all assets are properly referenced in your HTML

For additional help, join the UIkit Discord community or check the official documentation.

How to Deploy & Use uikit/uikit