https://github.com/morinokami/webcontainer-fst
Create a WebContainer-compatible FileSystemTree from a given path
https://github.com/morinokami/webcontainer-fst
nodejs stackblitz webcontainer
Last synced: 3 months ago
JSON representation
Create a WebContainer-compatible FileSystemTree from a given path
- Host: GitHub
- URL: https://github.com/morinokami/webcontainer-fst
- Owner: morinokami
- License: mit
- Created: 2023-02-18T15:59:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-13T13:58:51.000Z (almost 2 years ago)
- Last Synced: 2025-10-09T00:40:49.450Z (8 months ago)
- Topics: nodejs, stackblitz, webcontainer
- Language: TypeScript
- Homepage:
- Size: 168 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webcontainer-fst
webcontainer-fst creates a WebContainer-compatible [FileSystemTree](https://webcontainers.io/api#filesystemtree) from a given path.
[Demo](https://stackblitz.com/edit/webcontainer-fst-demo?file=build-files.js)
Suppose the directory you want to [mount](https://webcontainers.io/api#%E2%96%B8-mount) on WebContainer has the following file structure:
```
src
├── index.js
└── package.json
```
To obtain the FileSystemTree corresponding to this `src` directory, execute the `createFst` function as follows:
```sh
$ cat build-files.js
import { createFst } from 'webcontainer-fst';
const fst = await createFst('./src');
console.log(JSON.stringify(fst, null, 2));
$ node build-files.js
{
"index.js": {
"file": {
"contents": "import express from 'express';\nconst app = express();\nconst port = 3111;\n\napp.get('/', (req, res) => {\n res.send('Welcome to a WebContainers app! 🥳');\n});\n\napp.listen(port, () => {\n console.log(`App is live at http://localhost:${port}`);\n});"
}
},
"package.json": {
"file": {
"contents": "{\n \"name\": \"example-app\",\n \"type\": \"module\",\n \"dependencies\": {\n \"express\": \"latest\",\n \"nodemon\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"nodemon index.js\"\n }\n}"
}
}
}
```
The `fst` variable created here can be saved to a file and later mounted on WebContainer.
## Installation
```sh
npm install webcontainer-fst
```