Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js: Version 18 or higher
  • npm: Version 6 or higher
  • Git: For cloning the repository

​
Getting Started

1

Fork and Clone the Repository

Fork the repository on GitHub, then clone your fork:
# Clone your forked repository
git clone https://github.com/<YOUR_GITHUB_USERNAME>/template-playground.git

# Navigate to the project directory
cd template-playground
2

Add Upstream Remote

Add the main repository as an upstream remote to stay in sync:
git remote add upstream https://github.com/accordproject/template-playground.git
3

Install Dependencies

Install all required npm packages:
npm install
This will install all dependencies listed in package.json, including:
  • Core libraries: React, Vite, TypeScript
  • Accord Project packages: Concerto, Template Engine, Markdown Transform
  • UI components: Ant Design, Monaco Editor
  • Testing tools: Vitest, Playwright, Testing Library
4

Start Development Server

Run the development server:
npm run dev
The playground will be available at http://localhost:5173 (or another port if 5173 is in use).

​
Available Scripts

The project includes several npm scripts for development:

​
Development

# Start development server with hot reload
npm run dev

​
Building

# Build for production
npm run build

# Preview production build
npm run preview
The build command uses TypeScript compilation followed by Vite bundling with increased memory allocation (--max-old-space-size=8192).

​
Code Quality

# Run ESLint to check code quality
npm run lint
The linting checks TypeScript and TSX files for:
  • Unused disable directives
  • Type safety issues
  • React hooks best practices
  • Maximum warnings set to 0

​
Testing

# Run all unit tests
npm test
# or
npm run test:unit

# Run end-to-end tests
npm run test:e2e

# Run e2e tests with UI
npm run test:e2e:ui

​
Staying Up to Date

Keep your fork synchronized with the upstream repository: 
# Fetch latest changes from upstream
git fetch upstream

# Merge upstream changes into your local main branch
git checkout main
git merge upstream/main

# Push updates to your fork
git push origin main

​
Development Environment

​
Editor Setup

We recommend using an editor with TypeScript support:
  • VS Code: Install the ESLint and TypeScript extensions
  • WebStorm: Built-in TypeScript and ESLint support

​
Environment Configuration

The project uses:
  • Vite as the build tool and dev server
  • TypeScript with strict type checking enabled
  • ESLint for code linting
  • Vitest for unit testing (with jsdom environment)
  • Playwright for end-to-end testing

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port. Check the console output for the actual URL.

​
Module Resolution Issues

If you encounter module resolution errors: 
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

​
Memory Issues During Build

The build script already includes increased memory allocation. If you still encounter issues: 
# Increase memory limit further if needed
cross-env NODE_OPTIONS=--max-old-space-size=16384 npm run build

​
Next Steps

Project Architecture

Learn about the codebase structure and key components

Testing Guide

Understand how to write and run tests

Build docs developers (and LLMs) love

Get started for freeTalk to us