From 33cbca152351582e7c7445690d35f801e23163d0 Mon Sep 17 00:00:00 2001 From: Brian Morearty Date: Tue, 17 Jan 2023 23:37:28 -0800 Subject: [PATCH] I got it working!!! Thanks to https://github.com/sveltejs/kit/issues/2966#issuecomment-1251898659 --- .gitignore | 1 + .prettierrc | 1 + README.md | 40 ++++-------------------------------- package.json | 7 +++---- pnpm-lock.yaml | 2 ++ src/hooks.server.ts | 11 ++++++++++ src/lib/clients/miniflare.ts | 31 ++++++++++++++++++++++++++++ src/routes/+page.server.ts | 9 +------- src/routes/+page.svelte | 2 +- wrangler.toml | 2 +- 10 files changed, 56 insertions(+), 50 deletions(-) create mode 100644 src/hooks.server.ts create mode 100644 src/lib/clients/miniflare.ts diff --git a/.gitignore b/.gitignore index 6635cf5..0565ea0 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* +kv-data/ diff --git a/.prettierrc b/.prettierrc index d16f830..98891d0 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,7 @@ { "singleQuote": true, "printWidth": 100, + "proseWrap": "always", "plugins": ["prettier-plugin-svelte"], "pluginSearchDirs": ["."], "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] diff --git a/README.md b/README.md index 5c91169..c452aa3 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,6 @@ -# create-svelte +# svelte-local-cloudflare-dev-working -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). +This ended up just being a playground for me to figure out how to run a Sveltekit app on Cloudflare +and attach to KVs, DOs, etc. -## Creating a project - -If you're seeing this, you've probably already done this step. Congrats! - -```bash -# create a new project in the current directory -npm create svelte@latest - -# create a new project in my-app -npm create svelte@latest my-app -``` - -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: - -```bash -npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` - -## Building - -To create a production version of your app: - -```bash -npm run build -``` - -You can preview the production build with `npm run preview`. - -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. +See my SvelteKit Tips & Tricks doc, "Local development with Cloudflare." diff --git a/package.json b/package.json index 0161552..4b6be5f 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,9 @@ { - "name": "giftideas", + "name": "svelte-local-cloudflare-dev-working", "version": "0.0.1", "private": true, "scripts": { - "--": "should I use --ext js,ts,svelte,html,png,gif,jpg,jpeg ?", - "watch": "nodemon --ext '*' --watch src --exec \"vite build --minify false --sourcemap true\"", - "dev": "wrangler pages dev .svelte-kit/cloudflare --kv GIFTS --live-reload", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", "test": "playwright test", @@ -25,6 +23,7 @@ "eslint": "^8.32.0", "eslint-config-prettier": "^8.6.0", "eslint-plugin-svelte3": "^4.0.0", + "miniflare": "^2.11.0", "nodemon": "^2.0.20", "prettier": "^2.8.3", "prettier-plugin-svelte": "^2.9.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 677f804..8d188bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,7 @@ specifiers: eslint: ^8.32.0 eslint-config-prettier: ^8.6.0 eslint-plugin-svelte3: ^4.0.0 + miniflare: ^2.11.0 nodemon: ^2.0.20 prettier: ^2.8.3 prettier-plugin-svelte: ^2.9.0 @@ -31,6 +32,7 @@ devDependencies: eslint: 8.32.0 eslint-config-prettier: 8.6.0_eslint@8.32.0 eslint-plugin-svelte3: 4.0.0_tmo5zkisvhu6htudosk5k7m6pu + miniflare: 2.11.0 nodemon: 2.0.20 prettier: 2.8.3 prettier-plugin-svelte: 2.9.0_kdmmghgdi3ngrsq6otxkjilbry diff --git a/src/hooks.server.ts b/src/hooks.server.ts new file mode 100644 index 0000000..856a0be --- /dev/null +++ b/src/hooks.server.ts @@ -0,0 +1,11 @@ +import { dev } from '$app/environment'; +import type { Handle } from '@sveltejs/kit'; + +export const handle: Handle = async ({ event, resolve }) => { + if (dev) { + const { fallBackPlatformToMiniFlareInDev } = await import('$lib/clients/miniflare'); + // @ts-expect-error I don't know why + event.platform = await fallBackPlatformToMiniFlareInDev(event.platform); + } + return resolve(event); +}; diff --git a/src/lib/clients/miniflare.ts b/src/lib/clients/miniflare.ts new file mode 100644 index 0000000..0d7869c --- /dev/null +++ b/src/lib/clients/miniflare.ts @@ -0,0 +1,31 @@ +import { Miniflare, Log, LogLevel } from 'miniflare'; +import { dev } from '$app/environment'; + +export const fallBackPlatformToMiniFlareInDev = async (_platform: App.Platform) => { + if (!dev) return _platform; + + if (_platform) return _platform; + const mf = new Miniflare({ + log: new Log(LogLevel.INFO), + kvPersist: './kv-data', // Use filebase or in memory store + kvNamespaces: ['GIFTS'], //Declare array with NameSpaces + globalAsyncIO: true, + globalTimers: true, + globalRandom: true, + + script: ` + addEventListener("fetch", (event) => { + event.waitUntil(Promise.resolve(event.request.url)); + event.respondWith(new Response(event.request.headers.get("X-Message"))); + }); + addEventListener("scheduled", (event) => { + event.waitUntil(Promise.resolve(event.scheduledTime)); + }); + `, + }); + + const env = await mf.getBindings(); + // @ts-expect-error i don't know why + const platform: App.Platform = { env }; + return platform; +}; diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index e9aa7a4..3ac6827 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,6 +1,4 @@ import type { Actions, PageServerLoad } from './$types'; -import { redirect } from '@sveltejs/kit'; -import { env } from '$env/dynamic/private'; export const load: PageServerLoad = async ({ platform }) => { console.log({platform}); @@ -16,16 +14,11 @@ export const load: PageServerLoad = async ({ platform }) => { export const actions: Actions = { default: async ({ platform, request }) => { - const promises = []; - try { const data = await request.formData(); const hello = data.get('hello') as string; console.log({ actions: 'yes', hello }); if (hello) { - promises.push(platform?.env?.GIFTS.put('hello', hello)); + await platform?.env?.GIFTS.put('hello', hello); } - } finally { - await Promise.all(promises); } - }, }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index fb6ba9c..0cdd1af 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -8,7 +8,7 @@

Welcome to SvelteKit

Data.hello is now {data.hello}

-
+ Change it to diff --git a/wrangler.toml b/wrangler.toml index ca3f128..0e06ff7 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -1,4 +1,4 @@ -name = "giftideas" +name = "svelte-local-cloudflare-dev-working" compatibility_date = "2023-01-11" [env.dev]