Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakubkulhan/caddy-chrome
Caddy middleware to server-side render Javascript applications using Chrome
https://github.com/jakubkulhan/caddy-chrome
Last synced: 6 days ago
JSON representation
Caddy middleware to server-side render Javascript applications using Chrome
- Host: GitHub
- URL: https://github.com/jakubkulhan/caddy-chrome
- Owner: jakubkulhan
- License: mit
- Created: 2024-07-09T14:02:55.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-13T14:05:55.000Z (3 months ago)
- Last Synced: 2024-08-13T17:03:36.747Z (3 months ago)
- Language: Go
- Homepage:
- Size: 1.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Caddy Chrome
> Caddy middleware to server-side render Javascript applications using Chrome
## Server-side rendering
The middleware takes an HTML response from the upstream handlers, loads it up in Chrome on the server, and intercepts requests from the browser. Requests to the same host are routed internally in the webserver, possibly loading files, but also speaking to other applications e.g. by a reverse proxy. After the page is fully loaded, DOM is serialized to an HTML and then returned back to the client as the response.
```mermaid
sequenceDiagram
actor Client
participant Caddy
participant Chrome
Client->>Caddy: GET /index.html
activate Caddy
Caddy-->>Caddy: Load index.html file
Caddy->>Chrome: Navigate to /index.html
activate Chrome
Chrome->>Caddy: GET /index.html
Caddy->>Chrome: Respond with the index.html
Chrome->>Caddy: GET /script.js
Caddy-->>Caddy: Internal request for /script.js
Caddy->>Chrome: Respond with /script.js response
Caddy-->Chrome: ...sub-requests...
Chrome->>Caddy: HTML-serialized DOM of the page
deactivate Chrome
Caddy->>Client: Respond with the Chrome-rendered page
deactivate Caddy
```
## Asynchronous components
The middleware handles asynchronous components on the page using [`pending-task` protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/pending-task.md). For an example, see [pending_task.html](testdata/pending_task.html).
## Resource hints
Because Chrome on the server loads up the page the same way as the browser on the client, we can know what resources the page needs. Therefore, to speed up loading on the client side, the middleware adds [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload) and [preconnect](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect) resource hints as Link HTTP headers.
## Configuration
```caddy
chrome {
timeout 10s
mime_types text/html
exec /usr/bin/google-chrome --headless
exec_no_default_flags /usr/bin/google-chrome --headless
url http://localhost:9222/
fullfill_hosts localhost app.example.com api.example.com
continue_hosts cdn.example.com static.example.com
}
```
- `timeout` - maximum time to wait for Chrome to render the page, default is `10s`.
- `mime_types` - list of MIME types to render, default is `text/html`.
- Browser (only one of these):
- `exec` - executes the local browser binary by given path, if the first argument starts with a dash (`-`), the binary is automatically found in the path and all the arguments are treated as additional flags on top of the [default flags](https://pkg.go.dev/github.com/chromedp/chromedp#pkg-variables)
- `exec_no_default_flags` - the same as `exec` but without the default flags
- `url` - URL to the debugging protocol endpoint of a remote browser instance
- `fullfill_hosts` - a list of hosts to issue as internal requests through the webserver, there's automatically the host of the original request
- `continue_hosts` - a list of hosts to let Chrome do the regular network requests
## Build
```shell
xcaddy build --with github.com/jakubkulhan/caddy-chrome
```
## License
Licensed under MIT license. See [LICENSE](LICENSE).