Spaces Dev Mode: Seamless development in Spaces

This feature is still in Beta stage.

The Spaces Dev Mode is part ofPRO orTeam & Enterprise plans.

Spaces Dev Mode

Spaces Dev Mode is a feature that eases the debugging of your application and makes iterating on Spaces faster.

Whenever your commit some changes to your Space repo, the underlying Docker image gets rebuilt, and then a new virtual machine is provisioned to host the new container.

The Dev Mode allows you to update your Space much quicker by overriding the Docker image.

The Dev Mode Docker image starts your application as a sub-process, allowing you to restart it without stopping the Space container itself. It also starts a VS Code server and a SSH server in the background for you to connect to the Space.

The ability to connect to the running Space unlocks several use cases:

• You can make changes to the app code without the Space rebuilding everytime
• You can debug a running application and monitor resources live

Overall it makes developing and experimenting with Spaces much faster by skipping the Docker image rebuild phase.

Interface

Once the Dev Mode is enabled on your Space, you should see a modal like the following.

The application does not restart automatically when you change the code. For your changes to appear in the Space, you need to use theRefresh button that will restart the app.

SSH connection and VS Code

The Dev Mode allows you to connect to your Space’s docker container using SSH.

Instructions to connect are listed in the Dev Mode controls modal.

You will need to add your machine’s SSH public key toyour user account to be able to connect to the Space using SSH.Check out theGit over SSH documentation for more detailed instructions.

You can also use a local install of VS Code to connect to the Space container. To do so, you will need to install theSSH Remote extension.

Persisting changes

#Add changes and commit themgit add .git commit -m "Persist changes from Dev Mode"#Push the commit to persist themin the repogit push

The modal will display a warning if you have uncommitted or unpushed changes in the Space:

Enabling Dev Mode

You can enable the Dev Mode on your Space from the web interface.

You can also create a Space with the dev mode enabled:

Limitations

Dev Mode is currently not available for static Spaces. Docker Spaces also have some additional requirements.

Docker Spaces

Dev Mode is supported for Docker Spaces. However, your Space needs to comply with the following rules for Dev Mode to work properly.

1. The following packages must be installed:

• bash (required to establish SSH connections)
• curl,wget andprocps (required by the VS Code server process)
• git andgit-lfs to be able to commit and push changes from your Dev Mode environment

2. Your application code must be located in the/app folder for the Dev Mode daemon to be able to detect changes.

3. The/app folder must be owned by the user with uid1000 to allow you to make changes to the code.

4. The Dockerfile must contain aCMD instruction for startup. CheckoutDocker’s documentation about theCMD instruction for more details.

Dev Mode works well when the base image is debian-based (eg, ubuntu).

More exotic linux distros (eg, alpine) are not tested and Dev Mode is not guaranteed to work on them.

Example of compatible Dockerfiles

This is an example of a Dockerfile compatible with Spaces Dev Mode.

It installs the required packages withapt-get, along with a couple more for developer convenience (namely:top,vim andnano).It then starts a NodeJS application from/app.

FROM node:19-slimRUN apt-get update && \    apt-get install -y \      bash \      git git-lfs \      wget curl procps \      htop vim nano && \rm -rf /var/lib/apt/lists/*WORKDIR /appCOPY --link ./ /appRUN  npm iRUNchown 1000 /appUSER1000CMD ["node","index.js"]

There are several examples of Dev Mode compatible Docker Spaces in this organization.Feel free to duplicate them in your namespace!

Example Python app (FastAPI HTTP server):https://huggingface.co/spaces/dev-mode-explorers/dev-mode-python

Example Javascript app (Express.js HTTP server):https://huggingface.co/spaces/dev-mode-explorers/dev-mode-javascript

Feedback

You can share your feedback on Spaces Dev Mode directly on the HF Hub:https://huggingface.co/spaces/dev-mode-explorers/README/discussions