diff --git a/docs/guides/migrate/devvit-singleton.md b/docs/guides/migrate/devvit-singleton.md
new file mode 100644
index 00000000..5c34a769
--- /dev/null
+++ b/docs/guides/migrate/devvit-singleton.md
@@ -0,0 +1,64 @@
+# Migrating Blocks/Mod Tools to Devvit Web
+
+This guide covers migrating traditional Devvit apps (using only Blocks or Mod Tools, without web views) to the Devvit Web setup. This is a straightforward migration that requires minimal changes.
+
+## Overview
+
+The migration primarily involves switching from `devvit.yaml` to `devvit.json` configuration. Your existing Blocks and Mod Tools code will continue to work with minimal changes.
+
+## Migration steps
+
+### 1. Create devvit.json
+
+Create a `devvit.json` file in your project root with your app configuration:
+
+```json
+{
+  "name": "your-app-name",
+  "blocks": {
+    "entry": "src/main.tsx",
+    "triggers": ["onPostCreate"]
+  }
+}
+```
+
+Replace:
+
+- `"your-app-name"` with your actual app name
+- `"src/main.tsx"` with the path to your main Blocks entry point (where you export your Devvit instance)
+- Include any triggers used in your src/main.tsx in the triggers array (or remove the parameter)
+
+### 2. Remove devvit.yaml
+
+Delete the `devvit.yaml` file from your project root. All configuration is now handled by `devvit.json`.
+
+### 3. Handle static assets
+
+If your app uses static assets (images, fonts, etc.) from an `assets` folder, you'll need to define this in update your `devvit.json` to point to these assets:
+
+```json
+{
+  "name": "your-app-name",
+  "blocks": {
+    "entry": "src/main.tsx",
+    "triggers": ["onPostCreate"]
+  },
+  "media": {
+    "dir": "assets/"
+  }
+}
+```
+
+### 4. Test your app
+
+Run your app locally to ensure everything works:
+
+```bash
+devvit playtest
+```
+
+## That's it!
+
+Your Blocks and Mod Tools code should work as intended without any other changes. The Devvit runtime handles the compatibility layer automatically.
+
+While your app will work with just these changes, we recommend exploring the additional capabilities available in Devvit Web over time.
diff --git a/docs/guides/migrate/devvit-web-experimental.md b/docs/guides/migrate/devvit-web-experimental.md
new file mode 100644
index 00000000..9fa9983c
--- /dev/null
+++ b/docs/guides/migrate/devvit-web-experimental.md
@@ -0,0 +1,190 @@
+# Migrating from Devvit Web Experimental to Devvit Web
+
+This guide will help you migrate from the experimental version of Devvit Web to the official Devvit Web setup. You must complete this migration to publish and grow your app.
+
+> **Note**: Apps can be partially migrated, you don't need to re-write everything!
+
+## How to identify if you're using the experimental version
+
+You're using Devvit Web experimental if:
+
+- Your project is based on either of these templates:
+  - https://github.com/reddit/devvit-bolt-starter-experimental
+  - https://github.com/reddit/devvit-template-react
+- You have a `defineConfig` function in `src/devvit/main.tsx`
+
+## What's changing
+
+### Before (experimental)
+
+- Uses `defineConfig` function in blocks
+- Multiple `@devvit/X` packages for different capabilities
+- Webroot-based dist outputs
+
+### After (final version)
+
+- Uses `devvit.json` for all configuration
+- Single `@devvit/web` package with submodule imports
+- Cleaner dist folder structure
+- Clear separation of client and server code
+
+## Migration steps
+
+### 1. Install the latest @devvit/web
+
+```bash
+npm install @devvit/web@latest
+```
+
+### 2. Remove individual @devvit packages
+
+Remove all individual capability packages:
+
+```bash
+npm uninstall @devvit/redis @devvit/server @devvit/client
+```
+
+### 3. Create your devvit.json
+
+Create a `devvit.json` file in your project root. This replaces all configuration previously done through `defineConfig`:
+
+```json
+{
+  "post": {
+    "client": {
+      "dir": "dist/client",
+      "entry": "dist/client/index.html"
+    }
+  },
+  "blocks": {
+    "entry": "src/devvit/main.tsx"
+  },
+  "server": {
+    "entry": "dist/server/index.cjs"
+  }
+}
+```
+
+> **Note**: Output directories no longer need to go to `webroot`. Use `dist/client` and `dist/server` for cleaner organization.
+
+### 4. Update your imports
+
+Change all imports from individual packages to the unified `@devvit/web` package:
+
+#### Server-side imports
+
+```typescript
+// Before
+import { redis } from '@devvit/redis';
+import { createServer, context } from '@devvit/server';
+
+// After
+import { redis } from '@devvit/web/server';
+import { createServer, context } from '@devvit/web/server';
+```
+
+#### Client-side imports
+
+```typescript
+// Before
+import { navigateTo } from '@devvit/client';
+
+// After
+import { navigateTo } from '@devvit/web/client';
+```
+
+### 5. Remove defineConfig from main.tsx
+
+In your `src/devvit/main.tsx`, remove the `defineConfig` function and any configuration it contained. This configuration now lives in `devvit.json`.
+
+```typescript
+// Before in src/devvit/main.tsx
+import { defineConfig } from '@devvit/server';
+
+export default defineConfig({
+  // ... configuration
+});
+
+// After
+// Simply export your Devvit instance or any Devvit.addX functions
+import { Devvit } from '@devvit/web';
+
+// Your Devvit setup code here
+export default Devvit;
+```
+
+### 6. Reorganize your project structure
+
+We recommend using a clean folder structure:
+
+```
+your-app/
+├── src/
+│   ├── client/         # Your web app (React, etc.)
+│   │   └── index.tsx
+│   ├── server/         # Your server endpoints
+│   │   └── index.ts
+│   └── devvit/         # Blocks-related code (optional now)
+│       └── main.tsx
+├── dist/               # Built assets
+│   ├── client/
+│   └── server/
+├── devvit.json
+└── package.json
+```
+
+### 7. Update your build configuration
+
+Ensure your bundler outputs to the correct directories specified in `devvit.json`:
+
+#### Server Vite config example
+
+```typescript
+export default defineConfig({
+  ssr: {
+    noExternal: true,
+  },
+  build: {
+    emptyOutDir: false,
+    ssr: 'index.ts',
+    outDir: '../../dist/server',
+    target: 'node22',
+    sourcemap: true,
+    rollupOptions: {
+      external: [...builtinModules],
+      output: {
+        format: 'cjs',
+        entryFileNames: 'index.cjs',
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});
+```
+
+#### Client Vite config example
+
+```typescript
+export default defineConfig({
+  build: {
+    outDir: '../../dist/client', // No longer webroot
+  },
+});
+```
+
+## Quick migration path
+
+For the fastest migration:
+
+1. **Start with a new template**: Clone https://github.com/reddit/devvit-template-react
+2. **Move your server endpoints**: Copy your server code to the `src/server` folder
+3. **Move your client app**: Copy your React/web code to the `src/client` folder
+4. **Update imports**: Find and replace all `@devvit/X` imports with `@devvit/web/server` or `@devvit/web/client`
+5. **Configure devvit.json**: Set up your entrypoints as shown above and update your app name
+6. **Test locally**: Run `npm run dev` to ensure everything works
+
+## Additional considerations
+
+- All capabilities previously available through the experimental API are still available in the final version
+- The context object and Redis access work the same way, just with different import paths
+- Your app logic can still be split between client and server as before
diff --git a/docs/guides/migrate/inline-web-view.md b/docs/guides/migrate/inline-web-view.md
new file mode 100644
index 00000000..e1700e0f
--- /dev/null
+++ b/docs/guides/migrate/inline-web-view.md
@@ -0,0 +1,202 @@
+# Migrating from useWebView to Devvit Web
+
+This guide will migrate your legacy webview implementation (using useWebView inside of Blocks) to the official Devvit Web setup.
+
+:::note
+Apps can be partially migrated, you don't need to re-write everything!
+:::
+
+# Before
+
+- Use postMessage for message passing
+- App logic is isomorphic (server/client) in Blocks
+- No client effects available
+
+# After
+
+- No postMessage required
+- Use web native fetch() to server endpoints directly
+- App logic is either on the client, or the server, with clear deliniation
+- Client effects are available directly from web views
+
+## Setting up devvit.json
+
+The first thing you need to do is setup `devvit.json`.
+
+Schema here: https://developers.reddit.com/schema/config-file.v1.json
+
+`devvit.json` supports all capabilities previously available in the `Devvit` singleton, e.g. `Devvit.addCustomPostType()`. For the purposes of this guide, only the post rendering logic will be migrated.
+
+### Understanding entrypoints
+
+Your `devvit.json` must have entrypoints that point to **outputs** of your code. It is assumed that you have installed a bundler or can otherwise prepare static assets to appear in your dist folders.
+
+```js
+{
+  "post": {
+    "client": { // The output of your client app, probably /src/webroot
+      "dir": "dist/client",
+      "entry": "dist/client/index.html"
+    }
+  },
+  "blocks": { // point to where you export Devvit singleton, probably src/main.tsx
+    "entry": "src/devvit/main.tsx"
+  },
+  "server": { // new folder which will contain your Node server
+    "entry": "dist/server/index.cjs"
+  },
+}
+```
+
+> You'll notice that the `blocks` entrypoint points to your TypeScript source file (`src/devvit/main.tsx`). This is because the Devvit CLI handles bundling for Blocks automatically. For your `client` and `server` entrypoints, however, you are responsible for bundling your code and pointing to the final output files in your `dist` directory.
+
+### Building your client and server
+
+The `devvit.json` configuration for `client` and `server` points to files in a `dist` directory. This means you're responsible for building your web and server assets. You can use any bundler you like, such as `vite`.
+
+For example, your `package.json` might include scripts to output your assets to the `dist` folder.
+
+Sample server vite config
+
+```ts title="src/server/vite.config.ts
+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,
+      },
+    },
+  },
+});
+```
+
+Sample client Vite config (for React)
+
+```ts title="src/client/vite.config.ts
+import { defineConfig } from 'vite';
+import tailwind from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwind()],
+  build: {
+    outDir: '../../dist/client',
+    sourcemap: true,
+    chunkSizeWarningLimit: 1500,
+  },
+});
+```
+
+## Setting up your server endpoints
+
+You can use any Node server for your server endpoints. This guide will use [Express](https://expressjs.com/).
+
+1. Install Express
+
+```
+npm i express
+```
+
+2. Create a server index file
+
+```ts title='src/server/index.ts'
+import express from 'express';
+// The `@devvit/server` package provides the tools to create a server,
+// and gives you access to the request context.
+import { createServer, context, getServerPort, redis } from '@devvit/web/server';
+
+const app = express();
+
+// Middleware for JSON body parsing
+app.use(express.json());
+// Middleware for URL-encoded body parsing
+app.use(express.urlencoded({ extended: true }));
+// Middleware for plain text body parsing
+app.use(express.text());
+
+const router = express.Router();
+
+// The `context` object is automatically populated with useful information,
+// like the current user's ID. Devvit's services, like redis, are also
+// available via named imports from `@devvit/server`.
+router.get<{ postId: string }, { message: string }>(
+  '/api/hello',
+  async (_req, res): Promise<void> => {
+    const { userId } = context;
+    res.status(200).json({
+      message: `Hello ${userId}`,
+    });
+  }
+);
+
+router.get('/api/init', async (_req, res): Promise<void> => {
+  res.json({ initialState: await redis.get('initialState') });
+});
+
+// Use router middleware
+app.use(router);
+
+// Get port from environment variable with fallback
+const port = getServerPort();
+
+const server = createServer(app);
+server.on('error', (err) => console.error(`server error; ${err.stack}`));
+server.listen(port, () => console.log(`http://localhost:${port}`));
+```
+
+### Calling your server endpoints
+
+Now
+
+Instead of using `postMessage`, your client-side code can now directly fetch the initial state from the `/api/init` endpoint we defined in the server.
+
+```ts title=/src/client/app.ts
+const res = await fetch('/api/init');
+const data = await res.json();
+console.log(data.initialState); // Logs the state from Redis
+```
+
+## Client effects
+
+Previously, client effects were not available to your webview app. You had to pass a custom postMessage and handle that message in Blocks. Now, all client effects are available directly in the web-view through `@devvit/client`.
+
+Before
+
+```ts title=/src/devvit/main.tsx
+const BlocksComponent = () => {
+  const wv = useWebView({
+    onMessage: (message) => {
+      if (message.type === 'navigate_to') {
+        ui.navigateTo(message.data.destination);
+      }
+    },
+  });
+};
+```
+
+```js title=webroot/app.js
+window.postMessage({ type: 'navigate_to', destination: 'reddit.com' });
+```
+
+Now
+
+```ts title=client/app.ts
+import { navigateTo } from '@devvit/web/client';
+
+navigateTo('reddit.com');
+```
diff --git a/sidebars.ts b/sidebars.ts
index 80bc6f17..48617373 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -294,6 +294,9 @@ const sidebars: SidebarsConfig = {
       type: "category",
       label: "Migration Guides",
       items: [
+        "guides/migrate/devvit-singleton",
+        "guides/migrate/devvit-web-experimental",
+        "guides/migrate/inline-web-view",
         {
           type: "category",
           label: "Splash Screens",
diff --git a/versioned_docs/version-0.12/guides/migrate/devvit-singleton.md b/versioned_docs/version-0.12/guides/migrate/devvit-singleton.md
new file mode 100644
index 00000000..5c34a769
--- /dev/null
+++ b/versioned_docs/version-0.12/guides/migrate/devvit-singleton.md
@@ -0,0 +1,64 @@
+# Migrating Blocks/Mod Tools to Devvit Web
+
+This guide covers migrating traditional Devvit apps (using only Blocks or Mod Tools, without web views) to the Devvit Web setup. This is a straightforward migration that requires minimal changes.
+
+## Overview
+
+The migration primarily involves switching from `devvit.yaml` to `devvit.json` configuration. Your existing Blocks and Mod Tools code will continue to work with minimal changes.
+
+## Migration steps
+
+### 1. Create devvit.json
+
+Create a `devvit.json` file in your project root with your app configuration:
+
+```json
+{
+  "name": "your-app-name",
+  "blocks": {
+    "entry": "src/main.tsx",
+    "triggers": ["onPostCreate"]
+  }
+}
+```
+
+Replace:
+
+- `"your-app-name"` with your actual app name
+- `"src/main.tsx"` with the path to your main Blocks entry point (where you export your Devvit instance)
+- Include any triggers used in your src/main.tsx in the triggers array (or remove the parameter)
+
+### 2. Remove devvit.yaml
+
+Delete the `devvit.yaml` file from your project root. All configuration is now handled by `devvit.json`.
+
+### 3. Handle static assets
+
+If your app uses static assets (images, fonts, etc.) from an `assets` folder, you'll need to define this in update your `devvit.json` to point to these assets:
+
+```json
+{
+  "name": "your-app-name",
+  "blocks": {
+    "entry": "src/main.tsx",
+    "triggers": ["onPostCreate"]
+  },
+  "media": {
+    "dir": "assets/"
+  }
+}
+```
+
+### 4. Test your app
+
+Run your app locally to ensure everything works:
+
+```bash
+devvit playtest
+```
+
+## That's it!
+
+Your Blocks and Mod Tools code should work as intended without any other changes. The Devvit runtime handles the compatibility layer automatically.
+
+While your app will work with just these changes, we recommend exploring the additional capabilities available in Devvit Web over time.
diff --git a/versioned_docs/version-0.12/guides/migrate/devvit-web-experimental.md b/versioned_docs/version-0.12/guides/migrate/devvit-web-experimental.md
new file mode 100644
index 00000000..9fa9983c
--- /dev/null
+++ b/versioned_docs/version-0.12/guides/migrate/devvit-web-experimental.md
@@ -0,0 +1,190 @@
+# Migrating from Devvit Web Experimental to Devvit Web
+
+This guide will help you migrate from the experimental version of Devvit Web to the official Devvit Web setup. You must complete this migration to publish and grow your app.
+
+> **Note**: Apps can be partially migrated, you don't need to re-write everything!
+
+## How to identify if you're using the experimental version
+
+You're using Devvit Web experimental if:
+
+- Your project is based on either of these templates:
+  - https://github.com/reddit/devvit-bolt-starter-experimental
+  - https://github.com/reddit/devvit-template-react
+- You have a `defineConfig` function in `src/devvit/main.tsx`
+
+## What's changing
+
+### Before (experimental)
+
+- Uses `defineConfig` function in blocks
+- Multiple `@devvit/X` packages for different capabilities
+- Webroot-based dist outputs
+
+### After (final version)
+
+- Uses `devvit.json` for all configuration
+- Single `@devvit/web` package with submodule imports
+- Cleaner dist folder structure
+- Clear separation of client and server code
+
+## Migration steps
+
+### 1. Install the latest @devvit/web
+
+```bash
+npm install @devvit/web@latest
+```
+
+### 2. Remove individual @devvit packages
+
+Remove all individual capability packages:
+
+```bash
+npm uninstall @devvit/redis @devvit/server @devvit/client
+```
+
+### 3. Create your devvit.json
+
+Create a `devvit.json` file in your project root. This replaces all configuration previously done through `defineConfig`:
+
+```json
+{
+  "post": {
+    "client": {
+      "dir": "dist/client",
+      "entry": "dist/client/index.html"
+    }
+  },
+  "blocks": {
+    "entry": "src/devvit/main.tsx"
+  },
+  "server": {
+    "entry": "dist/server/index.cjs"
+  }
+}
+```
+
+> **Note**: Output directories no longer need to go to `webroot`. Use `dist/client` and `dist/server` for cleaner organization.
+
+### 4. Update your imports
+
+Change all imports from individual packages to the unified `@devvit/web` package:
+
+#### Server-side imports
+
+```typescript
+// Before
+import { redis } from '@devvit/redis';
+import { createServer, context } from '@devvit/server';
+
+// After
+import { redis } from '@devvit/web/server';
+import { createServer, context } from '@devvit/web/server';
+```
+
+#### Client-side imports
+
+```typescript
+// Before
+import { navigateTo } from '@devvit/client';
+
+// After
+import { navigateTo } from '@devvit/web/client';
+```
+
+### 5. Remove defineConfig from main.tsx
+
+In your `src/devvit/main.tsx`, remove the `defineConfig` function and any configuration it contained. This configuration now lives in `devvit.json`.
+
+```typescript
+// Before in src/devvit/main.tsx
+import { defineConfig } from '@devvit/server';
+
+export default defineConfig({
+  // ... configuration
+});
+
+// After
+// Simply export your Devvit instance or any Devvit.addX functions
+import { Devvit } from '@devvit/web';
+
+// Your Devvit setup code here
+export default Devvit;
+```
+
+### 6. Reorganize your project structure
+
+We recommend using a clean folder structure:
+
+```
+your-app/
+├── src/
+│   ├── client/         # Your web app (React, etc.)
+│   │   └── index.tsx
+│   ├── server/         # Your server endpoints
+│   │   └── index.ts
+│   └── devvit/         # Blocks-related code (optional now)
+│       └── main.tsx
+├── dist/               # Built assets
+│   ├── client/
+│   └── server/
+├── devvit.json
+└── package.json
+```
+
+### 7. Update your build configuration
+
+Ensure your bundler outputs to the correct directories specified in `devvit.json`:
+
+#### Server Vite config example
+
+```typescript
+export default defineConfig({
+  ssr: {
+    noExternal: true,
+  },
+  build: {
+    emptyOutDir: false,
+    ssr: 'index.ts',
+    outDir: '../../dist/server',
+    target: 'node22',
+    sourcemap: true,
+    rollupOptions: {
+      external: [...builtinModules],
+      output: {
+        format: 'cjs',
+        entryFileNames: 'index.cjs',
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});
+```
+
+#### Client Vite config example
+
+```typescript
+export default defineConfig({
+  build: {
+    outDir: '../../dist/client', // No longer webroot
+  },
+});
+```
+
+## Quick migration path
+
+For the fastest migration:
+
+1. **Start with a new template**: Clone https://github.com/reddit/devvit-template-react
+2. **Move your server endpoints**: Copy your server code to the `src/server` folder
+3. **Move your client app**: Copy your React/web code to the `src/client` folder
+4. **Update imports**: Find and replace all `@devvit/X` imports with `@devvit/web/server` or `@devvit/web/client`
+5. **Configure devvit.json**: Set up your entrypoints as shown above and update your app name
+6. **Test locally**: Run `npm run dev` to ensure everything works
+
+## Additional considerations
+
+- All capabilities previously available through the experimental API are still available in the final version
+- The context object and Redis access work the same way, just with different import paths
+- Your app logic can still be split between client and server as before
diff --git a/versioned_docs/version-0.12/guides/migrate/inline-web-view.md b/versioned_docs/version-0.12/guides/migrate/inline-web-view.md
new file mode 100644
index 00000000..e1700e0f
--- /dev/null
+++ b/versioned_docs/version-0.12/guides/migrate/inline-web-view.md
@@ -0,0 +1,202 @@
+# Migrating from useWebView to Devvit Web
+
+This guide will migrate your legacy webview implementation (using useWebView inside of Blocks) to the official Devvit Web setup.
+
+:::note
+Apps can be partially migrated, you don't need to re-write everything!
+:::
+
+# Before
+
+- Use postMessage for message passing
+- App logic is isomorphic (server/client) in Blocks
+- No client effects available
+
+# After
+
+- No postMessage required
+- Use web native fetch() to server endpoints directly
+- App logic is either on the client, or the server, with clear deliniation
+- Client effects are available directly from web views
+
+## Setting up devvit.json
+
+The first thing you need to do is setup `devvit.json`.
+
+Schema here: https://developers.reddit.com/schema/config-file.v1.json
+
+`devvit.json` supports all capabilities previously available in the `Devvit` singleton, e.g. `Devvit.addCustomPostType()`. For the purposes of this guide, only the post rendering logic will be migrated.
+
+### Understanding entrypoints
+
+Your `devvit.json` must have entrypoints that point to **outputs** of your code. It is assumed that you have installed a bundler or can otherwise prepare static assets to appear in your dist folders.
+
+```js
+{
+  "post": {
+    "client": { // The output of your client app, probably /src/webroot
+      "dir": "dist/client",
+      "entry": "dist/client/index.html"
+    }
+  },
+  "blocks": { // point to where you export Devvit singleton, probably src/main.tsx
+    "entry": "src/devvit/main.tsx"
+  },
+  "server": { // new folder which will contain your Node server
+    "entry": "dist/server/index.cjs"
+  },
+}
+```
+
+> You'll notice that the `blocks` entrypoint points to your TypeScript source file (`src/devvit/main.tsx`). This is because the Devvit CLI handles bundling for Blocks automatically. For your `client` and `server` entrypoints, however, you are responsible for bundling your code and pointing to the final output files in your `dist` directory.
+
+### Building your client and server
+
+The `devvit.json` configuration for `client` and `server` points to files in a `dist` directory. This means you're responsible for building your web and server assets. You can use any bundler you like, such as `vite`.
+
+For example, your `package.json` might include scripts to output your assets to the `dist` folder.
+
+Sample server vite config
+
+```ts title="src/server/vite.config.ts
+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,
+      },
+    },
+  },
+});
+```
+
+Sample client Vite config (for React)
+
+```ts title="src/client/vite.config.ts
+import { defineConfig } from 'vite';
+import tailwind from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwind()],
+  build: {
+    outDir: '../../dist/client',
+    sourcemap: true,
+    chunkSizeWarningLimit: 1500,
+  },
+});
+```
+
+## Setting up your server endpoints
+
+You can use any Node server for your server endpoints. This guide will use [Express](https://expressjs.com/).
+
+1. Install Express
+
+```
+npm i express
+```
+
+2. Create a server index file
+
+```ts title='src/server/index.ts'
+import express from 'express';
+// The `@devvit/server` package provides the tools to create a server,
+// and gives you access to the request context.
+import { createServer, context, getServerPort, redis } from '@devvit/web/server';
+
+const app = express();
+
+// Middleware for JSON body parsing
+app.use(express.json());
+// Middleware for URL-encoded body parsing
+app.use(express.urlencoded({ extended: true }));
+// Middleware for plain text body parsing
+app.use(express.text());
+
+const router = express.Router();
+
+// The `context` object is automatically populated with useful information,
+// like the current user's ID. Devvit's services, like redis, are also
+// available via named imports from `@devvit/server`.
+router.get<{ postId: string }, { message: string }>(
+  '/api/hello',
+  async (_req, res): Promise<void> => {
+    const { userId } = context;
+    res.status(200).json({
+      message: `Hello ${userId}`,
+    });
+  }
+);
+
+router.get('/api/init', async (_req, res): Promise<void> => {
+  res.json({ initialState: await redis.get('initialState') });
+});
+
+// Use router middleware
+app.use(router);
+
+// Get port from environment variable with fallback
+const port = getServerPort();
+
+const server = createServer(app);
+server.on('error', (err) => console.error(`server error; ${err.stack}`));
+server.listen(port, () => console.log(`http://localhost:${port}`));
+```
+
+### Calling your server endpoints
+
+Now
+
+Instead of using `postMessage`, your client-side code can now directly fetch the initial state from the `/api/init` endpoint we defined in the server.
+
+```ts title=/src/client/app.ts
+const res = await fetch('/api/init');
+const data = await res.json();
+console.log(data.initialState); // Logs the state from Redis
+```
+
+## Client effects
+
+Previously, client effects were not available to your webview app. You had to pass a custom postMessage and handle that message in Blocks. Now, all client effects are available directly in the web-view through `@devvit/client`.
+
+Before
+
+```ts title=/src/devvit/main.tsx
+const BlocksComponent = () => {
+  const wv = useWebView({
+    onMessage: (message) => {
+      if (message.type === 'navigate_to') {
+        ui.navigateTo(message.data.destination);
+      }
+    },
+  });
+};
+```
+
+```js title=webroot/app.js
+window.postMessage({ type: 'navigate_to', destination: 'reddit.com' });
+```
+
+Now
+
+```ts title=client/app.ts
+import { navigateTo } from '@devvit/web/client';
+
+navigateTo('reddit.com');
+```
diff --git a/versioned_sidebars/version-0.12-sidebars.json b/versioned_sidebars/version-0.12-sidebars.json
index 73bdc650..e218e8e1 100644
--- a/versioned_sidebars/version-0.12-sidebars.json
+++ b/versioned_sidebars/version-0.12-sidebars.json
@@ -283,6 +283,9 @@
       "type": "category",
       "label": "Migration Guides",
       "items": [
+        "guides/migrate/devvit-singleton",
+        "guides/migrate/devvit-web-experimental",
+        "guides/migrate/inline-web-view",
         {
           "type": "category",
           "label": "Splash Screens",