Lichess UI Development - lichess-org/lila GitHub Wiki

If you haven't already, install the tools described on the main onboarding page.

Learn about pnpm here. In most cases, it has the same behavior and syntax as both npm and yarn. Just as you might use npm install or yarn add to add a package with those tools, either pnpm install or pnpm add can be used to do the same with pnpm.

Building the client involves tsc to transpile typescript code to javascript, dart-sass to compile *.scss SASS files into CSS, and esbuild to bundle javascript dependencies into individual modules suitable for linkage in an HTML <script> tag.

You probably won't have to interface with dart-sass or esbuild directly. The ui/build tool does it for you.

ui/build --help is enough to get most people started. The source code can be found here. It uses custom objects in the package.json files in each module to determine how to generate assets.

See the lichess object defined in ui/site/package.json for the most comprehensive example. Each element in that bundles -> esm object identifies a source typescript (relative to the package.json) and a destination basename (relative to <lila>/public/compiled) that esbuild will use to generate javascript assets for client download.

ui/build will reconcile all node_modules with the pnpm package store according to parsed package.jsons each time it is invoked. This behavior can be suppressed with the -n or --no-install argument:

ui/build --no-install

How about when you need to make changes to a module from the npm registry such as chessground? For that, you can use pnpm link.

Clone the repo you want to modify to <your-local-package>. Then cd to the using module directory - the one containing the package.json you want to link to your package. Finally, type pnpm link <relative-path-to-your-local-package>. Run ui/build again to pick up your changes.

For example, to work on pgn-viewer: First git clone https://github.com/lichess-org/pgn-viewer into a directory adjacent to lila root. We'll use the lichess forum code to test our local pgn-viewer. Forum stuff lives in the ui/site module and lichess-pgn-viewer is linked in that module's package.json. So:

cd <lila-root>/ui/site
pnpm link ../../../pgn-viewer # relative path to your local package

Notice that pnpm link actually modifies the pnpm-lock.yaml file in lila root. You don't want to check that modification into git. Therefore:

git restore <lila-root>/pnpm-lock.yaml

When you're done with your local package changes. Afterwards, pnpm & ui/build will use the npm registry version again.

• Symbols you can use on lichess webpages (defined in public/font/lichess.sfd)
• add some links