create-browserpod-quickstart 0.9.4 → 0.9.6
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.
- package/package.json +4 -3
- package/src/index.js +3 -0
- package/templates/vite-basic/index.html +11 -0
- package/templates/vite-basic/public/favicon.png +0 -0
- package/templates/vite-basic/public/logo.png +0 -0
- package/templates/vite-basic/src/main.js +7 -24
- package/templates/vite-basic/src/style.css +56 -0
- package/templates/vite-web/index.html +15 -3
- package/templates/vite-web/public/favicon.png +0 -0
- package/templates/vite-web/public/logo.png +0 -0
- package/templates/vite-web/public/project/main.js +39 -1
- package/templates/vite-web/src/main.js +5 -8
- 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
|
+
"version": "0.9.6",
|
|
4
4
|
"description": "Create a new BrowserPod project quickly",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -20,9 +20,10 @@
|
|
|
20
20
|
"author": "Leaning Technologies",
|
|
21
21
|
"license": "MIT",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"
|
|
23
|
+
"chalk": "^5.3.0",
|
|
24
24
|
"fs-extra": "^11.2.0",
|
|
25
|
-
"
|
|
25
|
+
"is-binary-path": "^3.0.0",
|
|
26
|
+
"prompts": "^2.4.2"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
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
|
|
|
@@ -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>
|
|
Binary file
|
|
Binary file
|
|
@@ -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
|
-
//
|
|
6
|
-
//
|
|
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(
|
|
10
|
+
const terminal = await pod.createDefaultTerminal(document.querySelector("#console"));
|
|
15
11
|
|
|
16
|
-
//
|
|
17
|
-
|
|
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});
|
|
@@ -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
|
+
}
|
|
@@ -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
|
|
9
|
-
|
|
10
|
-
|
|
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>
|
|
Binary file
|
|
Binary file
|
|
@@ -3,7 +3,45 @@ const app = express()
|
|
|
3
3
|
const port = 3000
|
|
4
4
|
|
|
5
5
|
app.get('/', (req, res) => {
|
|
6
|
-
res.send(
|
|
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, () => {
|
|
@@ -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
|
-
//
|
|
7
|
-
//
|
|
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
|
|
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");
|
|
@@ -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
|
+
}
|