Starter project
Set up your development environment with the Claspo plugin starter repository
Getting Started
Introduction
Claspo provides a starter repository for plugin development that includes:
- Custom Components Development — initial project for developing your own components
- Quickstart Demo — Docker container examples for deployment (editor, renderer, backend)
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (version 22.20.0 or higher)
- npm (version 8 or higher)
- Git
Installation
Clone the starter template and install dependencies:
git clone https://github.com/Claspo/claspo-plugin-starter.git
cd claspo-plugin-starter
npm run install:allRunning Locally
Start all services with a single command from the repository root:
npm run devThis runs components dev server, backend, and frontend concurrently.
| Service | URL |
|---|---|
| Editor | http://localhost:4202/editor.html |
| Renderer | [http://localhost:4202/script.html](http://localhost:4202/script.html |
Custom Components Development
Components are web components that extend WcElement. Each component lives in its own folder under components/:
components/
└── YourCustomComponent/
├── YourCustomComponent.js
└── assets/
Development Commands
| Command | Description |
|---|---|
npm run components:dev | Start dev server with hot reload (port 9590) |
npm run components:build:prod | Create production build in bundled-components/ |
For detailed component development guide, see README.md.
Quickstart: Editor & Widget Rendering
The quickstart/ folder provides Docker container examples for deploying Claspo plugin infrastructure:
- Frontend — Widget editor and renderer UI (Vite + nginx)
- Backend — Express API for widget storage
- Static Components — Pre-built component bundles (nginx)
Docker Deployment
For Docker deployment examples and detailed configuration, see quickstart/README.md.
cd quickstart
docker-compose up --buildAdditional resources
- https://github.com/Claspo/claspo-plugin-starter/blob/main/README.md
- Explore https://github.com/Claspo/claspo-plugin-starter/blob/main/quickstart/README.md
Updated 1 day ago
