菜单
Deploy LiveCodes to static servers, GitHub Pages, or Docker. Configure SDK appUrl, BASE_URL for subdirectories, and handle share/broadcast services. Load this skill when self-hosting LiveCodes or using a custom app URL.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/live-codes/livecodes --skill livecodes-self-hosting命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | livecodes/self-hosting |
| description | Deploy LiveCodes to static servers, GitHub Pages, or Docker. Configure SDK appUrl, BASE_URL for subdirectories, and handle share/broadcast services. Load this skill when self-hosting LiveCodes or using a custom app URL. |
| type | composition |
| library | livecodes |
| library_version | 0.13.0 |
| requires | ["sdk-embedding"] |
| sources | ["live-codes/livecodes:docs/docs/features/self-hosting.mdx"] |
This skill requires sdk-embedding. Read it first for foundational concepts.
LiveCodes runs entirely client-side. Host it on any static file server or CDN.
build folder# Files to serve
build/
├── index.html
├── livecodes/
│ ├── assets/
│ └── ...
└── docs/ (optional)
git clone https://github.com/live-codes/livecodes.git
cd livecodes
npm install
npm run build # Build to build/ directory
npm run serve # Local preview at http://localhost:8080
npm run deploy # Build + deploy to GitHub Pages
# Setup
npm install
npm run deploy # Deploys to gh-pages branch
Configure CNAME file for custom domain if needed.
docker-compose up -d
Docker setup includes:
# docker-compose.yml
# See: docs/docs/advanced/docker.mdx for customization
npm run build, serve build/npm run build, serve build/firebase init hosting, deploy build/import { createPlayground } from 'livecodes';
createPlayground('#container', {
appUrl: 'https://playground.example.com',
template: 'react',
});
The appUrl tells the SDK where to load the playground iframe from.
By default, LiveCodes expects to be at the root of a domain. For subdirectories:
# Host at https://example.com/playground/
npx cross-env BASE_URL="/playground/" npm run build
This sets <base href="/playground/"> and adjusts all asset paths.
To link documentation to livecodes.io instead of building locally:
npx cross-env DOCS_BASE_URL=null npm run build:app
Docs links will point to https://livecodes.io/docs/ instead of local docs.
Self-hosted apps use fallback services:
| Service | Default Hosted | Self-Hosted |
|---|---|---|
| Share (short URLs) | dpaste.com (365 days) | dpaste.com or Docker setup |
| Broadcast | LiveCodes server | Docker setup required |
| GitHub Integration | LiveCodes OAuth | Your GitHub App |
Docker setup provides all services:
docker-compose up -d
# Serves at https://livecodes.localhost
See docs/docs/advanced/docker.mdx for configuration.
Use versioned URLs to prevent breaking changes:
// Version-specific URL (never changes)
createPlayground('#container', {
appUrl: 'https://v48.livecodes.io',
template: 'react',
});
// Pin SDK version
import { createPlayground } from 'livecodes@0.13.0';
// or
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.13.0';
Permanent URLs format: https://v{VERSION}.livecodes.io
Wrong:
# Build default, serve at /playground/
npm run build
# Results in broken asset paths
Correct:
# Set BASE_URL for subdirectory
npx cross-env BASE_URL="/playground/" npm run build
Without BASE_URL, the app expects to be at root (/) and asset paths will be wrong.
Source: docs/docs/features/self-hosting.mdx — Custom Build section
// dpaste.com deletes share URLs after 365 days
// For permanent self-hosted share:
// 1. Use Docker setup for own share service
// 2. Or use permanent URL pattern for embeds
The default dpaste.com service deletes shared URLs after one year. For permanent sharing, use Docker setup with your own share service.
Source: docs/docs/features/self-hosting.mdx — Services section
# Fork live-codes/livecodes
# Enable GitHub Pages in repo settings
npm install
npm run deploy
# Access at https://your-username.github.io/livecodes/
# Build command: npm run build:app
# Output directory: build
# Environment: NODE_VERSION=18
# Access at https://your-subdomain.pages.dev/
git clone https://github.com/live-codes/livecodes.git
cd livecodes
docker-compose up -d
# Access at https://livecodes.localhost
# Configure domain in docker-compose.yml
Use SDK methods to interact with playgrounds: run, getCode, setConfig, getConfig, watch, runTests, format, getShareUrl, show, destroy. Load this skill when programmatically controlling embedded playgrounds, reacting to code changes, or retrieving compiled output.
Open-source, client-side code playground supporting 90+ languages/frameworks. Runs entirely in the browser with SDK for embedding. Entry point for all LiveCodes skills.
Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.
基于 SOC 职业分类
