WebIDE client evaluation with live preview
Codesandbox allows users to create web applications in Javascript online, including a live preview and a web inspector. This is possible by packaging npm modules for the browser and executing Javascript in the browser. We should integrate Codesandbox and GitLab so that when a user is using the Web IDE they can preview their Javascript app, and debug it in the browser.
Proposal
If the repository contains a Javascript web application, the user should be able to:
- see a button to activate (and deactivate) client evaluation live preview
We might be able to use the current version of smooshpack and self-hosted bundler (https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/sandbox/npm/fetch-dependencies.js) and rely on the codesandbox.io packager. The packager receives a list of dependencies and tries to return them from the cache or generates them on the fly.
We should make it possible for the feature to be enabled/disabled since self-hosted customers may be uncomfortable with even dependency list being sent out of the GitLab instance.
- add the ability for Admins to enable/disable the feature for the instance
- enabled for all projects, but share link disabled for Private and Internal
Technically, to make this work, we will also need to make
- download
package.jsonwhen the Web IDE loads (if the file exists) to detect if client evaluation is available for the project - automatically download to the browser all files if the user enabled client-side evaluation
- add Vue.js and React project templates, so a project can be created and opened in the Web IDE and it just works
Future enhancements
- packaging service running on the GitLab instance
- Prettier and ESLint in the browser
- Run tests in the browser
- Debug using Javascript console (not web terminal with bash session)
Design
| Pane open | Pane closed | Not set up | Admin Settings |
|---|---|---|---|
 |
 |
 |
 |
- The pane can be toggled on/off by simply clicking the right sidebar icon.
- If the user hasn't set up the
browserentry point inpackage.json, the "Not set up" screen is displayed. - If the admin were to disable client evaluation, the right sidebar button should not appear.