felx-b / vscode-web

Visual Studio Code for browser

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Explore Bootstrap docs »

Report bug · Request feature · Themes · Blog

Table of contents

• Quick start
• Status
• What's included
• Bugs and feature requests
• Documentation
• Contributing
• Community
• Versioning
• Creators
• Thanks
• Copyright and license

Quick start

Several quick start options are available:

• Download the latest release.
• Clone the repo: git clone https://github.com/twbs/bootstrap.git
• Install with npm: npm install bootstrap
• Install with yarn: yarn add [email protected]
• Install with Composer: composer require twbs/bootstrap:4.3.1
• Install with NuGet: CSS: Install-Package bootstrap Sass: Install-Package bootstrap.sass

Read the Getting started page for information on the framework contents, templates and examples, and more.

Status

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

bootstrap/
└── dist/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.esm.js
        ├── bootstrap.esm.js.map
        ├── bootstrap.esm.min.js
        ├── bootstrap.esm.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://getbootstrap.com/. The docs may also be run locally.

Documentation search is powered by Algolia's DocSearch. Working on our search? Be sure to set debug: true in site/static/docs/4.3/assets/js/src/search.js file.

Running documentation locally

1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root /bootstrap directory, run npm run docs-serve in the command line.
4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Documentation for previous releases

You can find all our previous releases docs on https://getbootstrap.com/docs/versions/.

Previous releases and their documentation are also available for download.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Get updates on Bootstrap's development and chat with the project maintainers and community members.

• Follow @getbootstrap on Twitter.
• Read and subscribe to The Official Bootstrap Blog.
• Join the official Slack room.
• Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
• Implementation help may be found at Stack Overflow (tagged bootstrap-4).
• Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of Bootstrap. Release announcement posts on the official Bootstrap blog contain summaries of the most noteworthy changes made in each release.

Creators

Mark Otto

• https://twitter.com/mdo
• https://github.com/mdo

Jacob Thornton

• https://twitter.com/fat
• https://github.com/fat

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Copyright and license

Code and documentation copyright 2011-2019 the Bootstrap Authors and Twitter, Inc. Code released under the MIT License. Docs released under Creative Commons.

vscode-web's Issues

depends on archived repo

Just looking into how it works, I noticed that
https://github.com/Felx-B/vscode-web/blob/main/prepare-demo.js#L15

Clones the vscode-web-playground which has subsequently been archived, it doesn't appear to have left a forwarding address,
seemed like there should probably be an issue for it. Though i'm not sure how big of an issue that actually is or the chances that it might stop working.

Error - yarn prepare-demo

yarn prepare-demo is throwing follow year. Also find the screenshot. Am I doing anything wrong ?
Error: ENOENT: no such file or directory, stat './dist/extensions'
at Object.statSync (node:fs:1588:3)
at Object.statSync (C:\a\vsvsvsv\node_modules\graceful-fs\polyfills.js:307:34)
at statSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:10:52)
at getStatsSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:24:19)
at Object.checkPathsSync (C:\a\vsvsvsv\node_modules\fs-extra\lib\util\stat.js:49:33)
at Object.copySync (C:\a\vsvsvsv\node_modules\fs-extra\lib\copy-sync\copy-sync.js:24:38)
at Object. (C:\a\vsvsvsv\prepare-demo.js:9:5)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32) {
errno: -4058,
syscall: 'stat',
code: 'ENOENT',
path: './dist/extensions'

Unable to update files dynamically from javascript

The latest version published on npm is 1.82

It's 5 month ago.

Run sample with some errors on console of devtools.

Hi, I tried to run the sample, but I saw some errors related to http://localhost:8080/manifest.json, http://localhost:8080/myExt/nls.metadata.json 404 Not Found!

Steps of reproduce.

1. git clone [email protected]:Felx-B/vscode-web.git
2. cd vscode-web/sample
3. yarn
4. yarn sample
5. Open http://localhost:8080 in browser.

How can i edit the style & layout of the editor?

Thanks for the awesome library!

Hi there, thank you very much for building this awesome library 👍
I am having a few questions and it would be great if you could answer them :)

• Could you please provide us with examples of how to implement the FileSystemProvider APIs? If I would like to implement it based on your sample directory, then what should I do?
• Could you please provided us with examples of how to add vscode extensions (for web only of course) to your sample?
• How to enable the extension market in your sample?
• Is there a way to configure the welcome page on startup directly using vscode-web package?

Thank you!

Building failure under NodeJS 19.

Heyo,

I got a problem while setting up a Docker container for that repository with newer NodeJS 19.

yarn run v1.22.19
$ node build.js --ignore-engines
Cloning into 'vscode'...
Note: switching to '441438abd1ac652551dbe4d408dfcec8a499b8bf'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

