Skip to content

Commit 10de34b

Browse files
committed
add browser-go template
1 parent b43c767 commit 10de34b

File tree

7 files changed

+183
-0
lines changed

7 files changed

+183
-0
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build
2+
node_modules
3+
.wrangler
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# browser-go
2+
3+
- A template for starting a browser-based HTTP server with Go.
4+
- This template uses Cloudflare Workers to just serve a static page.
5+
- This template uses [`workers`](https://github.com/syumai/workers) package to run an HTTP server.
6+
7+
## Usage
8+
9+
- `main.go` includes simple HTTP server implementation. Feel free to edit this code and implement your own HTTP server.
10+
11+
## Requirements
12+
13+
- Node.js
14+
- Go 1.24.0 or later
15+
16+
## Getting Started
17+
18+
- Create a new worker project using this template.
19+
20+
```console
21+
npm create cloudflare@latest -- --template github.com/syumai/workers/_templates/browser/browser-go
22+
```
23+
24+
- Initialize a project.
25+
26+
```console
27+
cd my-app
28+
go mod init
29+
go mod tidy
30+
npm start # start running dev server
31+
```
32+
33+
Then, open http://localhost:8787 in your browser.
34+
35+
## Development
36+
37+
### Commands
38+
39+
```
40+
npm start # run dev server
41+
npm run build # build Go Wasm binary
42+
npm run deploy # deploy static assets
43+
```
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
package main
2+
3+
import (
4+
"bytes"
5+
"fmt"
6+
"io"
7+
"net/http"
8+
9+
"github.com/syumai/workers"
10+
)
11+
12+
func main() {
13+
http.HandleFunc("/hello", func(w http.ResponseWriter, req *http.Request) {
14+
name := req.URL.Query().Get("name")
15+
if name == "" {
16+
name = "World"
17+
}
18+
msg := fmt.Sprintf("Hello, %s!", name)
19+
w.Write([]byte(msg))
20+
})
21+
http.HandleFunc("/echo", func(w http.ResponseWriter, req *http.Request) {
22+
b, err := io.ReadAll(req.Body)
23+
if err != nil {
24+
panic(err)
25+
}
26+
io.Copy(w, bytes.NewReader(b))
27+
})
28+
workers.Serve(nil) // use http.DefaultServeMux
29+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "<TBD>",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"build": "go run github.com/syumai/workers/cmd/workers-assets-gen -mode=go -runtime=browser -o ./public/build && GOOS=js GOARCH=wasm go build -o ./public/build/app.wasm .",
7+
"deploy": "wrangler deploy",
8+
"dev": "wrangler dev",
9+
"start": "wrangler dev"
10+
},
11+
"devDependencies": {
12+
"wrangler": "^4.9.1"
13+
}
14+
}
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Go HTTP Server in the Browser</title>
6+
</head>
7+
8+
<body>
9+
<h1>Go HTTP Server in the Browser</h1>
10+
<form id="app">
11+
<div>
12+
<label>
13+
Path
14+
<select name="path">
15+
<option value="hello">/hello</option>
16+
<option value="echo">/echo</option>
17+
</select>
18+
</label>
19+
</div>
20+
<div>
21+
<label>
22+
Name (for hello)
23+
<input type="text" name="name" value="Name" />
24+
</label>
25+
</div>
26+
<div>
27+
<label>
28+
<label>
29+
Message (for echo)
30+
<input type="text" name="message" value="Message" />
31+
</label>
32+
</div>
33+
<button type="submit">Send</button>
34+
</form>
35+
36+
<h2>Result</h2>
37+
<div id="result"></div>
38+
<script src="./index.mjs" type="module"></script>
39+
</body>
40+
41+
</html>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import handlers from "./build/worker.mjs";
2+
3+
const appForm = document.getElementById("app");
4+
const resultContainer = document.getElementById("result");
5+
6+
const paths = {
7+
hello: "/hello",
8+
echo: "/echo",
9+
};
10+
11+
const methods = {
12+
hello: "GET",
13+
echo: "POST",
14+
};
15+
16+
appForm.addEventListener("submit", async (e) => {
17+
e.preventDefault();
18+
19+
const formData = new FormData(e.target);
20+
const path = formData.get("path");
21+
const message = formData.get("message");
22+
const name = formData.get("name");
23+
24+
let url = paths[path];
25+
if (path === "hello") {
26+
url = `${url}?name=${encodeURIComponent(name)}`;
27+
}
28+
29+
const req = new Request(url, {
30+
method: methods[path],
31+
body: path === "echo" ? message : undefined,
32+
});
33+
const res = await handlers.fetch(req);
34+
const text = await res.text();
35+
36+
resultContainer.textContent = text;
37+
});
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "node_modules/wrangler/config-schema.json",
3+
"name": "<TBD>",
4+
"compatibility_date": "<TBD>",
5+
"build": {
6+
"command": "npm run build"
7+
},
8+
/**
9+
* Static Assets
10+
* https://developers.cloudflare.com/workers/static-assets/binding/
11+
*/
12+
"assets": {
13+
"directory": "./public",
14+
"html_handling": "drop-trailing-slash"
15+
}
16+
}

0 commit comments

Comments
 (0)