Skip to content

Automatic Workspace folders #123

Description

@thekid

Chrome has introduced a feature (currently still behind a feature-flag) to automatically discover workspace folders. What this enables is an edit-save-see-without-refreshing experience for resources like CSS files. This might be a good addition to the development server when this comes out from behind a flag.

How it works

  • The development server must deliver a file /.well-known/appspecific/com.chrome.devtools.json and specify the workspace's root directory in it
  • When the user opens the devtools, Chrome detected the folder and asks the user for consent (see below)
  • After the user accepts, resources can either be edited and saved in the devtools - or, the other way around, edited and the filesystem, with changes instantly appearing in the browser (as long as the devtool window is open)

The com.chrome.devtools.json file

{
  "workspace" : {
    "root" : "/path/to/web/root",
    "uuid" : "6e29a6df-42e1-4f39-9a1b-6af7546a8ebf"
  }
}

Discovery and consent

Devtools workspace consent

Editing experience

Editor and browser

Proof of concept

use util\UUID;
use web\Application;
use web\handler\FilesFrom;

class Hello extends Application {

  public function routes() {
    $workspace= json_encode(['workspace' => [
      'root' => (string)$this->environment->webroot(),
      'uuid' => (string)UUID::randomUUID()
    ]]);
    return [
      '/(style.css|favicon.ico)' => new FilesFrom($this->environment->webroot()),
      '/.well-known/appspecific/com.chrome.devtools.json' => function($req, $res) use($workspace) {
        $res->answer(200);
        $res->send($workspace, 'application/json; charset=utf-8');
      },
      '/' => function($req, $res) {
        $res->answer(200);
        $html= sprintf(<<<'HTML'
          <html lang="en">
          <head>
            <link rel="stylesheet" href="/style.css">
          </head>
          <body>
            <h1>Hello %s</h1>
          </body>
          </html>
          HTML,
          htmlspecialchars($req->param('name', 'Guest'))
        );
        $res->send($html, 'text/html; charset=utf-8');
      },
    ];
  }
}

See also:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions