From 9abe5d362d226b1aaa5546b82d2bc91f27f87005 Mon Sep 17 00:00:00 2001
From: 2-5 <3753822+2-5@users.noreply.github.com>
Date: Thu, 8 Jun 2023 20:00:20 +0000
Subject: [PATCH] Added dev containers support (#4417)

* Added devcontainer support

* Updated CHANGELOG.md

* Added Dev Containers info to CONTRIBUTING.md

* Removed redundant extension

* Updated docker URLs

* Update CHANGELOG.md

* Update CHANGELOG.md

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .config/.prettierignore         |  1 +
 .devcontainer/devcontainer.json | 35 +++++++++++++++++++++++++++++++++
 .gitignore                      |  3 +++
 CONTRIBUTING.md                 | 21 ++++++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 .devcontainer/devcontainer.json

diff --git a/.config/.prettierignore b/.config/.prettierignore
index 9702d659b1..bb24b17530 100644
--- a/.config/.prettierignore
+++ b/.config/.prettierignore
@@ -8,6 +8,7 @@
 **/demo/**
 **/gradio/**
 **/website/**
+**/.pnpm-store/**
 **/.venv/**
 **/.github/**
 **/guides/**
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..0d023e9d24
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,35 @@
+// See https://containers.dev
+{
+	"name": "Python 3",
+	"image": "mcr.microsoft.com/devcontainers/python:0-3.9",
+
+	// See https://containers.dev/features
+	"features": {
+		"ghcr.io/devcontainers/features/git:1": {},
+		"ghcr.io/devcontainers/features/node:1": {},
+		"ghcr.io/devcontainers-contrib/features/ffmpeg-apt-get:1": {}
+	},
+
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-python.python",
+				"ms-python.vscode-pylance",
+				"ms-python.black-formatter",
+				"ms-toolsai.jupyter",
+				"esbenp.prettier-vscode",
+				"svelte.svelte-vscode",
+				"phoenisx.cssvar"
+			],
+			"remote.autoForwardPorts": false
+		}
+	},
+
+	"forwardPorts": [7860, 9876],
+	"portsAttributes": {
+		"7860": { "label": "gradio port" },
+		"9876": { "label": "gradio dev port" }
+	},
+
+	"postCreateCommand": "bash scripts/install_gradio.sh && scripts/install_test_requirements.sh && bash scripts/build_frontend.sh"
+}
diff --git a/.gitignore b/.gitignore
index 238d13cfe1..88fcdcdc3c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,6 +46,9 @@ demo/*/config.json
 workspace.code-workspace
 *.h5
 
+# dev containers
+.pnpm-store/
+
 # log files
 .pnpm-debug.log
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 23783913ba..1a6a03664f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -39,6 +39,27 @@ bash scripts/install_test_requirements.sh
 bash scripts/create_test_requirements.sh
 ```
 
+### Using dev containers
+
+Instead of the above steps, you can alternatively use dev containers. This is supported on all platforms (macOS/Windows/Linux).
+
+Prerequisites:
+
+- An editor which supports dev containers, like VS Code
+- Docker support on the host computer:
+  - macOS: [Docker Desktop 2.0+](https://www.docker.com/products/docker-desktop/)
+  - Windows: [Docker Desktop 2.0+](https://www.docker.com/products/docker-desktop/)
+  - Linux: [Docker CE/EE 18.06+](https://docs.docker.com/get-docker/) and [Docker Compose 1.21+](https://docs.docker.com/compose/install/)
+- If using VS Code, the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension
+
+Steps:
+
+- Clone repository
+- Open it in editor
+- For VS Code, execute `Dev Containers: Reopen in container` command
+
+For detailed instructions, please see the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial).
+
 ### Extra tidbits
 
 - You can run gradio scripts in reload mode which will watch for changes in the `gradio` folder and reload the app if changes are made.