{"id":14156478,"url":"https://github.com/stackblitz/webcontainer-api-starter","last_synced_at":"2025-02-27T00:50:18.932Z","repository":{"id":87721769,"uuid":"601722111","full_name":"stackblitz/webcontainer-api-starter","owner":"stackblitz","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-27T12:05:32.000Z","size":12,"stargazers_count":104,"open_issues_count":2,"forks_count":53,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-02-25T11:07:42.131Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackblitz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-14T17:18:19.000Z","updated_at":"2025-01-29T04:40:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b97c7d8-3545-4cf0-ac40-3a60c5ea8172","html_url":"https://github.com/stackblitz/webcontainer-api-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackblitz%2Fwebcontainer-api-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackblitz%2Fwebcontainer-api-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackblitz%2Fwebcontainer-api-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackblitz%2Fwebcontainer-api-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackblitz","download_url":"https://codeload.github.com/stackblitz/webcontainer-api-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240959072,"owners_count":19884910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-17T08:05:30.841Z","updated_at":"2025-02-27T00:50:18.897Z","avatar_url":"https://github.com/stackblitz.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# WebContainer API Starter\n\nWebContainer API is a browser-based runtime for executing Node.js applications and operating system commands. It enables you to build applications that previously required a server running.\n\nWebContainer API is perfect for building interactive coding experiences. Among its most common use cases are production-grade IDEs, programming tutorials, or employee onboarding platforms.\n\n## How To\n\nFor an up-to-date documentation, please refer to [our documentation](https://webcontainers.io).\n\n## Cross-Origin Isolation\n\nWebContainer _requires_ [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) to function. In turn, this requires your website to be [cross-origin isolated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements). Among other things, the root document must be served with:\n\n```\nCross-Origin-Embedder-Policy: require-corp\nCross-Origin-Opener-Policy: same-origin\n```\n\nYou can check [our article](https://blog.stackblitz.com/posts/cross-browser-with-coop-coep/) on the subject and our [docs on browser support](https://developer.stackblitz.com/docs/platform/browser-support) for more details.\n\n## Serve over HTTPS\n\nPlease note that your deployed page must be served over HTTPS. This is not necessary when developing locally, as `localhost` is exempt from some browser restrictions, but there is no way around it once you deploy to production.\n\n## Demo\n\nCheck [the WebContainer API demo app](https://webcontainer.new).\n\nHere's an example `main.ts` file:\n\n```ts\nimport { WebContainer } from \"@webcontainer/api\";\n\nconst files: FileSystemTree = {\n  \"index.js\": {\n    file: {\n      contents: \"\",\n    },\n  },\n};\n\nlet webcontainer: WebContainer;\n\n// add a textarea (the editor) and an iframe (a preview window) to the document\ndocument.querySelector(\"#app\").innerHTML = `\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"editor\"\u003e\n      \u003ctextarea\u003eI am a textarea\u003c/textarea\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"preview\"\u003e\n      \u003ciframe\u003e\u003c/iframe\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n`;\n\n// the editor\nconst textarea = document.querySelector(\"textarea\");\n\n// the preview window\nconst iframe = document.querySelector(\"iframe\");\n\nwindow.addEventListener(\"load\", async () =\u003e {\n  textarea.value = files[\"index.js\"].file.contents;\n\n  textarea.addEventListener(\"input\", (event) =\u003e {\n    const content = event.currentTarget.value;\n    webcontainer.fs.writeFile(\"/index.js\", content);\n  });\n\n  // call only once\n  webcontainer = await WebContainer.boot();\n\n  await webcontainer.mount(files);\n\n  const exitCode = await installDependencies();\n\n  if (exitCode !== 0) {\n    throw new Error(\"Installation failed\");\n  }\n\n  startDevServer();\n});\n\nasync function installDependencies() {\n  // install dependencies\n  const installProcess = await webcontainer.spawn(\"npm\", [\"install\"]);\n\n  installProcess.output.pipeTo(\n    new WritableStream({\n      write(data) {\n        console.log(data);\n      },\n    })\n  );\n\n  // wait for install command to exit\n  return installProcess.exit;\n}\n\nasync function startDevServer() {\n  // run `npm run start` to start the express app\n  await webcontainer.spawn(\"npm\", [\"run\", \"start\"]);\n\n  // wait for `server-ready` event\n  webcontainer.on(\"server-ready\", (port, url) =\u003e {\n    iframe.src = url;\n  });\n}\n```\n\n## Troubleshooting\n\nCookie blockers, either from third-party addons or built-in into the browser, can prevent WebContainer from running correctly. Check the `on('error')` event and our [docs](https://developer.stackblitz.com/docs/platform/third-party-blocker).\n\nTo troubleshoot other problems, check the [Troubleshooting page](https://webcontainers.io/guides/troubleshooting) in our docs.\n\n# License\n\nCopyright 2023 StackBlitz, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackblitz%2Fwebcontainer-api-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackblitz%2Fwebcontainer-api-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackblitz%2Fwebcontainer-api-starter/lists"}