Slice.js CLI

Installation

Local (Recommended)

1. Install as a development dependency:

npm install slicejs-cli --save-dev

2. Add to your package.json scripts:

{
  "scripts": {
    "dev": "slice dev",
    "build": "slice build",
    "slice": "slice"
  }
}

3. usage:

npm run dev
# or pass arguments
npm run slice -- get Button

Global (Not Recommended)

Global installations can lead to version mismatches and "works on my machine" issues.

npm install -g slicejs-cli

Usage

After installation, you can use the slice command directly:

slice [command] [options]

Or with npx (without global install):

npx slicejs-cli [command]

Essential Commands

Initialize a project

slice init

Initializes a Slice.js project with the full structure (src/ and api/), installs initial Visual components, and configures npm scripts.

Development server

# Default port (3000)
slice dev

# Custom port
slice dev -p 8080

Production build + server

# Build production output (minified + obfuscated by default)
slice build

# Disable minification or obfuscation
slice build --no-minify
slice build --no-obfuscate

# Start production server (serves /dist)
slice start
slice start -p 8080

Component management (local)

# Create a component (interactive)
slice component create

# List local components
slice component list

# Delete a component (interactive)
slice component delete

Shortcuts:

slice comp create
slice comp ls
slice comp remove

Official component registry

# Install Visual components
slice get Button Card Input

# Install a Service component
slice get FetchManager --service

# Force overwrite
slice get Button --force

# Browse available components
slice browse

# Update all local components
slice sync
slice sync --force

Shortcuts:

slice get Button
slice browse
slice sync

Utilities

# Version info
slice version
slice -v

# Updates (CLI and Framework)
slice update              # Check and prompt to update
slice update --yes        # Update everything automatically
slice update --cli        # CLI only
slice update --framework  # Framework only

# Help
slice --help
slice [command] --help

npm Scripts

slice init automatically configures the recommended scripts in your package.json:

{
  "scripts": {
    "dev": "slice dev",
    "start": "slice start",
    "get": "slice get",
    "browse": "slice browse",
    "sync": "slice sync",
    "component:create": "slice component create",
    "component:list": "slice component list",
    "component:delete": "slice component delete"
  }
}

Usage:

npm run dev
npm run get
npm run browse

Quick Start

# 1. Create a new project directory
mkdir my-slice-project
cd my-slice-project

# 2. Initialize npm and install Slice CLI
npm init -y
npm install slicejs-cli --save-dev

# 3. Initialize Slice.js project
slice init

# 4. Start development server
slice dev

# 5. Open browser at http://localhost:3000

Common Workflows

Starting a New Project

slice init
slice dev

Production Build + Start

slice build
slice start

Adding Components

# Browse available components
slice browse

# Install specific components
slice get Button Card Input

# Create custom component
slice component create

Keeping Components Updated

# Check what needs updating
slice browse

# Update all components
slice sync

Development Mode

The development server (slice dev) provides:

• ✅ Hot reload
• ✅ Serves directly from /src
• ✅ No build step
• ✅ Port validation
• ✅ Clear error messages

Production Mode

The production workflow uses slice build + slice start:

• ✅ Builds to /dist
• ✅ Generates bundles into /dist/bundles
• ✅ Generates a dedicated framework bundle for Structural components (slice-bundle.framework.js)
• ✅ Minifies + obfuscates by default
• ✅ Serves production assets only

Requirements

• Node.js >= 20.0.0
• npm or yarn

Configuration

Project configuration is stored in src/sliceConfig.json and is created automatically by slice init.

In production, publicFolders defines public asset folders served by the server (defaults to /Themes, /Styles, /assets). This keeps source-only folders private while exposing the assets your app needs.

Features

• 🚀 Development server with hot reload
• 📦 Official component registry
• 🎨 Visual and Service component types
• ✨ Interactive component creation
• 🔄 Automatic component synchronization
• 🛠️ Built-in validation and error handling

Smart Updates

• Detects whether the CLI in use is global or local
• Shows an update plan (GLOBAL/PROJECT) before execution
• Offers to include global CLI update interactively
• Applies uninstall + install @latest to ensure latest versions

Cross-platform Paths

• Centralized path helper avoids ../../..
• Windows/Linux/Mac compatibility using import.meta.url and fileURLToPath

Troubleshooting

Port already in use

# Use a different port
slice dev -p 8080

Project not initialized

# Make sure to run init first
slice init

Command not found

# Use npx if not installed globally
npx slicejs-cli dev

# Or install globally
npm install -g slicejs-cli

Links

• 📘 Documentation: https://slice-js-docs.vercel.app/
• 🐙 GitHub: https://github.com/VKneider/slice-cli
• 📦 npm: https://www.npmjs.com/package/slicejs-cli

License

ISC

Author

vkneider