Custom Handler

[andrewrynhard]

It would be nice if app made it easier to work with a custom Handler. For cases like #501 , I could implement my own handler and have fine grained control.

[maxence-charriere]

Any code example of what you would like to do ?

[maxence-charriere]

Just a note that it is a standard HTTP handler, you can either decorate or override it and get a lot of fine-grained control.

[andrewrynhard]

In my case, I want to handle what is done in pkg/app/gen. I just want to use app in the wasm app. I am hitting things like

panic: syscall/js: Value.Call: property goappGetenv is not a function, got undefined [recovered]
writeSync — wasm_exec.js:51

When not using the app handler.

[maxence-charriere]

I m curious about how you would do that. You still would have to serve wasm_exec.js somewhere on the server side. What would be the value to serve your own one in a custom handler ? (And as i said, nothing stop you to override the handler or decorate it)

[maxence-charriere]

For the error you get its likely that you must define goappGetEnv func in a js file that is loaded before the wasm file. The thing this that you would have to override both app.js and wasm_exec.js.

But again what is the value to have your own one? Those 2 are required to load the wasm file in the browser and having them here is what makes using this package way easier than if you handle it yourself like in the Go wasm tutorials.

[andrewrynhard]

For the error you get its likely that you must define goappGetEnv func in a js file that is loaded before the wasm file. The thing this that you would have to override both app.js and wasm_exec.js.

But again what is the value to have your own one? Those 2 are required to load the wasm file in the browser and having them here is what makes using this package way easier than if you handle it yourself like in the Go wasm tutorials.

I can't argue for a great reason other than giving power users more options. Using #501 as an example, if using a custom handler were easier I could just handle this myself. I get that app makes things easier, but power users could want to do things in slightly different ways. Just my two cents.

[maxence-charriere]

The issue seems to be more an app.js issue than a custom handler issue. But app.js is part of the core of the package. Kind of feel natural that overriding it requires a little more than just changing the handler for that given endpoint.

Edit: also even though the package is not using embed yet, core file for running wasm are already embedded in the code.

The usecase i see that fit this issue would be to handle static resources from web directory. For now, this can Be done by registering a handler for /web/ that uses whatever you want.

[ppphp]

Here is my scene.

I found that ServeHTTP is really complex, but I need to customize the path of the static (though it is not really static) files to make it run on our stupid kubernetes system.

[maxence-charriere]

@ppphp I would need more context to understand your problem.

[ppphp]

@ppphp I would need more context to understand your problem.

Our kubernetes dispatches the HTTP traffic by adding a /servicename/ before the original path, so the index / becomes /servicename. It is ok, but the /web/main.wasm should be /servicename/web/main.wasm. I do not know how to change it. The page is a backend admin system for the go application.

[maxence-charriere]

@ppphp
you can try using a handler with another resource provider. Something like this:

func CustomProvider(root, pathPrefix string) ResourceProvider {
	root = strings.Trim(root, "/")
	pathPrefix = "/" + strings.Trim(pathPrefix, "/")

	return localDir{
		Handler: http.FileServer(http.Dir(root)),
		root:    pathPrefix,
		appWASM: pathPrefix + "/web/app.wasm",
	}
}

type customProvider struct {
	http.Handler
	root    string
	appWASM string
}

func (d customProvider) Package() string {
	return d.root
}

func (d customProvider) Static() string {
	return d.root
}

func (d customProvider) AppWASM() string {
	return d.appWASM
}

Then in the Handler:

func main() {
	// ...
	h := &app.Handler{
		Resources: CustomProvider("", "YOUR_SERVICE_NAME"),
	}
	// ...
}

Let me know if it works.

[ppphp]

@maxence-charriere It works!

[ppphp]

However, it shows 404 when I visit the index page /servicename, I did c.Request.URL.Path = "/" to redirect it to "/", but failed.

It is a 404 in go-app application, and the response of /servicename is a page with correct html elements

[maxence-charriere]

when you show the page source, do you see that your UI code is here?

[ppphp]

[ppphp]

Oh, I know it. It is a 404 on the web-app route, I will try to fix it.

[maxence-charriere]

Not this one, this is already replaced by the not found code.
=> Right-click, show page source

[ppphp]

Not this one, this is already replaced by the not found code.
=> Right-click, show page source

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta httpequiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content>
<meta name="description" content="An Hello World! example">
<meta name="keywords" content>
<meta name="theme-color" content="#2d2c2c">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
<meta property="og:url" content="http://0.0.0.0:8080/servicename">
<meta property="og:title" content="servicename">
<meta property="og:description" content="An Hello World! example">
<meta property="og:type" content="website">
<meta property="og:image" content>
<title>
servicename
</title>
<link rel="icon" type="image/png" href="https://storage.googleapis.com/murlok-github/icon-192.png">
<link rel="apple-touch-icon" href="https://storage.googleapis.com/murlok-github/icon-192.png">
<link rel="manifest" href="/manifest.webmanifest">
<link href="/app.css" type="text/css" rel="stylesheet">
<script defer src="/wasm_exec.js"></script>
<script defer src="/app.js"></script>
</head>
<body>
<div>
<div id="app-pre-render">
<div>
<h1>
calculate:
</h1>
show account 0 = 
<h1>
select user:
</h1>
<form>
<input placeholder>
<button>
submit
</button>
</form>
</div>
</div>
<div id="app-wasm-loader" class="goapp-app-info">
<img id="app-wasm-loader-icon" class="goapp-logo goapp-spin" src="https://storage.googleapis.com/murlok-github/icon-192.png">
<p id="app-wasm-loader-label" class="goapp-label">
Loading
</p>
</div>
</div>
<div id="app-end"></div>
</body>
</html>

[maxence-charriere]

I think I found the problem. Can you try this branch:

go get -u -v github.com/maxence-charriere/go-app/v8@48b1984

[ppphp]

I think I found the problem. Can you try this branch:

go get -u -v github.com/maxence-charriere/go-app/v8@48b1984

It works again!

[maxence-charriere]

All right can you hang a little bit with this branch? I'll release a proper version by the end of the week.

[ppphp]

Sure. Thank you for your help.

[maxence-charriere]

@ppphp Just push v8.0.2 that fixes the problem.
I also added a custom provider => https://go-app.dev/reference#CustomProvider that is the implementation I gave you above.

[maxence-charriere]

Still thinking that this can be solved with http.Handler decorator. Closing this for now.