feat: local workerd dev setup and guide

Author: NamesMT

README.md

@@ -140,6 +140,18 @@ To develop all apps and packages, run the following command:
 
 For local development environment variables / secrets, create a copy of `.env.dev` to `.env.dev.local`.
 
+#### Wrangler / Cloudflare Workers
+
+Guide to setup local development for Cloudflare `workerd` runtime testing:
+* (Optional) Run the convex dev server if you use convex.
+* Config `wrangler.jsonc`, specfically, the `vars` block, so that it properly targets the local env.
+* (Optional) Config [`apps/frontend/.env.workerd.dev`](apps/frontend/.env.workerd.dev) if you use convex or use different ip/port.
+* Build a new static dist for local dev:
+  * Start the local `backend` server
+  * Run `build:workerdLocal` script for `frontend`.
+* Run `pnpm dlx wrangler dev` to start wrangler dev server.
+  * `workerd` does not work with Alpine Linux, so if you use the included Dev Container, change the base image to some other distro.
+
 ### Deploy
 
 * You can add your custom deploy instructions in `deploy` script and `scripts/deploy.sh` in each app, it could be a full script that deploys to a platform, or necessary actions before for some platform integration deploys it, `frontend` will only start [build and deploy after all backends are deployed](./apps/frontend/turbo.json), to have context for SSG.

apps/frontend/.env.workerd.dev

@@ -0,0 +1,3 @@
+NUXT_PUBLIC_FRONTEND_URL=https://127.0.0.1:3310
+NUXT_PUBLIC_BACKEND_URL=https://127.0.0.1:3310
+NUXT_PUBLIC_CONVEX_URL=

apps/frontend/nuxt.config.ts

@@ -6,7 +6,13 @@ import { config } from 'dotenv'
 import { bundledLanguagesInfo } from 'shiki/bundle/full'
 import optimizeExclude from 'vite-plugin-optimize-exclude'
 
-if (import.meta.env.NODE_ENV === 'development') {
+import.meta.env.TARGET ??= import.meta.env.NODE_ENV
+
+if (import.meta.env.TARGET === 'workerdLocal') {
+  config({ path: ['.env.workerd.dev.local', '.env.workerd.dev'] })
+  import.meta.env.NUXT_PUBLIC_CONVEX_URL ||= (await getConvexEnvs()).CONVEX_URL || ''
+}
+else if (import.meta.env.TARGET === 'development') {
   config({ path: ['.env.dev.local', '.env.dev'] })
   import.meta.env.NUXT_PUBLIC_CONVEX_URL ||= (await getConvexEnvs()).CONVEX_URL || ''
 }

apps/frontend/package.json

@@ -9,6 +9,7 @@
     "quickcheck": "pnpm run lint && pnpm run test:types",
     "dev": "nuxt dev",
     "build": "nuxt generate",
+    "build:workerdLocal": "export TARGET=workerdLocal && nuxt generate",
     "deploy": "pnpm run build && sh scripts/deploy.sh",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",

wrangler.jsonc

@@ -16,6 +16,11 @@
     "directory": "./apps/frontend/.output/public/"
   },
   "upload_source_maps": true,
+  "dev": {
+    "ip": "127.0.0.1",
+    "port": 3310,
+    "local_protocol": "https"
+  },
 
   /**
    * Smart Placement
@@ -46,6 +51,14 @@
     "KINDE_REDIRECT_URI": "https://starter-monorepo.isthe.top/api/auth/callback",
     "FRONTEND_URL": "https://starter-monorepo.isthe.top",
     "CONVEX_URL": "https://amiable-octopus-367.convex.cloud",
+
+    // The block below is intended for local development
+    // "KINDE_DOMAIN": "https://topnames-dev.eu.kinde.com",
+    // "KINDE_LOGOUT_REDIRECT_URI": "https://127.0.0.1:3310",
+    // "KINDE_REDIRECT_URI": "https://127.0.0.1:3310/api/auth/callback",
+    // "FRONTEND_URL": "https://127.0.0.1:3310",
+    // "CONVEX_URL": "https://dazzling-panther-382.convex.cloud",
+
     "NO_COLOR": "true"
   },