Examples - in-lining data, fixing codesandbox

.github/workflows/tests_ci.yml

@@ -51,6 +51,16 @@ jobs:
       - name: Unit tests
         run: DATABASE_URL=file:./test.db pnpm jest --ci --testPathIgnorePatterns=admin-ui-tests --testPathIgnorePatterns=api-tests --testPathIgnorePatterns=examples-smoke-tests --testPathIgnorePatterns=examples/testing
 
+  examples_snapshot_tests:
+    name: Examples Snapshot Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup-examples
+
+      - name: Snapshot tests
+        run: pnpm run test:examples-snapshot-tests
+
   graphql_api_tests_postgresql:
     name: API Tests PostgreSQL
     runs-on: ubuntu-latest

.gitignore

@@ -3,6 +3,7 @@
 dist/
 node_modules/
 *.db
+!example.db
 
 # ts-gql
 __generated__

examples/usecase-todo/.codesandbox/tasks.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  "setupTasks": [
+    {
+      "name": "Installing Dependencies",
+      "command": "pnpm install"
+    },
+    {
+      "name": "Start Dev Server",
+      "command": "pnpm dev"
+    }
+  ],
+  "tasks": {
+    "start": {
+      "name": "Start Development",
+      "command": "pnpm dev"
+    }
+  }
+}

examples/usecase-todo/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Node.js",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:20"
+}

examples/usecase-todo/README.md

@@ -12,19 +12,20 @@ To run this project, clone the Keystone repository locally, run `pnpm install` a
 pnpm dev
 ```
 
-This will start Keystone’s Admin UI at [localhost:3000](http://localhost:3000), where you can add items to an empty database.
+This will start Keystone’s Admin UI at [localhost:3000](http://localhost:3000), where you will see Keystone with minimal sample data.
 
 You can also access Keystone’s GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql) to explore the GraphQL API, and run [queries](https://keystonejs.com/docs/guides/filters) and [mutations](https://keystonejs.com/docs/graphql/overview#mutations) on your data.
 
 Congratulations, you’re now up and running with Keystone! 🚀
 
-### Optional: add sample data
+### Sample data
 
-This example includes sample data. To add it to your database:
+This example includes sample data in `example.db` - deleting this file and restarting the dev server will leave you with an empty database.
 
-1. Ensure you’ve initialised your project with `pnpm dev` at least once.
-2. Run `pnpm seed-data`. This will populate your database with sample content.
-3. Run `pnpm dev` again to startup Admin UI with sample data in place.
+To re-seed the sample data:
+1. Stop the server
+2. Run `pnpm seed-data`
+3. Restart the server with `pnpm dev` 
 
 ## Try it out in CodeSandbox 🧪
 

examples/usecase-todo/keystone.ts

@@ -1,11 +1,11 @@
 import { config } from '@keystone-6/core'
 import { lists } from './schema'
 import type { TypeInfo } from '.keystone/types'
 
 export default config<TypeInfo>({
   db: {
     provider: 'sqlite',
-    url: process.env.DATABASE_URL || 'file:./keystone-example.db',
+    url: process.env.DATABASE_URL ?? 'file:./example.db',
 
     // WARNING: this is only needed for our monorepo examples, dont do this
     prismaClientPath: 'node_modules/myprisma',

examples/usecase-todo/package.json

@@ -3,20 +3,21 @@
   "version": null,
   "private": true,
   "license": "MIT",
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "keystone dev",
     "start": "keystone start",
     "build": "keystone build",
-    "postinstall": "keystone postinstall",
+    "test:monorepo-snapshot-test": "keystone build --no-ui --frozen",
     "seed-data": "tsx seed-data.ts"
   },
   "dependencies": {
     "@keystone-6/core": "^6.2.0",
-    "@prisma/client": "5.17.0"
+    "@prisma/client": "*"
   },
   "devDependencies": {
-    "prisma": "5.17.0",
-    "tsx": "^4.0.0",
+    "prisma": "*",
+    "tsx": "^4.16.0",
     "typescript": "^5.5.0"
   }
 }

package.json

@@ -15,6 +15,7 @@
     "test:types": "tsc",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest",
     "test:admin-ui": "jest tests/admin-ui-tests",
+    "test:examples-snapshot-tests": "pnpm -F './examples/**' run test:monorepo-snapshot-test",
     "build": "preconstruct build",
     "prepare": "preconstruct dev"
   },