wd-41

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

Test coverage: 75.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 inspectd 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]     │  └────┘  └───────────┘ │
                                               │                        │
                                               └────────────────────────┘