Editing sites with Visual Studio Code


#1

Every emergence site makes its application filesystem to developers for live editing via the WebDAV protocol. The /develop endpoint serves as the base URL for the WebDAV filesystem, so the root URL to connect with any WebDAV client would look like https://example.org/develop. Opening that URL in a browser will load a browser-based editor that can use that same WebDAV interface.

How each WebDAV client accepts configuration varies, here I’ll cover one way to connect from Visual Studio Code:

  1. Log in to the site you want to edit, and then visi /login?format=json for easy access to copy your session handle

  2. Install the Remote Workspace extension

  3. Create or open an existing multi-root workspace

  4. Use the File → Open… command (as opposed to File → Open Workspace…) to to open your .code-workspace file for manual editing (as opposed to actually loading the workspace, which should already be loaded)

  5. Add a new object to the "folders" array:

    {
        "name": "my-site",
        "uri": "webdav://$session:MY_SESSION_HANDLE@my-site.example.org/?base=develop/&ssl=0",
    }
    
    • $session should be kept as the username while MY_SESSION_HANDLE is replaced with your session handle obtained in step 1
    • ssl=0 should be changed to ssl=1 if your site supports HTTPS
  6. Save your changes to the .code-workspace file, the remote root should immediately load in your editor’s file tree. Any time you save further changes to this file it should refresh/reconnect automatically.