Lionel's Legacy

Developers

Setup

Register the shared Git configuration file (.gitconfig):

git config --local include.path ../.gitconfig

Install PNPM:

curl -fsSL https://get.pnpm.io/install.sh | sh -

Install Node dependencies, including the requisite version of Node if necessary (defined in .npmrc):

pnpm install

Environment

Ensure that any essential environment variables are defined (consult .env.development).

For sensitive environment variables or ones that should otherwise not be committed, use a .local file, e.g. .env.development.local.

When adding a dependency upon a new environment variable, be sure to update the .env.development and .env.production files in order to document it.

Any environment variable whose name is prefixed with VITE_ will be exposed to the Vite processed code.

Compile and Start a Development Server with Hot-Reloading

pnpm dev

Compile, Minify and Prerender for Production

pnpm build

Locally Preview Latest Production Build

pnpm preview

Be sure to run pnpm build first.

Deploy (to Github Pages)

Push to main branch to trigger a deployment to Github Pages via a Github Action/workflow:

git push origin main

To deploy manually (not recommended):

pnpm deploy

Lint with ESLint and Stylelint

pnpm lint

Or fix lints:

pnpm lint:fix

For more targetted linting, the following are also available:

pnpm lint:js
pnpm lint:js:fix
pnpm lint:css
pnpm lint:css:fix

Format with Prettier

pnpm format

Or fix formatting issues:

pnpm format:fix

Spellcheck with CSpell

pnpm spelling

Or launch an interactive script to add unrecognised words to the list of ignoreWords in cspell.config.yaml:

pnpm spelling:fix

Other Notable Tools

• Git hooks are managed by Husky.
• Commit message linting is provided by commitlint. Messages should conform to the Conventional Commit specification. See .commitlintrc.yaml for details.
• Git branch name linting is provided by branch-name-lint (actually we use a fork that we currently maintain). See .branch-name-lint.json for details.
• lint-staged ensures that pre-commit checks (linting, formatting, and spell checking) are only run on staged files.

Troubleshooting

pnpm build hangs or Chromium segfaults during prerendering on OSX

Page prerendering is provided by vite-plugin-prerender, which itself relies upon puppeteer.

puppeteer installs x86 versions of Chromium even when running on Apple Silicon/ARM64 chips.

If necessary run:

pnpm node node_modules/puppeteer/install.mjs

This should install a suitable version of Chromium, under ~/.cache/puppeteer/chrome/ by default. Verify that it works by launching it, e.g.

open '~/.cache/puppeteer/chrome/mac_arm-126.0.6478.182/chrome-mac-arm64/Google Chrome for Testing.app'

To instruct the build process to use this version of Chromium (or some other one that you have installed manually), set the PUPPETEER_EXECUTABLE_PATH variable path.

Use of an environment file is recommended. Remember that even when running locally, the build environment will most likely be set to production, so you should create/modify the .env.production.local file.