Static resources
Static resources represent resources that are not dynamically generated such as:
- Styles (*.css)
- Scripts (*.js)
- Images
- Sounds
- Documents
As it is presented in the architecture section, static resources are located by default in a directory named web
that is relative to the server executable.
In a real scenario, this is not always the case. Depending on how and where the server is deployed, static resources could also be deployed in another directory or a remote bucket such as S3 or Google Cloud Storage.
Access static resources
Whether there are in a local or remote location, static resources are always located in a single directory referred to as the web
directory:
/web/RESOURCE_NAME
In Handler
Static resources used in a Handler are usually icons, CSS, and Javascript files.
http.Handle("/", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
Icon: app.Icon{
Default: "/web/logo.png", // Specify default favicon.
AppleTouch: "/web/logo-apple.png", // Specify icon on IOS devices.
},
Styles: []string{
"/web/hello.css", // Loads hello.css file.
},
Scripts: []string{
"/web/hello.js", // Loads hello.js file.
},
})
In components
func (f *foo) Render() app.UI {
return app.Img().
Alt("An image").
Src("/web/foo.png") // Specify image source to foo.png.
}
In CSS files
Static resources can also be referred to in a CSS file. Here is an example that specifies a background image:
.bg {
background-image: url("/web/bg.jpg");
}
Setup local web directory
By default, the web directory is located next to the server binary.
.
├── ... # Other source files.
├── hello # Server binary.
└── web # Web directory.
└── ... # Static resources.
The location of the web directory is changed by setting the Handler with a LocalDir resource provider:
http.Handle("/", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
Resources: app.LocalDir("/tmp/web"),
})
In the example above, static resources must be located in /tmp/web
.
Note that within the Handler and the app, they will still be accessed by using the pattern /web/RESOURCE_NAME
.
Setup remote web directory
When deployed on a cloud provider, it is a common practice to put static resources in a storage service such as S3 or Google Cloud Storage. In this scenario, changing the web directory to a remote bucket is done by using the RemoteBucket resource provider.
http.Handle("/", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
Resources: app.RemoteBucket("https://storage.googleapis.com/myapp.appspot.com"),
})
In the example above, static resources must be located in the Google Cloud Storage bucket with https://storage.googleapis.com/myapp.appspot.com
URL.
Note that within the Handler and the app, they will still be accessed by using the pattern /web/RESOURCE_NAME
. You may also have to configure the remote bucket to avoid CORS issues.
Fully static app
Apps built with this package can be generated to be deployed as a fully static website. It is useful in order to be deployed on platforms such as GitHub Pages. Static website files are generated with the GenerateStaticWebsite() function:
func main() {
err := app.GenerateStaticWebsite("/test-app", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
})
if err != nil {
log.Fatal(err)
}
}
When built and launched, the example above generates a full static website in the /test-app
directory. The generated website will have the following structure:
. # /test-app
├── app-worker.js # service-worker file (Generated).
├── app.js # Js support file (Generated).
├── index.html # Index page (Generated).
├── manifest.webmanifest # PWA manifest (Generated).
├── wasm_exec.js # Wasm support file (Generated).
└── web # Web directory.
└── app.wasm # Wasm app (Manually built).
Note that app.wasm
is still built separately with:
GOARCH=wasm GOOS=js go build -o /test-app/web/app.wasm`
GitHub Pages
The generated static website can be dropped directly in a GitHub repository, either in the root or in the docs
directory depending on how GitHub Pages is configured.
By default, there is no domain associated to the repository GitHub Pages. In that case the Handler resource provider must be set with GitHubPages:
func main() {
app.GenerateStaticWebsite("/test-app", &app.Handler{
Name: "Hello",
Description: "An Hello World! example",
Resources: app.GitHubPages("REPOSITORY_NAME"),
})
}
This will fix static resources issues cause by repository name that GitHub adds as a prefix in the URL path.