Getting Started

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.

  1. 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.

  2. 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
    

  3. 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>

  4. 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))
    }
    

  5. 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.

  6. Browse to it: http://127.0.0.1:8844/

  7. Marvel at the wonder you have created.