create-browserpod-quickstart 0.9.3 → 0.9.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/package.json +4 -8
  2. package/src/index.js +3 -0
  3. package/templates/vite-basic/.env +1 -0
  4. package/templates/vite-basic/index.html +11 -0
  5. package/templates/vite-basic/public/favicon.png +0 -0
  6. package/templates/vite-basic/public/logo.png +0 -0
  7. package/templates/vite-basic/src/main.js +7 -24
  8. package/templates/vite-basic/src/style.css +56 -0
  9. package/templates/vite-web/.env +1 -0
  10. package/templates/vite-web/index.html +15 -3
  11. package/templates/vite-web/public/favicon.png +0 -0
  12. package/templates/vite-web/public/logo.png +0 -0
  13. package/templates/vite-web/public/project/main.js +39 -1
  14. package/templates/vite-web/src/main.js +5 -8
  15. package/templates/vite-web/src/style.css +97 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-browserpod-quickstart",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "description": "Create a new BrowserPod project quickly",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -10,11 +10,6 @@
10
10
  "engines": {
11
11
  "node": "^18.0.0 || >=20.0.0"
12
12
  },
13
- "files": [
14
- "index.js",
15
- "src/**/*",
16
- "templates/**/*"
17
- ],
18
13
  "keywords": [
19
14
  "browserpod",
20
15
  "template",
@@ -25,9 +20,10 @@
25
20
  "author": "Leaning Technologies",
26
21
  "license": "MIT",
27
22
  "dependencies": {
28
- "prompts": "^2.4.2",
23
+ "chalk": "^5.3.0",
29
24
  "fs-extra": "^11.2.0",
30
- "chalk": "^5.3.0"
25
+ "is-binary-path": "^3.0.0",
26
+ "prompts": "^2.4.2"
31
27
  },
32
28
  "devDependencies": {
33
29
  "@types/fs-extra": "^11.0.4",
package/src/index.js CHANGED
@@ -2,6 +2,7 @@ import fs from 'fs-extra';
2
2
  import path from 'path';
3
3
  import prompts from 'prompts';
4
4
  import chalk from 'chalk';
5
+ import isBinaryPath from 'is-binary-path';
5
6
  import { fileURLToPath } from 'url';
6
7
 
7
8
  const __filename = fileURLToPath(import.meta.url);
@@ -47,6 +48,8 @@ async function copyFilesAndDirectories(src, dest, projectName, apiKey) {
47
48
  if (stat.isDirectory()) {
48
49
  await fs.ensureDir(destPath);
49
50
  await copyFilesAndDirectories(srcPath, destPath, projectName, apiKey);
51
+ } else if (isBinaryPath(srcPath)) {
52
+ await fs.copyFile(srcPath, destPath);
50
53
  } else {
51
54
  let content = await fs.readFile(srcPath, 'utf8');
52
55
 
package/templates/vite-basic/.env ADDED
@@ -0,0 +1 @@
1
+ VITE_BP_APIKEY={{API_KEY}}
package/templates/vite-basic/index.html CHANGED
@@ -2,9 +2,20 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
6
  <title>Hello BrowserPod</title>
7
+ <link rel="icon" type="image/png" href="/favicon.png" />
8
+ <link rel="stylesheet" href="/src/style.css" />
6
9
  </head>
7
10
  <body>
11
+ <div class="container">
12
+ <div class="header">
13
+ <img src="/logo.png" alt="BrowserPod Logo" class="logo" />
14
+ <h1>Hello BrowserPod</h1>
15
+ </div>
16
+ <p>Running Node.js in your browser</p>
17
+ <pre id="console"></pre>
18
+ </div>
8
19
  <script type="module" src="/src/main.js"></script>
9
20
  </body>
10
21
  </html>
package/templates/vite-basic/src/main.js CHANGED
@@ -1,30 +1,13 @@
1
1
  import { BrowserPod } from '@leaningtech/browserpod'
2
2
 
3
- // Initialize the Pod.
4
- // VITE_BP_APIKEY is an environmental variable containing your Api Key.
5
- // You can define it by creating a file called `.env` in the project directory
6
- // with the content `VITE_BP_APIKEY=your-key`.
7
- // To get an Api Key, visit https://console.browserpod.io .
3
+ // Initialize the Pod
4
+ // VITE_BP_APIKEY is an environmental variable containing your Api Key
5
+ // Its value is defined in the file `.env` in the project's main directory
6
+ // To get an Api Key, visit https://console.browserpod.io
8
7
  const pod = await BrowserPod.boot({apiKey:import.meta.env.VITE_BP_APIKEY});
9
8
 
10
- // Create an HTML element to use as our Terminal
11
- const terminalElem = document.createElement("pre");
12
- document.body.appendChild(terminalElem);
13
9
  // Create a Terminal
14
- const terminal = await pod.createDefaultTerminal(terminalElem);
10
+ const terminal = await pod.createDefaultTerminal(document.querySelector("#console"));
15
11
 
16
- // A simple script that we want to execute inside the Pod
17
- const script = `
18
- const fs = require("node:fs");
19
- console.log("hello from node", process.version);
20
- const rootContents = fs.readdirSync("/");
21
- console.log(rootContents);
22
- process.exit(0);
23
- `;
24
- // Write the script into the Pod's filesystem
25
- const scriptFile = await pod.createFile("/script.js", "utf-8");
26
- await scriptFile.write(script);
27
- await scriptFile.close();
28
- // Run the script
29
- await pod.run("node", ["script.js"], {terminal:terminal});
30
- console.log("done!");
12
+ // Run Node's REPL
13
+ await pod.run("node", [], {terminal:terminal});
package/templates/vite-basic/src/style.css ADDED
@@ -0,0 +1,56 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background: #f5f5f5;
12
+ padding: 2rem 1rem;
13
+ }
14
+
15
+ .container {
16
+ margin: 0 2rem;
17
+ background: white;
18
+ padding: 2rem;
19
+ border-radius: 0.5rem;
20
+ box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .header {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.875rem;
27
+ margin-bottom: 1.5rem;
28
+ }
29
+
30
+ .logo {
31
+ height: 2.5rem;
32
+ width: auto;
33
+ object-fit: cover;
34
+ object-position: left center;
35
+ }
36
+
37
+ h1 {
38
+ color: #2c3e50;
39
+ margin: 0;
40
+ font-size: 1.75rem;
41
+ }
42
+
43
+ p {
44
+ color: #666;
45
+ margin-bottom: 1.5rem;
46
+ }
47
+
48
+ pre {
49
+ background: #1e1e1e;
50
+ color: #d4d4d4;
51
+ padding: 1rem;
52
+ border-radius: 0.25rem;
53
+ overflow-x: auto;
54
+ font-family: 'Courier New', Courier, monospace;
55
+ font-size: 0.875rem;
56
+ }
package/templates/vite-web/.env ADDED
@@ -0,0 +1 @@
1
+ VITE_BP_APIKEY={{API_KEY}}
package/templates/vite-web/index.html CHANGED
@@ -2,12 +2,24 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
6
  <title>Hello BrowserPod</title>
7
+ <link rel="icon" type="image/png" href="/favicon.png" />
8
+ <link rel="stylesheet" href="/src/style.css" />
6
9
  </head>
7
10
  <body>
8
- <div id="url">Waiting for portal...</div>
9
- <iframe id="portal"></iframe>
10
- <div class="console" id="console"></div>
11
+ <div class="container">
12
+ <div class="header">
13
+ <img src="/logo.png" alt="BrowserPod Logo" class="logo" />
14
+ <h1>Hello BrowserPod</h1>
15
+ </div>
16
+ <p>Running Node.js in your browser</p>
17
+ <div id="url">Waiting for portal...</div>
18
+ <div class="preview-container">
19
+ <iframe id="portal"></iframe>
20
+ <pre id="console"></pre>
21
+ </div>
22
+ </div>
11
23
  <script type="module" src="/src/main.js"></script>
12
24
  </body>
13
25
  </html>
package/templates/vite-web/public/project/main.js CHANGED
@@ -3,7 +3,45 @@ const app = express()
3
3
  const port = 3000
4
4
 
5
5
  app.get('/', (req, res) => {
6
- res.send('Hello World!')
6
+ res.send(`
7
+ <!DOCTYPE html>
8
+ <html lang="en">
9
+ <head>
10
+ <meta charset="UTF-8">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
+ <title>Hello from BrowserPod</title>
13
+ <style>
14
+ body {
15
+ margin: 0;
16
+ min-height: 100vh;
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
+ font-family: system-ui, -apple-system, sans-serif;
21
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ color: white;
23
+ }
24
+ .content {
25
+ text-align: center;
26
+ }
27
+ h1 {
28
+ font-size: 3rem;
29
+ margin: 0 0 0.5rem 0;
30
+ }
31
+ p {
32
+ font-size: 1.25rem;
33
+ opacity: 0.9;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="content">
39
+ <h1>Hello World! 👋</h1>
40
+ <p>Express.js running in BrowserPod</p>
41
+ </div>
42
+ </body>
43
+ </html>
44
+ `)
7
45
  })
8
46
 
9
47
  app.listen(port, () => {
package/templates/vite-web/src/main.js CHANGED
@@ -1,17 +1,14 @@
1
1
  import { BrowserPod } from '@leaningtech/browserpod'
2
2
  import { copyFile } from './utils'
3
3
 
4
- // Initialize the Pod.
5
- // VITE_BP_APIKEY is an environmental variable containing your Api Key.
6
- // You can define it by creating a file called `.env` in the project directory
7
- // with the content `VITE_BP_APIKEY=your-key`.
8
- // To get an Api Key, visit https://console.browserpod.io .
4
+ // Initialize the Pod
5
+ // VITE_BP_APIKEY is an environmental variable containing your Api Key
6
+ // Its value is defined in the file `.env` in the project's main directory
7
+ // To get an Api Key, visit https://console.browserpod.io
9
8
  const pod = await BrowserPod.boot({apiKey:import.meta.env.VITE_BP_APIKEY});
10
9
 
11
10
  // Create a Terminal
12
- const terminalElem = document.getElementById("console");
13
- document.body.appendChild(terminalElem);
14
- const terminal = await pod.createDefaultTerminal(terminalElem);
11
+ const terminal = await pod.createDefaultTerminal(document.querySelector("#console"));
15
12
 
16
13
  // Hook the portal to preview the web page in an iframe
17
14
  const portalIframe = document.getElementById("portal");
package/templates/vite-web/src/style.css ADDED
@@ -0,0 +1,97 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background: #f5f5f5;
12
+ padding: 2rem 1rem;
13
+ }
14
+
15
+ .container {
16
+ margin: 0 2rem;
17
+ background: white;
18
+ padding: 2rem;
19
+ border-radius: 0.5rem;
20
+ box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .header {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.875rem;
27
+ margin-bottom: 1.5rem;
28
+ }
29
+
30
+ .logo {
31
+ height: 2.5rem;
32
+ width: auto;
33
+ object-fit: cover;
34
+ object-position: left center;
35
+ }
36
+
37
+ h1 {
38
+ color: #2c3e50;
39
+ margin: 0;
40
+ font-size: 1.75rem;
41
+ }
42
+
43
+ p {
44
+ color: #666;
45
+ margin-bottom: 1.5rem;
46
+ }
47
+
48
+ #url {
49
+ margin-bottom: 1rem;
50
+ padding: 0.75rem;
51
+ background: #e8f4f8;
52
+ border-radius: 0.25rem;
53
+ font-size: 0.875rem;
54
+ color: #2c3e50;
55
+ }
56
+
57
+ #url a {
58
+ color: #0066cc;
59
+ text-decoration: none;
60
+ }
61
+
62
+ #url a:hover {
63
+ text-decoration: underline;
64
+ }
65
+
66
+ .preview-container {
67
+ display: grid;
68
+ grid-template-columns: 1fr 1fr;
69
+ gap: 1.5rem;
70
+ margin-top: 1.5rem;
71
+ }
72
+
73
+ #portal {
74
+ width: 100%;
75
+ height: 30rem;
76
+ border: 0.0625rem solid #ddd;
77
+ border-radius: 0.25rem;
78
+ background: white;
79
+ }
80
+
81
+ pre {
82
+ background: #1e1e1e;
83
+ color: #d4d4d4;
84
+ padding: 1rem;
85
+ border-radius: 0.25rem;
86
+ overflow-x: auto;
87
+ font-family: 'Courier New', Courier, monospace;
88
+ font-size: 0.875rem;
89
+ height: 30rem;
90
+ margin: 0;
91
+ }
92
+
93
+ @media (max-width: 768px) {
94
+ .preview-container {
95
+ grid-template-columns: 1fr;
96
+ }
97
+ }