use @colyseus/playground at root by default 🎉

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-colyseus-app",
-  "version": "0.15.10",
+  "version": "0.15.11",
   "description": "npm init template for bootstrapping an empty Colyseus project",
   "main": "lib/index.js",
   "bin": {

templates/esm/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@colyseus/monitor": "^0.15.0",
+    "@colyseus/playground": "^0.15.3",
     "@colyseus/tools": "^0.15.0",
     "@colyseus/ws-transport": "^0.15.0",
     "colyseus": "^0.15.0",

templates/esm/src/app.config.js

@@ -1,5 +1,6 @@
 import config from "@colyseus/tools";
 import { monitor } from "@colyseus/monitor";
+import { playground } from "@colyseus/playground";
 
 /**
  * Import your Room files
@@ -18,11 +19,20 @@ export default config.default({
     initializeExpress: (app) => {
         /**
          * Bind your custom express routes here:
+         * Read more: https://expressjs.com/en/starter/basic-routing.html
          */
-        app.get("/", (req, res) => {
+        app.get("/hello_world", (req, res) => {
             res.send("It's time to kick ass and chew bubblegum!");
         });
 
+        /**
+         * Use @colyseus/playground
+         * (It is not recommended to expose this route in a production environment)
+         */
+        if (process.env.NODE_ENV !== "production") {
+            app.use("/", playground);
+        }
+
         /**
          * Bind @colyseus/monitor
          * It is recommended to protect this route with a password.

templates/esm/src/rooms/MyRoom.js

@@ -2,8 +2,10 @@ import { Room } from "@colyseus/core";
 import { MyRoomState } from "./schema/MyRoomState.js";
 
 export class MyRoom extends Room {
+  maxClients = 4;
 
   onCreate (options) {
+
     this.setState(new MyRoomState());
 
     this.onMessage("type", (client, message) => {

templates/javascript/package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@colyseus/tools": "^0.15.0",
     "@colyseus/monitor": "^0.15.0",
+    "@colyseus/playground": "^0.15.3",
     "colyseus": "^0.15.0",
     "express": "^4.18.2"
   }

templates/javascript/src/app.config.js

@@ -1,5 +1,6 @@
 const config = require("@colyseus/tools").default;
 const { monitor } = require("@colyseus/monitor");
+const { playground } = require("@colyseus/playground");
 
 /**
  * Import your Room files
@@ -18,11 +19,20 @@ module.exports = config({
     initializeExpress: (app) => {
         /**
          * Bind your custom express routes here:
+         * Read more: https://expressjs.com/en/starter/basic-routing.html
          */
-        app.get("/", (req, res) => {
+        app.get("/hello_world", (req, res) => {
             res.send("It's time to kick ass and chew bubblegum!");
         });
 
+        /**
+         * Use @colyseus/playground
+         * (It is not recommended to expose this route in a production environment)
+         */
+        if (process.env.NODE_ENV !== "production") {
+            app.use("/", playground);
+        }
+
         /**
          * Bind @colyseus/monitor
          * It is recommended to protect this route with a password.

templates/javascript/src/rooms/MyRoom.js

@@ -2,6 +2,7 @@ const colyseus = require('colyseus');
 const { MyRoomState } = require('./schema/MyRoomState');
 
 exports.MyRoom = class extends colyseus.Room {
+  maxClients = 4;
 
   onCreate (options) {
     this.setState(new MyRoomState());

templates/typescript/package.json

@@ -31,8 +31,9 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@colyseus/tools": "^0.15.0",
     "@colyseus/monitor": "^0.15.0",
+    "@colyseus/playground": "^0.15.3",
+    "@colyseus/tools": "^0.15.0",
     "colyseus": "^0.15.0",
     "express": "^4.18.2"
   }

templates/typescript/src/app.config.ts

@@ -1,5 +1,6 @@
 import config from "@colyseus/tools";
 import { monitor } from "@colyseus/monitor";
+import { playground } from "@colyseus/playground";
 
 /**
  * Import your Room files
@@ -19,14 +20,23 @@ export default config({
     initializeExpress: (app) => {
         /**
          * Bind your custom express routes here:
+         * Read more: https://expressjs.com/en/starter/basic-routing.html
          */
-        app.get("/", (req, res) => {
+        app.get("/hello_world", (req, res) => {
             res.send("It's time to kick ass and chew bubblegum!");
         });
 
         /**
-         * Bind @colyseus/monitor
-         * It is recommended to protect this route with a password.
+         * Use @colyseus/playground
+         * (It is not recommended to expose this route in a production environment)
+         */
+        if (process.env.NODE_ENV !== "production") {
+            app.use("/", playground);
+        }
+
+        /**
+         * Use @colyseus/monitor
+         * It is recommended to protect this route with a password
          * Read more: https://docs.colyseus.io/tools/monitor/#restrict-access-to-the-panel-using-a-password
          */
         app.use("/colyseus", monitor());

templates/typescript/src/rooms/MyRoom.ts

@@ -2,6 +2,7 @@ import { Room, Client } from "@colyseus/core";
 import { MyRoomState } from "./schema/MyRoomState";
 
 export class MyRoom extends Room<MyRoomState> {
+  maxClients = 4;
 
   onCreate (options: any) {
     this.setState(new MyRoomState());