{"id":14155646,"url":"https://github.com/hankei6km/vscode-ext-start-webcontainer","last_synced_at":"2025-03-21T17:32:55.348Z","repository":{"id":169323578,"uuid":"645250374","full_name":"hankei6km/vscode-ext-start-webcontainer","owner":"hankei6km","description":"Start WebContainer from VS Codde for the Web, and use Jsh and Preview URL.","archived":false,"fork":false,"pushed_at":"2024-10-29T11:00:24.000Z","size":3331,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T11:44:19.544Z","etag":null,"topics":["node","vscode-extension","webcontainer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hankei6km.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-25T08:41:45.000Z","updated_at":"2024-10-29T11:00:28.000Z","dependencies_parsed_at":"2023-10-03T13:31:12.281Z","dependency_job_id":"f18bccf0-2032-4362-9431-308e5b11dc6e","html_url":"https://github.com/hankei6km/vscode-ext-start-webcontainer","commit_stats":null,"previous_names":["hankei6km/vscode-ext-start-web-container"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankei6km%2Fvscode-ext-start-webcontainer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankei6km%2Fvscode-ext-start-webcontainer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankei6km%2Fvscode-ext-start-webcontainer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hankei6km%2Fvscode-ext-start-webcontainer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hankei6km","download_url":"https://codeload.github.com/hankei6km/vscode-ext-start-webcontainer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244838767,"owners_count":20518880,"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":["node","vscode-extension","webcontainer"],"created_at":"2024-08-17T08:04:41.069Z","updated_at":"2025-03-21T17:32:54.957Z","avatar_url":"https://github.com/hankei6km.png","language":"TypeScript","funding_links":[],"categories":["vscode-extension"],"sub_categories":[],"readme":"# Start WebContainer\n\nStart [WebContainer](https://webcontainers.io/), and use Jsh and Preview URL.\n\nThis extension dynamically generates an external tab with Cross Origin isolation enabled using [Nodebox](https://sandpack.codesandbox.io/docs/advanced-usage/nodebox)(the `Server` tab in the figure below). Therefore, the [`?vscode-coi=on`](https://github.com/microsoft/vscode/issues/137884) parameter is not required in VS Code for the Web.\n\n![Screenshot of Vite server running in Jsh terminal and previewing the page](images/screenshot.png)\n\n\u003e ⚠️ VS Code Insiders\n\u003e\n\u003e VS Code insides for the Web has Cross Origin isolation turned on by default.\n\u003e\n\u003e https://code.visualstudio.com/blogs/2023/06/05/vscode-wasm-wasi#_vs-codes-wasi-implementation\n\u003e\n\u003e \u003e The only difficulty with this approach is that `SharedArrayBuffer` and `Atomics` require the site to be [cross-origin isolated](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements), which, because CORS is very viral, can be an endeavor by itself. This is why it is currently only enabled by default on the Insiders version [insiders.vscode.dev](https://insiders.vscode.dev/) and must be enabled using the query parameter `?vscode-coi=on` on [vscode.dev](https://vscode.dev/).\n\u003e\n\u003e If you use Start WebContainer, you have to set `?vscode-coi=off`.\n\n## Features\n\n- Start WebContainer from VS Code for the Web\n- Open a terminal with Jsh\n- Open Preview URL with Simple Browser\n- Automatically reflect changes to WebContainer when there are any changes to the Workspace file\n- Import WebContainer files to Workspace\n\nBackground file sync is not supported.\nDoes not supported to multi-root workspace.\nContainers are not persistent.\n\n## Usage\n\n### Start WebContainer(Open terminal with Jsh)\n\n1. Open the Workspace(Local folder or Remote repository)\n2. Execute the `Start WebContainer: Start` command from the command palette\n3. The URL(`https://*.nodebox.codesandbox.io/`) for starting WebContainer will open in an external tab\n4. Workspace files will be loaded to WebContainer\n\nWhen you edit files in the editor, they will be automatically reflected in WebContainer. However, it will not be reflected in the following cases.\n\n- Changes outside the editor\n- Create and delete files\n\n\u003e 📘 `npm install`:\n\u003e\n\u003e - `npm install` is not executed automatically. Please execute it manually\n\u003e - Even if `package.json` and` package-lock.json` are updated, they will not be automatically reflected in the Workspace(See `Start WebContainer: Pick up all files from a container` below)\n\n### Open Preview URL\n\n1. Execute the `Start WebContainer: Preview` command from the command palette\n2. Select from the list of available Prview URLs\n3. The Preview URL will open in the Simple Browser\n\n### Pick up all files from a WebContainer\n\n1. Execute the `Start WebContainer: Pick up all files from a container` command from the command palette\n2. The files in the WebContainer will be overwritten to the Workspace\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankei6km%2Fvscode-ext-start-webcontainer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhankei6km%2Fvscode-ext-start-webcontainer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhankei6km%2Fvscode-ext-start-webcontainer/lists"}