chore: improve dependencies installation and run app in debugger by default

Author: michalkvasnicak

packages/create-frames/README.md

@@ -1,3 +1,7 @@
+# Create Frames.js app
+
+Create a new Frames.js app with a single command using predefined templates.
+
 ## Using npm
 
 ```

packages/create-frames/create.js

@@ -104,6 +104,7 @@ export async function create(params) {
   });
 
   if (wantsToInstallDependencies) {
+    log.message(`Installing the dependencies...`);
     const result = spawnSync(pkgManager, ["install"], {
       cwd: destDir,
       stdio: "ignore",
@@ -124,10 +125,10 @@ export async function create(params) {
     `1. Go to the project directory by running: ${pc.blue(`cd ./${projectName}`)}`
   );
   log.step(
-    `2. Start the development server by running: ${pc.blue(await packageManagerRunCommand("dev"))}`
+    `2. Start the development server and run the app in debugger by running: ${pc.blue(await packageManagerRunCommand("dev"))}`
   );
   log.step(
-    `3. Open your browser and go to ${pc.blue(`http://localhost:3000`)} to see your app running`
+    `3. Open your browser and go to ${pc.blue(`http://localhost:3010`)} to see your app running in the debugger`
   );
 
   outro("Done! Your project has been set up! 🎉");

templates/next/README.md

@@ -1,8 +1,25 @@
+# Frames.js Next example
+
+Simple Frames.js app using Next.js.
+
+### Installation
+
+```sh
+$ npm install
 ```
-npm install
+
+### Run without debugger
+
+Following command will start Next.js app in dev mode.
+
+```sh
 npm run dev
 ```
 
-Head to http://localhost:3000/api
+### Run in Debugger
 
-Open in debugger by running `npx @frames.js/debugger@latest -u http://localhost:3000/api` in another terminal.
+Following command will open frames debugger and also run the app in development mode.
+
+```sh
+$ npm run dev:debug
+```

templates/next/package.json

@@ -12,10 +12,12 @@
     "@types/node": "^18.17.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@frames.js/debugger": "^0.1.5",
+    "concurrently": "^8.2.2",
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "concurrently \"next dev\" \"frames --url http://localhost:3000\"",
     "start": "next start",
     "build": "next build",
     "lint": "next lint"