Setting Up Your Environment

This guide walks you through cloning the Gymlium template SDK and scaffolding a new template project.

Clone the SDK

Clone the repository


git clone https://github.com/GYMLIUM-LTD/sfy-pt-templates.git
cd sfy-pt-templates

Install dependencies


npm install

This installs the SDK tools, validation scripts, and the local preview server.

Verify the installation


npm run validate --help

You should see the validation CLI usage output confirming the SDK is ready.

Scaffold a new template

The SDK includes a scaffold command that generates a complete template directory with all required files.


npm run scaffold -- --name "my-awesome-template" --displayName "My Awesome Template"

This creates a new directory under templates/my-awesome-template/ with the following structure:


templates/my-awesome-template/
├── template.manifest.json    # Template metadata and configuration
├── template.css              # Global CSS custom properties
├── index.ts                  # Barrel file — exports all components
├── Header/
│   ├── Header.tsx            # Header component (named export)
│   └── Header.module.css     # Header styles
├── Footer/
│   ├── Footer.tsx            # Footer component (named export)
│   └── Footer.module.css     # Footer styles
├── Loading/
│   ├── Loading.tsx           # Loading component (default export)
│   └── Loading.module.css    # Loading styles
├── pages/
│   ├── home/
│   │   ├── HomeContent.tsx   # Home page (default export)
│   │   └── HomeContent.module.css
│   ├── about/
│   │   ├── AboutContent.tsx
│   │   └── AboutContent.module.css
│   └── login/
│       ├── LoginContent.tsx
│       └── LoginContent.module.css
├── preview/
│   └── thumbnail.png         # Marketplace preview image
└── README.md

Understanding the generated files

File	Purpose
`template.manifest.json`	Metadata — name, version, description, author, pricing, i18n settings
`template.css`	CSS custom properties that theme the entire site
`index.ts`	Barrel file exporting Header, Footer, Loading, and all page components
`Header/Header.tsx`	Top navigation bar — must be a named export
`Footer/Footer.tsx`	Site footer — must be a named export
`Loading/Loading.tsx`	Loading spinner / skeleton — must be a default export
`pages/*/`	Each page is a folder with a component and its CSS module

The barrel file (index.ts) is how Gymlium discovers your components. Every component must be exported from this file following the exact pattern documented in Template Structure.

Run the local preview server


npm run dev -- --template my-awesome-template

This starts a local development server at http://localhost:3000 with mock trainer data, allowing you to see your template in action. Hot reload is enabled — changes to your components and CSS update instantly.

Run validation locally

Before submitting, always validate:


npm run validate -- --template my-awesome-template

The validator checks:

All required files exist
Manifest schema is valid
Export patterns are correct
CSS custom properties are defined
Thumbnail image is present and correctly sized

Fix all validation errors before submitting. Templates that fail validation will be automatically rejected.

Next steps

Now that your environment is set up, head to Building Your First Template for a hands-on walkthrough.