create-browserpod-quickstart 0.9.3

package/index.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { createProject } from './src/index.js';
+
+createProject().catch((error) => {
+  console.error('An unexpected error occurred:', error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "create-browserpod-quickstart",
+  "version": "0.9.3",
+  "description": "Create a new BrowserPod project quickly",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "create-browserpod-quickstart": "index.js"
+  },
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
+  },
+  "files": [
+    "index.js",
+    "src/**/*",
+    "templates/**/*"
+  ],
+  "keywords": [
+    "browserpod",
+    "template",
+    "quickstart",
+    "create",
+    "cli"
+  ],
+  "author": "Leaning Technologies",
+  "license": "MIT",
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "fs-extra": "^11.2.0",
+    "chalk": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaningtech/browserpod-meta.git",
+    "directory": "packages/browserpod-quickstart"
+  },
+  "homepage": "https://browserpod.io",
+  "bugs": {
+    "url": "https://github.com/leaningtech/browserpod-meta/issues"
+  }
+}

package/src/index.js

@@ -0,0 +1,117 @@
+import fs from 'fs-extra';
+import path from 'path';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templates = [
+  {
+    name: 'vite-basic',
+    display: 'Basic',
+    description: 'A simple project running a basic script'
+  },
+  {
+    name: 'vite-web',
+    display: 'Web Server',
+    description: 'A simple project running a web server'
+  }
+];
+
+async function validateProjectName(name) {
+  if (!name || name.trim().length === 0) {
+    return 'Project name is required';
+  }
+
+  if (!/^[a-z0-9-_]+$/i.test(name)) {
+    return 'Project name can only contain letters, numbers, hyphens, and underscores';
+  }
+
+  if (fs.existsSync(name)) {
+    return `Directory "${name}" already exists`;
+  }
+
+  return true;
+}
+
+async function copyFilesAndDirectories(src, dest, projectName, apiKey) {
+  const items = await fs.readdir(src);
+
+  for (const item of items) {
+    const srcPath = path.join(src, item);
+    const destPath = path.join(dest, item);
+    const stat = await fs.stat(srcPath);
+
+    if (stat.isDirectory()) {
+      await fs.ensureDir(destPath);
+      await copyFilesAndDirectories(srcPath, destPath, projectName, apiKey);
+    } else {
+      let content = await fs.readFile(srcPath, 'utf8');
+
+      // Replace template variables
+      content = content.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+      content = content.replace(/\{\{API_KEY\}\}/g, apiKey || '');
+
+      await fs.writeFile(destPath, content, 'utf8');
+    }
+  }
+}
+
+async function createProject() {
+  console.log(chalk.blue.bold('🚀 Create Browserpod Quickstart\n'));
+
+  const response = await prompts([
+    {
+      type: 'select',
+      name: 'template',
+      message: 'Select a template:',
+      choices: templates.map(t => ({
+        title: `${t.display} - ${t.description}`,
+        value: t.name
+      }))
+    },
+    {
+      type: 'text',
+      name: 'projectName',
+      message: 'Project name:',
+      validate: validateProjectName
+    },
+    {
+      type: 'password',
+      name: 'apiKey',
+      message: 'Browserpod API key (optional):',
+      hint: 'You can add this later in the .env file'
+    }
+  ]);
+
+  if (!response.template || !response.projectName) {
+    console.log(chalk.red('Setup cancelled'));
+    process.exit(1);
+  }
+
+  const { template, projectName, apiKey } = response;
+  const templatePath = path.join(__dirname, '..', 'templates', template);
+  const targetPath = path.resolve(projectName);
+
+  console.log(chalk.blue(`\n📁 Creating project in ${targetPath}...`));
+
+  try {
+    await fs.ensureDir(targetPath);
+    await copyFilesAndDirectories(templatePath, targetPath, projectName, apiKey);
+
+    console.log(chalk.green.bold('✅ Project created successfully!\n'));
+    console.log(chalk.yellow('Next steps:'));
+    console.log(`  cd ${projectName}`);
+    console.log('  npm install');
+    console.log('  npm run dev');
+    console.log(chalk.gray('\nHappy coding! 🎉'));
+
+  } catch (error) {
+    console.error(chalk.red('Error creating project:'), error.message);
+    process.exit(1);
+  }
+}
+
+export { createProject };

