index: demos

To use a given basic-demo as a template for a new myproject:

$ npx degit pmndrs/examples/demos/basic-demo myproject
$ code myproject

INSTALL

Prerequisites:

• Install nvm - Node Version Manager, then:

  $ nvm install
  $ nvm use
  $ node -v # make sure your version satisfies package.json#engines.node

  nb: if you want this node version to be your default nvm's one: nvm alias default node

• Install PNPM - Package Manager, with:

  $ corepack enable
  $ corepack prepare --activate # it reads "packageManager"
  $ npm -v # make sure your version satisfies package.json#engines.npm

$ npm ci

dev

$ npm run dev

build

$ npm run build

NB1: npm run build -- --force to ignore turbo cache

NB2: npm run build -- --continue to continue on error(s)

Then npx serve out.

Details

This will:

1. execute ^build2 which will vite build each demos/* with:

• a --base set to ${BASE_PATH}/${app_name}
• a custom vite --config, whith a monkey() plugin that will:
  • deterministic script into src/index.jsx
  • monkeypatch the <Canvas> with CheesyCanvas for setting up the scene for playwright screenshots

2. build the Next.js apps/website
3. copy final result into out folder

[!TIP] This is totally fine BASE_PATH/BASE_URL to be unset/empty. But for debug purposes(to be 1:1 with GitHub pages) you can:

$ BASE_PATH=/examples BASE_URL=http://localhost:4000 npm run build
$ npx serve out -p 4000

test

$ npm test

To update the snapshots: npm test -- -- --update-snapshots

Details

You can also:

$ BASE_PATH=/examples npm test

Docker

For generating reproductible snapshots, we use mcr.microsoft.com/playwright:v1.45.3-jammy Docker image.

$ docker run -it --rm  \
  -w /app -v "$(pwd)":/app -v /app/node_modules \
  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh
#
# echo "Hey, I am acting like the CI"
#
# npm ci
# npm test

or in one command to update snapshots:

docker run --rm  \
  -w /app -v "$(pwd)":/app -v /app/node_modules \
  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh -c "npm ci && npm test -- -- --update-snapshots"

Colophon

• https://docs.pmnd.rs/react-three-fiber/getting-started/examples