-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
77 lines (69 loc) · 2.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebContainer Usage Example</title>
<style>
#browser {
position: absolute;
right: 0;
top: 0;
height: calc(100vh - 5px);
width: calc(50vw - 5px);
}
#logs {
position: absolute;
left: 0;
bottom: 0;
height: calc(50vh - 5px);
width: calc(50vw - 5px);
border: solid;
overflow: auto;
}
</style>
</head>
<body>
<h1>Hello on WebContainer App</h1>
<p>I will install json-server and run it into your browser 🤯</p>
<a id="browserLink" target="_blank">Open in new tab</a>
<div id="logs"></div>
<iframe id="browser"></iframe>
<script src="dist/main.js"></script>
<script>
let globalBackend;
async function start() {
const logger = new MyApp.Logger('#logs');
const backend = new MyApp.Backend(logger);
globalBackend = backend;
// Wait backend to be started
await backend.initialized;
console.log('started');
backend.urlEmitter.then(url => {
setTimeout(() => {
// window.open(url, '_blank');
document.querySelector('#browser').src = url;
document.querySelector('#browserLink').href = url;
}, 3000);
});
// Init files
const projectConfig = await fetch('/project/fileTree.json').then(response => response.json());
const fileTree = await projectConfig.files.reduce(async (resultP, file) => {
const result = await resultP;
result[file.fileName] = {
file: {
contents: await fetch(`${projectConfig.rootFolder}/${file.fileName}`).then(response => response.text())
}
};
return result;
}, Promise.resolve({}));
backend.initProject(fileTree);
// Start dev server
backend.startDevServer();
}
start();
function stop() {
globalBackend.stop();
}
</script>
</body>
</html>