Images and Static Resources
Intro
Images and other resources are often used to enhance a user interface. They are referred to as static resources. Here is a list of common static resources:
- Images
- Documents
- Sounds
- CSS files
- JavaScript files
Access static resources
To work with go-app, static resources are to be put into a directory called web
, by default located next to the server executable. They are then accessible by referring to the resource from the /web/
prefix:
/web/RESOURCE_NAME
You will find below a couple of examples about how static resources are referred to within go-app.
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.
}
Setup Custom Web directory
By default relative to the working directory, the web
directory can be configured to be located in other locations such as a different local directory or a remote bucket.
Keep in mind that wherever the directory is located, static resources will always be accessible from /web/RESOURCE_NAME
in code.
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 will be located in /tmp/web/
, but still accessed from /web/
when referred elsewhere in the Handler and within components.
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 are located in the Google Cloud Storage bucket, at the https://storage.googleapis.com/myapp.appspot.com
URL. Static resources will still referred from /web/
elsewhere in the Handler and within components.
You may also have to configure the remote bucket to avoid CORS issues.