https://github.com/baalimago/wd-41
Web-Development 41, a static web server with live-reload
https://github.com/baalimago/wd-41
cli development golang web-development-tools websocket
Last synced: 7 months ago
JSON representation
Web-Development 41, a static web server with live-reload
- Host: GitHub
- URL: https://github.com/baalimago/wd-41
- Owner: baalimago
- License: mit
- Created: 2024-08-04T17:29:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-30T11:28:30.000Z (12 months ago)
- Last Synced: 2025-03-29T14:05:15.315Z (8 months ago)
- Topics: cli, development, golang, web-development-tools, websocket
- Language: Go
- Homepage:
- Size: 65.4 KB
- Stars: 147
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-go-cn - wd-41 - reload on file changes. [![godoc][D]](https://godoc.org/github.com/baalimago/wd-41) (服务器应用程序 / HTTP客户端)
- awesome-go-plus - wd-41 - A (w)eb (d)evelopment server with automatic live-reload on file changes.  (Server Applications / HTTP Clients)
- awesome-go - baalimago/wd-41 - Development 41, a static web server with live-reload ☆`149` (Server Applications / HTTP Clients)
- awesome-go-with-stars - wd-41 - A (w)eb (d)evelopment server with automatic live-reload on file changes. (Server Applications / HTTP Clients)
- awesome-go - wd-41 - A (w)eb (d)evelopment server with automatic live-reload on file changes. (Server Applications / HTTP Clients)
README
# (w)eb (d)evelopment-(41)
[](https://goreportcard.com/report/github.com/baalimago/wd-41)
[](https://wakatime.com/badge/user/018cc8d2-3fd9-47ef-81dc-e4ad645d5f34/project/3bc921ec-dc23-4222-bf00-578f2eda0cbd)
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 ` or `wd-41 s|serve` for hosting the current work directory
## Getting started
```bash
go install github.com/baalimago/wd-41@latest
```
You may also use the setup script:
```bash
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_
1. Every mirrored file is inspected for type, if it's text/html, a `delta-streamer.js` script is injected
1. The web server is started, hosting the _mirrored_ content
1. The `delta-streamer.js` in turn sets up a websocket connection to the wd-41 webserver
1. The original file system is monitored, on any file changes:
1. the new file is copied to the mirror (including injections)
1. the file name is propagated to the browser via the websocket
1. 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 ]
│
▼
┌─────────────────────────────┐ ┌─────────────────────┐
│ website-directory/ │ │ file system notify │
└─────────────┬───────────────┘ └─────────┬───────────┘
│ │
│ [update mirrored content]
▼ │
┌────────────────────┐ │
│ ws-script injector │◄──────────────────────┘
└─────────┬──────────┘
│
│
▼
┌────────────────────────┐
│ tmp-abcd1234/ │
└───────────┬────────────┘
│
[serves ]
│ ┌────────────────────────┐
▼ │ Browser │
┌──────────────────────────────┐ │ │
│ Web Server │ │ ┌────┐ ┌───────────┐ │
│ [localhost:/] │◄───[reload────┼─►│ ws │ │ │ │
└──────────────────────────────┘ page] │ └────┘ └───────────┘ │
│ │
└────────────────────────┘
```