Devvit + Nuxt + Phaser Starter Kit: Build Immersive Reddit Games

This starter kit provides a powerful foundation for building immersive games directly on Reddit. It explores a novel approach to application development on Reddit's developer platform.

• Devvit: Empowers you to build and deploy immersive games directly on Reddit.
• Nuxt 3: Leveraged for its powerful Vite-based compilation to create sleek WebViews for your game.
• Phaser 3: A feature-rich 2D game engine providing the core tools for dynamic gameplay.
• TypeScript: Ensures a robust, maintainable, and less error-prone codebase through strong typing.

Getting Started

Before all else, you will need to create a private subreddit on Reddit.com. This will be where you do your own development and testing.

AI Development

This template features seamless integration with AI-powered tools, facilitating rapid prototyping and development of Devvit applications.

bolt.new

bolt.new streamlines the web development process by enabling users to build, run, and deploy applications directly from their browsers using AI. Click the button below to open this template directly in bolt.new:

Firebase Studio

Firebase Studio provides a cloud-based, AI-enhanced IDE for building and shipping full-stack apps, with a particular focus on Firebase services. Click the button below to open this template directly in Firebase Studio:

Local Development

You can also set up and run this project locally on your machine.

Prerequisites

Install Node.js: Download Node.js, preferably with pnpm and install it.

OR

Get Lando: Download and install Lando to streamline your development setup. This template's included Landofile provides a consistent, pre-configured environment right out of the box.

Note: Lando provisions an isolated development environment, purpose-built for your project. This means you must prefix all commands with lando super-command. For example, lando pnpm run dev:all

Setup

1. Create your project from this template
2. Clone your project's repo to your computer:

   git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
   cd YOUR_REPO
   # Install dependencies and setup Devvit
   pnpm install && pnpm run dev

   Important: Replace YOUR_USERNAME with your GitHub username and YOUR_REPO with the name of the repository you created in step 1.

Testing

1. Update the subreddit name in package.json: Find the devvit:playtest script and replace YOUR_SUBREDDIT_NAME with the name of the subreddit you created when Getting Started.
2. Upload: Run pnpm run deploy and follow the given instructions.
3. Playtest: Run pnpm run devvit:playtest to playtest your application in production by going to your subreddit.
4. Create Post: You should see a subreddit menu action called "New Phaser Starter Post" to create your post.

Cursor

This template comes with a pre-configured Cursor environment. To get started, download cursor and enable the devvit-mcp.

Command Glossary

• pnpm run dev: Starts a development server where you can develop your application live on Reddit.
• pnpm run deploy: Uploads a new version of your app
• pnpm run devvit:playtest: Test your app in production via your subreddit
• pnpm run check: Type checks, lints, and prettifies your app

Reminder: Prefix all commands with lando if developing locally with Lando. For example, lando pnpm run devvit:playtest

Credits

Special thanks to the creators and contributors of these awesome, inspirational repos:

• Devvit Phaser Starter Experimental
• Phaser Vue TypeScript Template
• Devvit-Phaser 🎮