$ node build/npm/preinstall.js
*** Warning: Versions of node.js >= 17 have not been tested.
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^14 || ^16 || ^17 || ^18". Got "19.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
node:child_process:960
    throw err;
    ^

Error: Command failed: yarn
    at checkExecSyncError (node:child_process:885:11)
    at Object.execSync (node:child_process:957:15)
    at Object.<anonymous> (/app/build.js:16:17)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 29,
  stdout: null,
  stderr: null
}

Node.js v19.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: building at STEP "RUN yarn build --ignore-engines": while running runtime: exit status 1

Full log:

STEP 1/10: FROM artixlinux/yay
STEP 2/10: USER root
--> Using cache d5b29be367c23a78e135f0cf03683b88a9df6f08f9473de60c7e93745f60adf4
--> d5b29be367c
STEP 3/10: WORKDIR /
--> Using cache 33c7bcd4d3dc0414332ad3e18284933ebbf6765ae30ac1d76bc46924524ad074
--> 33c7bcd4d3d
STEP 4/10: RUN git clone https://github.com/Felx-B/vscode-web app
--> Using cache e3c6aa3454f7ebc4ae0579b26b05128dcb3f39950075cdaaced22e2a9b8c2daa
--> e3c6aa3454f
STEP 5/10: WORKDIR /app
--> Using cache 3a8ffbc1608497c114b674b54edaf11e2c1753680547af20de8d957b8b5e76da
--> 3a8ffbc1608
STEP 6/10: RUN pacman -Syu --noconfirm yarn nodejs npm
--> Using cache ac6503fd2b1041fe9a2096a7b457bc1f9be9a763adef0c04b377a04e26cb9305
--> ac6503fd2b1
STEP 7/10: RUN yarn --ignore-engines
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 2.23s.
--> 0edfffc8819
STEP 8/10: RUN yarn build --ignore-engines
yarn run v1.22.19
$ node build.js --ignore-engines
Cloning into 'vscode'...
Note: switching to '441438abd1ac652551dbe4d408dfcec8a499b8bf'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

$ node build/npm/preinstall.js
*** Warning: Versions of node.js >= 17 have not been tested.
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^14 || ^16 || ^17 || ^18". Got "19.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
node:child_process:960
    throw err;
    ^

Error: Command failed: yarn
    at checkExecSyncError (node:child_process:885:11)
    at Object.execSync (node:child_process:957:15)
    at Object.<anonymous> (/app/build.js:16:17)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 29,
  stdout: null,
  stderr: null
}

Node.js v19.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: building at STEP "RUN yarn build --ignore-engines": while running runtime: exit status 1

Dockerfile configuration:

FROM artixlinux/yay

USER root

WORKDIR /

RUN git clone https://github.com/Felx-B/vscode-web app

WORKDIR /app

RUN pacman -Syu --noconfirm yarn nodejs npm

RUN yarn --ignore-engines
RUN yarn build --ignore-engines
RUN yarn prepare-demo --ignore-engines

CMD ["sh", "-c", "yarn demo --ignore-engines"]

How to connect to a remote machine/workspace?

Hi,
There is a usecase where user has a remote machine (or just remote container) and they want vscode-web can connect to it so that when open terminal on vscode-web, it will open terminal on that remote machine.
Can we do that with VsCode-web?

Thank!

Extension blocked with HTTPS - Mixed Content

Hi Felix,

Thanks a lot for allowing us to deploy VSCode for the web without the complexity of their terrible build ! 👍 👍

I have an Issue with your sample when served via HTTPS :

I've done the following :

cd sample
yarn
yarn sample # or "http-server .", or configure any static webserver you want to serve from here...

It works like a charm in local (localhost), but when accessed via HTTPS from a server, the extension files won't load.

The extension seem to be resolved via a non-https Service Worker, and blocked by the browser.
I've tried Firefox and Chrome and booth do the same.

It's deployed here to illustrate : https://vscode-web-issue.lab.jimetevenard.com/

On vscode.dev all resources are resolved via https.
Any idea on this ?

Regards, Jim

How to use this beyond the sample-folder

I have built following the instructions, but am wondering how to open this without the sample-folder project. I also would like to know how to open a folder or file that exists on my harddrive? Sorry for the very basic question, and thanks!

Since version 1.68.0 some files are missing

First, thanks for the awesome library!

Since version 1.68.0, the dist/node_modules folder is missing from the package.

This causes various errors such as syntax highlighting failing to work because it can't find vscode-onigurama.

add extension, use product.json

hello
first good job
second can you provide example how can i add a new extension that i created
third how can i use product.json file

Register FileSystemHandle metadata for common text/code files

• https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files
• https://caniuse.com/mdn-api_filesystemhandle
• https://web.dev/file-handling/
• https://excalidraw.com/

Example of what it looks like with the Excalidraw PWA (This is in no way a native App, this was installed by chrome from the URL):

how can I use it as a service to open each sub folder from root

I have created a directory D:/h5apps , how can I use vscode-web to open each sub directories, just like:

http://host:8080/edit/app01 ==> D:/h5apps/app01

http://host:8080/edit/app02 ==> D:/h5apps/app02

http://host:8080/edit/app03 ==> D:/h5apps/app03

thank you

LSP web extension with worker failed

I wanna to place this extension under the sample folder:

It looks well and it has been deployed to the web server:

sample/moonbit$ ls
dist  language-configuration.json  LICENSE.txt  package.json  README.md  snippets  syntaxes

$ ls dist/
client.js  client.web.js  server.js  server.web.js

However, when I tried to run on web page, there's an error:

"Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://moonbit/dist/server.web.js' failed to load."

For the extension itself, the syntax highlight works, the snippets works. However, auto-complete not work(It depends on the server.web.js), just wondering if anything I'd missed?

And it's weird that the client.web.js loaded succeed:

Is it possible to properly override the behavior of File > Open?

I have a web-based file open dialog I'd like to use to open files for VS Code for the We. I know it is possible, but right now I'm doing it using a dynamic chain of MutationObservers that watch and modify the vscode ui on the fly as menus are created and destroyed. It's a crazy amount of logistics, so I was wondering if anyone here knows if VS Code for the Web provides a better way of doing that. If not I'll just continue using black magic to control chaos. #pleasesaveme

Source code for extension

Can you provide the source code for the extension.js?

I want to learn how to implement the fsprovider.

Thanks.

embed to angular project

Hello, the project is great, but think it would be possible to import it into a component of an angular project?

How to communicate with external pages ?

My scenario is to use the IDE nested in a page, and I need to control the file content in the IDE through the page. Is there any way to expose the memfs instance? thanks !

Help understanding Folder URI

I need some basic feedback how this folderUri should be understood.

I suppose the default setting is to load a sample from memory, but I would like to show content of a folder as the files. I'm building it in Docker so I will map a drive, for example on the instance files are located in /www.

How should I approach displaying and editing files in that folder?

yarn build err

cd ./sample
yarn ok
yarn sample ok
http://127.0.0.1:8080 ok
cd ..
yarn ok
yarn build err
###########################
this is log
yarn run v1.22.18
$ node build.js
$ node --max_old_space_size=8192 ./node_modules/gulp/bin/gulp.js vscode-web-min
Error: Cannot find module 'vscode-gulp-watch'
Require stack:

• /home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js
• /home/cws/vscode-web-1.67.1/vscode/build/lib/compilation.js
• /home/cws/vscode-web-1.67.1/vscode/build/gulpfile.js
• /home/cws/vscode-web-1.67.1/vscode/gulpfile.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/shared/require-or-import.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/index.js
• /home/cws/vscode-web-1.67.1/vscode/node_modules/gulp/bin/gulp.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
  at Function.Module._load (internal/modules/cjs/loader.js:746:27)
  at Module.require (internal/modules/cjs/loader.js:974:19)
  at require (internal/modules/cjs/helpers.js:101:18)
  at Object. (/home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js:6:73)
  at Module._compile (internal/modules/cjs/loader.js:1085:14)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
  at Module.load (internal/modules/cjs/loader.js:950:32)
  at Function.Module._load (internal/modules/cjs/loader.js:790:12)
  at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/home/cws/vscode-web-1.67.1/vscode/build/lib/watch/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/build/lib/compilation.js',
  '/home/cws/vscode-web-1.67.1/vscode/build/gulpfile.js',
  '/home/cws/vscode-web-1.67.1/vscode/gulpfile.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/shared/require-or-import.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp-cli/index.js',
  '/home/cws/vscode-web-1.67.1/vscode/node_modules/gulp/bin/gulp.js'
  ]
  }
  error Command failed with exit code 1.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  child_process.js:866
  throw err;
  ^

Error: Command failed: yarn gulp vscode-web-min
at checkExecSyncError (child_process.js:790:11)
at Object.execSync (child_process.js:863:15)
at Object. (/home/cws/vscode-web-1.67.1/build.js:25:15)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
at internal/main/run_main_module.js:17:47 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 23578,
stdout: null,
stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Install and config to Angular

Hello
What is the config to install it on Angular please ?

Thanks in advance

How to use npm package?

How to use this package in our codebase? There is no instruction