How to generate static files?

dyaskur commented 3 years ago

Question How to generate static files?

I am sorry if this is dump question, but must we need to run devserver to run the code? Can't we generate static file and run it on browser without Go server running?

I followed https://www.vugu.org/doc/build-and-dist but it's only generate main.wasm wasm_exec.js, no html on dist folder.

bradleypeabody commented 3 years ago

Vugu programs normally run in-browser in WebAssembly and sync the browser DOM directly. However it is also possible to generate static HTML using the staticrender package - https://pkg.go.dev/github.com/vugu/vugu/staticrender

If you look at the main function generated by the code generator, you'll see it uses domrender. If you do the same setup elsewhere and plug in staticrender instead, you can produce static HTML output. This works server-side (whereas the domrender stuff naturally does not, since it interacts with the browser).

Nv7-GitHub commented 3 years ago

Is Server-side rendering possible now?

bradleypeabody commented 3 years ago

Yes, it is. See above.

Nv7-GitHub commented 3 years ago

To use server-side rendering, we need 0_components_vgen.go, so should we un-gitignore that now?

bradleypeabody commented 3 years ago

It depends on if your go generate (which runs vugugen) is done as part of your normal build process. If you run that regularly, then I would suggest gitignoring *_vgen.go. If you do not and only rebuild the UI infrequently then I would suggest committing it to git.

Nv7-GitHub commented 3 years ago

But how do we import 0_components_vgen.go? It's package main, so you can't import it

bradleypeabody commented 3 years ago

Hm, that sounds like a bug. Try putting another .go file in that folder with the correct package abcxyz statement in it, and the code generator should see it and use that instead of "main".

Nv7-GitHub commented 3 years ago

But then how do we compile a non-main package to WASM?

bradleypeabody commented 3 years ago

I don't follow the question. If it's a non-main package, you can then import into either a server-side program or a wasm program. Server-side you can generate static HTML, or wasm it works like a regular Vugu program.

Please clarify more specific what you're trying to do and what the issue is.

Nv7-GitHub commented 3 years ago

So if i make the package main, I can just use go build to compile it to WASM, however I can't import it from my Backend and generate static files. But when I a non-main package, I can't use go build to compile it to WASM

bradleypeabody commented 3 years ago

But when I a non-main package, I can't use go build to compile it to WASM

Why not?

Any Go program (WASM or server-side) requires a main function to build a binary. This part has nothing to do with Vugu. You can definitely have Vugu's generated Go code in a non-main package and import it from a main package - again this is the same for WASM or server-side.

Nv7-GitHub commented 3 years ago

So do I keep a copy of the code, one as a non-main package for the server, and one as a main package for the WASM?

bradleypeabody commented 3 years ago

Perhaps this example will make it more clear:

[project]/go.mod

module myproject

[project]/cmd/staticserver/server.go

package main

import "myproject/ui/pages"

func main() {

    // do static setup and rendering using pages.Index

}

[project]/wasm/mainapp/main.go

package main

import "myproject/ui/pages"

func main() {

    // do dynamic setup and render also using pages.Index or make a separate VuguSetup in this package, etc.

}

[project]/ui/pages/pages.go

package pages // just to work around the code generator getting the package wrong, if needed

[project]/ui/pages/index.vugu

<html>
<body>
<div>
index page here
</div>
</body>
</html>

Running vugugen on this folder should produce: [project]/ui/pages/0_components_vgen.go

--

The idea above is that cmd/staticserver is a main package that can be compiled to your target server-side platform (or you local machine, etc.) and import whatever Vugu components it needs to from ui/pages or wherever. And then wasm/mainapp is a separate main package that compiles to WASM. Two separate executables (one targets your machine, one targets wasm), both importing Vugu components from a common package.

That sort of project structure should accomplish what you're after. Sorry for the lack of documentation on the matter. There is a more full example here https://github.com/vugu-examples/taco-store that is work-in-progress.

Nv7-GitHub commented 3 years ago

Ohhh ok, thanks! How did I not realize this!

vugu / vugu

How to generate static files? #198