migrate to latest webbit

devvit.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://developers.reddit.com/schema/config-file.v1.json",
+  "name": "YOUR_APP_NAME",
+  "post": {
+    "client": {
+      "dir": "dist/client",
+      "entry": "dist/client/index.html"
+    },
+    "create": {
+      "onInstall": false,
+      "menu": {
+        "label": "[Bolt] Word Guesser"
+      }
+    }
+  },
+  "server": {
+    "entry": "dist/server/index.cjs"
+  },
+  "media": {},
+  "blocks": {
+    "entry": "src/devvit/main.tsx"
+  }
+}

package.json

@@ -6,28 +6,30 @@
   "type": "module",
   "scripts": {
     "build:client": "cd src/client && vite build",
+    "build:server": "cd src/server && vite build",
     "check": "npm run type-check && npm run lint:fix && npm run prettier",
-    "devvit:init": "devvit upload --copy-paste && touch .initialized",
-    "deploy": "npm run build:client && devvit upload --copy-paste",
+    "deploy": "npm run build:client && npm run build:server && devvit upload --copy-paste",
     "dev": "node setup-devvit.cjs",
-    "dev:all": "concurrently -p \"[{name}]\" -n \"VITE,DEVVIT,GAME\" -c \"blue,green,magenta\" \"npm run dev:vite\" \"npm run dev:devvit\" \"npm run dev:client\" --restart-tries 2",
+    "dev:all": "concurrently -p \"[{name}]\" -n \"VITE,DEVVIT,CLIENT,SERVER\" -c \"blue,green,magenta,yellow\" \"npm run dev:vite\" \"npm run dev:devvit\" \"npm run dev:client\" \"npm run dev:server\" --restart-tries 2",
     "dev:client": "cd src/client && vite build --watch",
     "dev:devvit": "devvit playtest YOUR_SUBREDDIT_NAME",
+    "dev:server": "cd src/server && vite build --watch",
     "dev:vite": "cd src/client && vite --port 7474",
+    "devvit:init": "devvit upload --copy-paste && touch .initialized",
     "lint": "eslint ./src",
     "lint:fix": "eslint --fix ./src",
     "login": "devvit login --copy-paste",
     "prettier": "prettier-package-json --write ./package.json && prettier --write .",
     "type-check": "tsc --build"
   },
   "dependencies": {
-    "@devvit/client": "0.11.16",
-    "@devvit/public-api": "0.11.16",
-    "@devvit/server": "0.11.16",
-    "@devvit/redis": "0.11.16",
+    "@devvit/client": "0.11.17-next-2025-06-11-9c40662f8.0",
+    "@devvit/public-api": "0.11.17-next-2025-06-11-9c40662f8.0",
+    "@devvit/redis": "0.11.17-next-2025-06-11-9c40662f8.0",
+    "@devvit/server": "0.11.17-next-2025-06-11-9c40662f8.0",
     "@tweenjs/tween.js": "18.6.4",
     "clsx": "2.1.1",
-    "devvit": "0.11.16",
+    "devvit": "0.11.17-next-2025-06-11-9c40662f8.0",
     "express": "5.1.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",

setup-devvit.cjs

@@ -3,7 +3,6 @@ const fs = require('fs');
 const path = require('path');
 const { execSync, exec } = require('child_process');
 const os = require('os');
-const yaml = require('yaml');
 
 function generateRandomSuffix(length) {
   const letters = 'abcdefghijklmnopqrstuvwxyz';
@@ -15,14 +14,14 @@ function generateRandomSuffix(length) {
 }
 
 function updateDevvitName() {
-  const devvitYamlPath = path.join(process.cwd(), 'devvit.yaml');
-  const content = fs.readFileSync(devvitYamlPath, 'utf8');
-  const parsedYaml = yaml.parse(content);
+  const devvitJsonPath = path.join(process.cwd(), 'devvit.json');
+  const content = fs.readFileSync(devvitJsonPath, 'utf8');
+  const parsedJson = JSON.parse(content);
 
-  if (parsedYaml.name === 'YOUR_APP_NAME') {
+  if (parsedJson.name === 'YOUR_APP_NAME') {
     const suffix = generateRandomSuffix(6);
-    parsedYaml.name = `bolt-${suffix}`;
-    fs.writeFileSync(devvitYamlPath, yaml.stringify(parsedYaml));
+    parsedJson.name = `bolt-${suffix}`;
+    fs.writeFileSync(devvitJsonPath, JSON.stringify(parsedJson, null, 2));
     console.log(`Updated app name to bolt-${suffix}`);
   }
 }
@@ -79,7 +78,7 @@ async function runChecks() {
 
 async function main() {
   try {
-    // Step 1: Update devvit.yaml name
+    // Step 1: Update devvit.json name
     updateDevvitName();
 
     // Step 2: Run checks

src/client/Game.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Keyboard } from './Keyboard';
 import { LetterState, CheckResponse } from '../shared/types/game';
 import packageJson from '../../package.json';
+import SuperSnoo from './assets/flyingSnoo.png';
 
 const WORD_LENGTH = 5;
 const MAX_GUESSES = 6;
@@ -283,8 +284,10 @@ export const Game: React.FC = () => {
           {grid && <pre className="text-xs whitespace-pre-wrap">{grid}</pre>}
         </div>
       )}
-      <header className="w-full max-w-md px-2">
+      <header className="w-full max-w-md px-2 flex items-center justify-center gap-2">
+        <img src={SuperSnoo} alt="Super Snoo" className="w-8 h-8" />
         <h1 className="text-4xl font-bold tracking-wider my-2">Word Guesser</h1>
+        <img src={SuperSnoo} alt="Super Snoo" className="w-8 h-8" />
       </header>
 
       <div id="board" className="mb-4">

src/client/game.css

@@ -1,7 +1,6 @@
 body {
   font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
   text-align: center;
-  max-width: 500px;
   margin: 0px auto;
   background-color: #121213; /* Added a dark background for better visibility */
   color: #fff; /* Added default text color */

src/client/module.d.ts

@@ -0,0 +1,9 @@
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}

src/client/tsconfig.json

@@ -4,12 +4,12 @@
   "compilerOptions": {
     "lib": ["DOM", "ES2023", "esnext.disposable"],
 
-    "outDir": "../../dist/client",
+    "outDir": "../../dist/types/client",
 
     // React
     "jsx": "react-jsx",
 
-    "tsBuildInfoFile": "../../dist/client/tsconfig.tsbuildinfo"
+    "tsBuildInfoFile": "../../dist/types/client/tsconfig.tsbuildinfo"
   },
   // https://github.com/Microsoft/TypeScript/issues/25636
   "include": ["**/*", "**/*.json", "../../package.json"],

src/client/vite.config.ts

@@ -6,8 +6,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [react(), tailwind()],
   build: {
-    outDir: '../../webroot',
-    emptyOutDir: true,
+    outDir: '../../dist/client',
     sourcemap: true,
     chunkSizeWarningLimit: 1500,
   },

src/devvit/main.tsx

@@ -1,22 +1,9 @@
 import { Devvit, Post } from '@devvit/public-api';
-
-// Side effect import to bundle the server. The /index is required for server splitting.
-import '../server/index';
-import { defineConfig } from '@devvit/server';
 import { postConfigNew } from '../server/core/post';
 
-defineConfig({
-  name: '[Bolt] Word Guesser',
-  entry: 'index.html',
-  height: 'tall',
-  menu: { enable: false },
-  // TODO: Cannot use without ability to pass in more metadata
-  // menu: {
-  //   enable: true,
-  //   label: 'New Word Guesser Post',
-  //   postTitle: 'Word Guesser',
-  //   preview: <Preview />,
-  // },
+Devvit.configure({
+  redis: true,
+  redditAPI: true,
 });
 
 export const Preview: Devvit.BlockComponent<{ text?: string }> = ({ text = 'Loading...' }) => {

src/devvit/tsconfig.json

@@ -8,9 +8,9 @@
 
     "rootDir": "..",
 
-    "outDir": "../../dist",
+    "outDir": "../../dist/types/devvit",
 
-    "tsBuildInfoFile": "../../dist/tsconfig.tsbuildinfo",
+    "tsBuildInfoFile": "../../dist/types/devvit/tsconfig.tsbuildinfo",
 
     // Devvit.
     "jsx": "react",

src/server/tsconfig.json

@@ -8,9 +8,9 @@
 
     "rootDir": ".",
 
-    "outDir": "../../dist",
+    "outDir": "../../dist/types/server",
 
-    "tsBuildInfoFile": "../../dist/tsconfig.tsbuildinfo"
+    "tsBuildInfoFile": "../../dist/types/server/tsconfig.tsbuildinfo"
   },
   // https://github.com/Microsoft/TypeScript/issues/25636
   "include": ["**/*", "**/*.json", "../../package.json"],

src/server/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import { builtinModules } from 'node:module';
+
+export default defineConfig({
+  ssr: {
+    noExternal: true,
+  },
+  build: {
+    ssr: 'index.ts',
+    outDir: '../../dist/server',
+    target: 'node22',
+    sourcemap: true,
+    rollupOptions: {
+      external: [...builtinModules],
+
+      output: {
+        format: 'cjs',
+        entryFileNames: 'index.cjs',
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});

src/shared/tsconfig.json

@@ -4,9 +4,9 @@
   "compilerOptions": {
     "lib": ["WebWorker", "ES2023"],
 
-    "outDir": "../../dist/shared",
+    "outDir": "../../dist/types/shared",
 
-    "tsBuildInfoFile": "../../dist/shared/tsconfig.tsbuildinfo"
+    "tsBuildInfoFile": "../../dist/types/shared/tsconfig.tsbuildinfo"
   },
   // https://github.com/Microsoft/TypeScript/issues/25636
   "include": ["**/*", "**/*.json"],