package/templates/vite-basic/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello BrowserPod</title>
+  </head>
+  <body>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vite-basic/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "@leaningtech/browserpod": "latest"
+  }
+}

package/templates/vite-basic/src/main.js

@@ -0,0 +1,30 @@
+import { BrowserPod } from '@leaningtech/browserpod'
+
+// Initialize the Pod.
+// VITE_BP_APIKEY is an environmental variable containing your Api Key.
+// You can define it by creating a file called `.env` in the project directory
+// with the content `VITE_BP_APIKEY=your-key`.
+// To get an Api Key, visit https://console.browserpod.io .
+const pod = await BrowserPod.boot({apiKey:import.meta.env.VITE_BP_APIKEY});
+
+// Create an HTML element to use as our Terminal
+const terminalElem = document.createElement("pre");
+document.body.appendChild(terminalElem);
+// Create a Terminal
+const terminal = await pod.createDefaultTerminal(terminalElem);
+
+// A simple script that we want to execute inside the Pod
+const script = `
+const fs = require("node:fs");
+console.log("hello from node", process.version);
+const rootContents = fs.readdirSync("/");
+console.log(rootContents);
+process.exit(0);
+`;
+// Write the script into the Pod's filesystem
+const scriptFile = await pod.createFile("/script.js", "utf-8");
+await scriptFile.write(script);
+await scriptFile.close();
+// Run the script
+await pod.run("node", ["script.js"], {terminal:terminal});
+console.log("done!");

package/templates/vite-basic/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin'
+    }
+  }
+});

package/templates/vite-web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello BrowserPod</title>
+  </head>
+  <body>
+    <div id="url">Waiting for portal...</div>
+    <iframe id="portal"></iframe>
+    <div class="console" id="console"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vite-web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "@leaningtech/browserpod": "latest"
+  }
+}

package/templates/vite-web/public/project/main.js

@@ -0,0 +1,11 @@
+const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+})

package/templates/vite-web/public/project/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "expressjs-tutorial",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^5.1.0"
+  }
+}

package/templates/vite-web/src/main.js

@@ -0,0 +1,32 @@
+import { BrowserPod } from '@leaningtech/browserpod'
+import { copyFile } from './utils'
+
+// Initialize the Pod.
+// VITE_BP_APIKEY is an environmental variable containing your Api Key.
+// You can define it by creating a file called `.env` in the project directory
+// with the content `VITE_BP_APIKEY=your-key`.
+// To get an Api Key, visit https://console.browserpod.io .
+const pod = await BrowserPod.boot({apiKey:import.meta.env.VITE_BP_APIKEY});
+
+// Create a Terminal
+const terminalElem = document.getElementById("console");
+document.body.appendChild(terminalElem);
+const terminal = await pod.createDefaultTerminal(terminalElem);
+
+// Hook the portal to preview the web page in an iframe
+const portalIframe = document.getElementById("portal");
+const urlDiv = document.getElementById("url");
+pod.onPortal(({ url, port }) => {
+  urlDiv.innerHTML = `Portal available at <a href="${url}">${url}</a> for local server listening on port ${port}`;
+  portalIframe.src = url;
+});
+
+// Copy our project files
+await pod.createDirectory("/project");
+await copyFile(pod, "project/main.js");
+await copyFile(pod, "project/package.json");
+
+// Install dependencies
+await pod.run("npm", ["install"], {echo:true, terminal:terminal, cwd: "/project"});
+// Run the web server
+await pod.run("node", ["main.js"], {echo:true, terminal:terminal, cwd: "/project"});

package/templates/vite-web/src/utils.js

@@ -0,0 +1,7 @@
+export async function copyFile(pod, path) {
+  const f = await pod.createFile("/"+path, "binary");
+  const resp = await fetch(path);
+  const buf = await resp.arrayBuffer();
+  await f.write(buf);
+  await f.close();
+}

package/templates/vite-web/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin'
+    }
+  }
+});