Let's make a basic working Vugu application that runs in your browser. It only takes three small files to start. Make sure you have at least Go 1.12 installed.
Create a new empty folder anywhere you like. We'll use the name
testapp
as an example. Each file you create will be directly in this folder, no subfolders are needed.
Create
go.mod
which specifies a Go module name. To get started, you can pick any name you like as a placeholder following the pattern shown. For example:
module example.org/someone/testapp
Create a Vugu component file. We'll put a click handler and an element that toggles to demonstrate some basic functionality. This first component should be called
root.vugu
:
- <div class="my-first-vugu-comp">
- <button @click="data.Toggle()">Test</button>
- <div vg-if="data.Show">I am here!</div>
- </div>
- <style>
- .my-first-vugu-comp { background: #eee; }
- </style>
- <script type="application/x-go">
- type RootData struct { Show bool }
- func (data *RootData) Toggle() { data.Show = !data.Show }
- </script>
Create a development server file. Note that this does not get compiled to WebAssembly. This is a server which serves your program up to the browser.
devserver.go
:
- // +build ignore
- package main
- import (
- "log"
- "net/http"
- "os"
- "github.com/vugu/vugu/simplehttp"
- )
- func main() {
- wd, _ := os.Getwd()
- l := "127.0.0.1:8844"
- log.Printf("Starting HTTP Server at %q", l)
- h := simplehttp.New(wd, true)
- // include a CSS file
- // simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
- log.Fatal(http.ListenAndServe(l, h))
- }
Run the server. While in the same directory, run the command
go run devserver.go
After a few brief moments, the server should start. It works the same on Windows, Linux or Mac.
Browse to it: http://127.0.0.1:8844/
Marvel at the wonder you have created.