WebContainers, except it's a million times easier to use.
https://wenode.seven7four4.repl.co (hosted on Replit to be able to use SharedArrayBuffers)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Wenode</title>
</head>
<body>
<iframe id="webserver"></iframe>
<file name="index.html">
<h1> Hello, World! </h1>
</file>
<script type="wenode" packages="express" client="#webserver" id="wn-sc">
const express = require('express');
const app = express();
app.get('/', (req, res) => res.sendFile(__dirname + '/index.html'));
app.listen(8080, () => {
console.log("Listening at :8080");
});
</script>
<script src="wenode.js" type="text/javascript"></script>
</body>
</html>
- Download one of Wenode distributions from dist/ and place it in webserver
- Configure headers so WebContainers API works
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
- Start webserver
- The
file
tag- This tag is used to store text in a file before running code.
- Usage:
<file name="file_name_here.txt"> Hello, world! </file>
- The
script[type=wenode]
tag- This tag is used for running code directly.
- Usage:
<script type="wenode" packages="express chalk" (Optional) no-autostart (Optional) client="#my-iframe-id" (Optional) esm (Optional)> console.log("Hello. world!"); </script>
- Events:
onserver
(Activated when port opened)oninstall
(Activated on successful installation)oninstallfail
(Activated on failed installation)onoutput
(Activated on output, only callback that returns a parameter)
- Functions
wenode_elem.run()
- runs a non-automatically executing script
- The
fs
tag- A tag which has a file system already set up, so no installation or fetching is required, which speeds things up by a lot
- Usage:
<fs src="node_modules.bin"></fs>
- Files are generated using the create-node-modules, repo-to-fs and folder-to-fs scripts
- Usage of the scripts:
node create-node-modules node_modules.bin
node repo-to-fs https://github.com/expressjs/express expressjs.bin
node folder-to-fs path/to/dir directory.bin