(w)eb (d)evelopment-(41)

Test coverage: 76.640% 😌👏

This is a simple static webserver which live reloads your web-browser on changes to the hosted files.

Usage

wd-41 s|serve <relative directory> or wd-41 s|serve for hosting the current work directory

Getting started

go install github.com/baalimago/wd-41@latest

You may also use the setup script:

curl -fsSL https://raw.githubusercontent.com/baalimago/wd-41/main/setup.sh | sh

Architecture

1. First the content of the website is copied to a temporary directory, this is the mirrored content
2. Every mirrored file is inspected for type, if it's text/html, a delta-streamer.js script is injected
3. The web server is started, hosting the mirrored content
4. The delta-streamer.js in turn sets up a websocket connection to the wd-41 webserver
5. The original file system is monitored, on any file changes:
   1. the new file is copied to the mirror (including injections)
   2. the file name is propagated to the browser via the websocket
6. The delta-streamer.js script then checks if the current window origin is the updated file. If so, it reloads the page.

       ┌───────────────┐
       │ Web Developer │
       └───────┬───────┘
               │
       [writes <content>]
               │
               ▼
 ┌─────────────────────────────┐        ┌─────────────────────┐
 │ website-directory/<content> │        │ file system notify  │
 └─────────────┬───────────────┘        └─────────┬───────────┘
               │                                  │
               │                      [update mirrored content]
               ▼                                  │
     ┌────────────────────┐                       │
     │ ws-script injector │◄──────────────────────┘
     └─────────┬──────────┘
               │
               │
               ▼
   ┌────────────────────────┐
   │ tmp-abcd1234/<content> │
   └───────────┬────────────┘
               │
       [serves <content>]
               │                               ┌────────────────────────┐
               ▼                               │         Browser        │
┌──────────────────────────────┐               │                        │
│          Web Server          │               │  ┌────┐  ┌───────────┐ │
│ [localhost:<port>/<content>] │◄───[reload────┼─►│ ws │  │ <content> │ │
└──────────────────────────────┘     page]     │  └────┘  └───────────┘ │
                                               │                        │
                                               └────────────────────────┘