Brackets in Browser
Clone this wiki locally
Although Brackets is packaged as a desktop application, it's built almost entirely in HTML/CSS/JS - and most of that code will run in a browser with no modifications. The functionality provided by Brackets's native desktop shell (brackets-shell) needs to be replaced or disabled, however.
Some basic parts of this work have been done by the core team in the pflynn/in-browser-file-system branch (diff). However, the core Brackets project does not provide a complete turnkey solution for running in browser.
Pieces You Must Provide
Some aspects of running Brackets in a browser are very use-case dependent, so each implementor must provide their own code:
- Server - We do not provide code for serving up the Brackets app files. Any web server should do, though.
- Backend storage - You must implement your own backend storage layer to store the text the user is editing. Provide a File System Implementation module that talks to this backend on Bracket's behalf, allowing Brackets to save and load files (among other operations). The impl acts as a bridge between the Brackets core code and your backend.
- Authentication - Presumably, your users must log in to determine which set of files in the backend storage they have access to. Brackets does not provide any code for authentication & authorization.
- Deploying builds - Use Grunt to generate a minified build of Brackets. How you deploy to your webserver is up to you, though.
Major Brackets features that do not work in-browser yet:
- Live Preview - Live Preview currently requires connecting to the Chrome Remote Debugging API, which is only accessible when Chrome is launched with a special command-line argument. We hope to avoid this requirement in the future. Live Preview also needs to run a small web server to serve up instrumented copies of the user's files; doing this from a remote server is likely trickier than the simple local Node server that Brackets uses on the desktop.
Extensions - Implementing user-installable extensions in-browser requires several considerations:
- Security - Extensions are loaded in the same domain as Brackets, so they can take any action on your website with your user's auth credentials.
- Storage -
ExtensonLoadermust be modified to load extensions from your server instead of fixed file:// URLs. To allow each user to install different extensions, your server would need to store a separate extensions folder for each user.
- Install mechanics - Brackets relies on Node-side code (part of brackets-shell) to unzip & validate extension packages. Your server would need to run this code or implement the same functionality in your preferred server-side language.
- Desktop-only extensions - Some extensions depend on Node (or other APIs only available in brackets-shell), and thus wouldn't work in browser.
- Loading feedback - Loading Brackets, or opening a large file, can take much longer than usual over a slow network connection. Brackets doesn't give any feedback and may contain race condition bugs during such unanticipated delays.
Preferences - In 0.36, preferences storage moved from browser
localStorageto local-disk JSON files. This is not easily pluggable yet, but your File System implementation can redirect reads/writes on this path to your preferred backend preferences storage mechanism.
Quick View, Image preview - These features expect image files to exist at a URL that can be read directly by the browser via an
<img src>link. Currently, the URL is assumed to be identical to the FileSystem path; these features probably need to support adding a base URL prefix so the images can be properly addressed on the server (and your server will need to expose the images at such a URL for download).
Features that are unlikely to ever work in-browser:
- Menu bar - Brackets automatically displays an HTML menu bar instead.
- Certain keyboard shortcuts - Web pages cannot use Ctrl+W, Ctrl+T, Ctrl+N, Ctrl+Tab (or any of those +Shift). The shortcuts are still displayed in the menu bar, but pressing them does invokes the standard browser command instead.
- Edit > Cut/Copy/Paste - On most browsers, it's not possible to invoke clipboard operations programmatically, so these menu items are hidden.
- Check for Updates - Since there's no way to install updates.
Everything else not listed here does work: Find/Replace in Files, Quick Edit, Quick Open, Quick View, multiple cursors, etc.
- Chrome: should work in Chrome 29+
- Internet Explorer: 10+
- Firefox: ?
- Mozilla Nimble - actively under development within the Mozilla WebMaker project. Read more on their blog or wiki.
- Treehouse Workspaces - online web development environment for Treehouse students (screenshot)
Chrome App / Chrome OS
Getting Brackets running in-brower has a lot of overlap with porting Brackets to a Chrome Packaged App or Chrome OS app. Some existing efforts: