A wizard-style guide for setting up a Star Wars Galaxies Emulator (SWGEmu) server from scratch. Consolidates four separate legacy guides into a single modern interface with 23 steps across 6 phases.
| Phase | Topic | Steps |
|---|---|---|
| 1 | Virtual Machine Setup | Download Debian 11, create VirtualBox VM, install OS |
| 2 | Server Installation | Install dependencies, clone Core3, build the server |
| 3 | Database Setup | Install MariaDB, configure databases, import schemas |
| 4 | Server Configuration | Edit config files, set IP, add game assets (.tre files) |
| 5 | Running & Managing | Start the server, create admin accounts, basic management |
| 6 | Updating & Maintenance | Pull updates, rebuild, database migrations |
- Step-by-step wizard with animated transitions between steps
- Progress tracking persisted in localStorage (pick up where you left off)
- Floating table of contents with per-phase progress badges
- Terminal-style code blocks color-coded by language (bash, SQL, Lua, INI, PowerShell)
- One-click copy on all commands
- Keyboard navigation — arrow keys, Esc (TOC), Home/End
- Callout boxes for warnings, notes, and tips
- Progress indicators — SVG ring (top-right) and gradient bar (bottom)
- URL hash routing — link directly to any step via
#step-id - Responsive design with sci-fi "Command Console" aesthetic
- Next.js 16 (App Router, static export)
- Tailwind CSS v4 (CSS-based config)
- TypeScript
- Framer Motion (animations)
- Lucide React (icons)
- Fonts: Orbitron (headings), JetBrains Mono (code)
npm install
npm run dev # Start dev server at localhost:3000
npm run build # Production build (static export to /out)Auto-deploys to Vercel on push to master. The site is a fully static export — no server-side rendering or API routes.
app/
layout.tsx Root layout (metadata, fonts, dark mode)
page.tsx Entry point — renders WizardLayout
globals.css Full design system (Tailwind theme, components)
components/
WizardLayout.tsx Main orchestrator (navigation, keyboard, transitions)
TableOfContents.tsx Floating slide-over panel with phase progress
StepContent.tsx Step renderer with staggered entrance animations
StepNavigation.tsx Prev/Next buttons (Finish loops to start)
CodeBlock.tsx Terminal-style code card with copy button
ProgressBar.tsx ProgressRing (SVG) + ProgressLine (gradient bar)
NoteBox.tsx Info callout (cyan)
WarningBox.tsx Warning callout (amber)
TipBox.tsx Tip callout (green)
data/
steps.ts All 23 guide steps as structured TypeScript data
hooks/
useWizardProgress.ts localStorage progress tracking
lib/
utils.ts cn() utility (clsx + tailwind-merge)
This project consolidates four original guides:
This project is for educational purposes. Star Wars Galaxies is a trademark of Lucasfilm/Sony Online Entertainment. SWGEmu is an open-source project — see swgemu.com.