Merge branch 'ide-live-preview-docs' into 'master'

Added docs for Web IDE Client Evaluation

Closes #50143

See merge request gitlab-org/gitlab-ce!21155

3 files changed, 34 insertions, 0 deletions

diff --git a/doc/user/project/web_ide/img/admin_clientside_evaluation.png b/doc/user/project/web_ide/img/admin_clientside_evaluation.png
new file mode 100644
index 00000000000..a930490398b
--- /dev/null
+++ b/doc/user/project/web_ide/img/admin_clientside_evaluation.png
diff --git a/doc/user/project/web_ide/img/clientside_evaluation.png b/doc/user/project/web_ide/img/clientside_evaluation.png
new file mode 100644
index 00000000000..bd04d3d644b
--- /dev/null
+++ b/doc/user/project/web_ide/img/clientside_evaluation.png
diff --git a/doc/user/project/web_ide/index.md b/doc/user/project/web_ide/index.md
index 511ac2d7e79..16969b2c527 100644
--- a/doc/user/project/web_ide/index.md
+++ b/doc/user/project/web_ide/index.md
@@ -72,5 +72,39 @@ leaving the Web IDE. Click the dropdown in the top of the sidebar to open a list
 of branches. You will need to commit or discard all your changes before
 switching to a different branch.
 
+## Client Side Evaluation
+
+> [Introduced in](https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/19764) [GitLab Core][ce] 11.2.
+
+The Web IDE can be used to preview JavaScript projects right in the browser.
+This feature uses CodeSandbox to compile and bundle the JavaScript used to
+preview the web application. On public projects, an `Open in CodeSandbox`
+button is visible which will transfer the contents of the project into a
+CodeSandbox project to share with others.
+**Note** this button is not visible on private or internal projects.
+
+![Web IDE Client Side Evaluation](img/clientside_evaluation.png)
+
+### Enabling Client Side Evaluation
+
+The Client Side Evaluation feature needs to be enabled in the GitLab instances
+admin settings. Client Side Evaluation is enabled for all projects on
+GitLab.com
+
+![Admin Client Side Evaluation setting](img/admin_clientside_evaluation.png)
+
+Once it has been enabled in application settings, projects with a
+`package.json` file and a `main` entry point can be previewed inside of the Web
+IDE. An example `package.json` is below.
+
+```json
+{
+  "main": "index.js",
+  "dependencies": {
+    "vue": "latest"
+  }
+}
+```
+
 [ce]: https://about.gitlab.com/pricing/
 [ee]: https://about.gitlab.com/pricing/