Clarify and simplify dev setup

.env.development

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=https://api.dev.zoo.dev
+VITE_SITE_BASE_URL=https://dev.zoo.dev

.env.example

@@ -1,4 +1 @@
-VITE_API_BASE_URL=https://api.dev.zoo.dev
-VITE_SITE_BASE_URL=https://dev.zoo.dev
-PLAYWRIGHT_SESSION_COOKIE="your-token-from-dev.zoo.dev"
-VITE_TOKEN="your-token-from-dev.zoo.dev"
+VITE_ZOO_DEV_TOKEN="your-token-from-dev.zoo.dev" # A dev API token from dev.zoo.dev

README.md

@@ -4,9 +4,10 @@ This repository is an open-source example of how to quickly get up and running w
 
 ## Developing
 
-1. Get a dev api token from: https://dev.zoo.dev
-2. Set a `VITE_TOKEN` environment variable in `./.env.development`
-3. Run the dev server with `yarn dev -- --open`
+1. Remove the `.example` from `/.env.example`, leaving it `.env` (Git will ignore this and prevent you from accidentally publishing your dev API token)
+2. Set the `VITE_ZOO_DEV_TOKEN` environment variable in with a **dev** API token from: https://dev.zoo.dev in `/.env`
+3. Set the `PLAYWRIGHT_TESTING_TOKEN` environment variable with a **prod** API token from: https://zoo.dev in `/.env`
+4. Run the dev server with `yarn dev -- --open`
 
 ## Building
 
@@ -20,18 +21,11 @@ You can preview the production build with `yarn preview`.
 
 ## Before submitting a PR
 
-Please run the following commands to ensure that your code is as ready for review as it can be:
-
-```bash
-yarn fmt --fix && yarn test
-```
+Please run the `yarn prep` to lint, format, type-check and test your code to ensure it's as ready for code review as possible.
 
 ### Running Playwright E2E tests locally
 
-In order to run our Playwright testing suite locally, please set the `PLAYWRIGHT_SESSION_COOKIE` variable within `.env.development` to a token from a logged in local development session. You can retrieve it by:
-
-1. logging in to the project locally using the method outlined above
-2. opening the Application tab in your browser developer tools
-3. copying out the value of the cookie titled `__Secure-next-auth.session-token` with the domain of `localhost`
+If you've set a `VITE_ZOO_DEV_TOKEN` in `/.env` as described above, you should be able to run the `yarn test` command successfully, which runs `yarn test:integration` and `yarn test:unit` in series.
 
-Now you should be able to run the `yarn test:integration` and `yarn test` commands successfully.
+- We use [Playwright](https://playwright.dev) for end-to-end testing. Try running `yarn test:integration --ui` for a handy visualizer of your tests as they run!
+- We use [Vitest](https://vitest.dev) for unit and component testing.

package.json

@@ -6,6 +6,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"prep": "yarn fmt --fix && yarn check && yarn lint && yarn test",
 		"test": "npm run test:integration && npm run test:unit run",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

playwright.config.ts

@@ -14,7 +14,7 @@ const config: PlaywrightTestConfig = {
 			cookies: [
 				{
 					name: AUTH_COOKIE_NAME,
-					value: process.env.PLAYWRIGHT_SESSION_COOKIE ?? '',
+					value: process.env.VITE_ZOO_DEV_TOKEN ?? '',
 					domain: 'localhost',
 					path: '/',
 					expires: expiration.getTime() / 1000,

src/routes/+layout.server.ts

@@ -5,7 +5,7 @@ export const load = async ({ locals, cookies }) => {
 	const token =
 		import.meta.env.MODE === 'production'
 			? cookies.get(AUTH_COOKIE_NAME)
-			: import.meta.env.VITE_TOKEN
+			: import.meta.env.VITE_ZOO_DEV_TOKEN
 
 	return {
 		user: !locals.user || 'error_code' in locals.user ? undefined : locals.user,

src/routes/api/convert/[output_format]/+server.ts

@@ -9,7 +9,9 @@ export type ConvertResponse = Models['FileConversion_type'] & {
 }
 
 export const POST: RequestHandler = async ({ cookies, fetch, request, params }) => {
-	const token = import.meta.env.PROD ? cookies.get(AUTH_COOKIE_NAME) : import.meta.env.VITE_TOKEN
+	const token = import.meta.env.PROD
+		? cookies.get(AUTH_COOKIE_NAME)
+		: import.meta.env.VITE_ZOO_DEV_TOKEN
 	if (!token) throw error(401, 'You must be logged in to use this API.')
 
 	const body = await request.text()

src/routes/api/get-generation/+server.ts

@@ -11,7 +11,7 @@ export const POST: RequestHandler = async ({ cookies, fetch, request }) => {
 	const token =
 		import.meta.env.MODE === 'production'
 			? cookies.get(AUTH_COOKIE_NAME)
-			: import.meta.env.VITE_TOKEN
+			: import.meta.env.VITE_ZOO_DEV_TOKEN
 
 	const body = await request.json()
 

src/routes/api/submit-feedback/+server.ts

@@ -8,7 +8,9 @@ export type LoadResponse = {
 }
 
 export const POST: RequestHandler = async ({ cookies, fetch, request }) => {
-	const token = import.meta.env.PROD ? cookies.get(AUTH_COOKIE_NAME) : import.meta.env.VITE_TOKEN
+	const token = import.meta.env.PROD
+		? cookies.get(AUTH_COOKIE_NAME)
+		: import.meta.env.VITE_ZOO_DEV_TOKEN
 	const body = await request.json()
 
 	if (!(body?.id && body?.feedback))

src/routes/api/submit-prompt/+server.ts

@@ -9,7 +9,9 @@ export type PromptLoadResponse = {
 }
 
 export const POST: RequestHandler = async ({ cookies, fetch, request }) => {
-	const token = import.meta.env.PROD ? cookies.get(AUTH_COOKIE_NAME) : import.meta.env.VITE_TOKEN
+	const token = import.meta.env.PROD
+		? cookies.get(AUTH_COOKIE_NAME)
+		: import.meta.env.VITE_ZOO_DEV_TOKEN
 	if (!token) throw error(401, 'You must be logged in to use this API.')
 
 	const body = await request.json()