Skip to content
GitLab Next
  • Menu
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • GitLab FOSS GitLab FOSS
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 1
    • Merge requests 1
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Container Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Metrics
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • Code review
    • Insights
    • Issue
    • Repository
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Commits
  • Issue Boards
Collapse sidebar
  • GitLab.orgGitLab.org
  • GitLab FOSSGitLab FOSS
  • Issues
  • #47268
Closed
Open
Created Jun 04, 2018 by James Ramsay (ex-GitLab)@jramsay-gitlab🔴Contributor

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.json when 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
    • https://github.com/codesandbox-app/dependency-packager/blob/master/serverless.yml
  • 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
live-preview-with-console right-sidebar-closed live-preview-onboarding web-ide-admin-settings
  • The pane can be toggled on/off by simply clicking the right sidebar icon.
  • If the user hasn't set up the browser entry point in package.json, the "Not set up" screen is displayed.
  • If the admin were to disable client evaluation, the right sidebar button should not appear.

Links / references

  • https://codesandbox.io/
Edited Aug 15, 2018 by James Ramsay (ex-GitLab)
Assignee
Assign to
Time tracking