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
Prerequisites:
-
Install nvm - Node Version Manager, then:
$ nvm install $ nvm use $ node -v # make sure your version satisfies package.json#engines.nodenb: 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
$ npm run dev
$ npm run build
NB: npm run build -- --force to ignore turbo cache
Then npx serve out.
Details
This will:
- execute
^build2which willvite buildeachdemos/*with:
- a
--baseset to${BASE_PATH}/${app_name} - a custom vite
--config, whith amonkey()plugin that will:deterministicscript intosrc/index.jsx- monkeypatch the
<Canvas>withCheesyCanvasfor setting up the scene for playwright screenshots
- build the Next.js
apps/website - copy final result into
outfolder
[!TIP] This is totally fine
BASE_PATH/BASE_URLto 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
$ npm testTo update the snapshots: npm test -- -- --update-snapshots
Details
You can also:
$ BASE_PATH=/examples npm testFor 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"