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

@@ -8,6 +8,7 @@
 **/demo/**
 **/gradio/**
 **/website/**
+**/.pnpm-store/**
 **/.venv/**
 **/.github/**
 **/guides/**

.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"
+}

.gitignore

@@ -46,6 +46,9 @@ demo/*/config.json
 workspace.code-workspace
 *.h5
 
+# dev containers
+.pnpm-store/
+
 # log files
 .pnpm-debug.log
 

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.