Frontend

Applications generated with Ox come with the tools to compile/recompile your frontend assets and to serve them with the Buffalo file server. Ox also takes care of embedding those files within your built binary with the help of Go's embed package.

As you can see there are various moving parts when it comes to asset compilation within Ox applications. So lets take some time to explain those in this document.

The files

There are some important folders and files in ox assets lifecycle:

- app/templates- app/assets- public/assets- webpack.config.js- package.json- embedded.go

app/templates

Templates are plush templates that the app uses. These get embedded into the app by the embedded.go file in the root of the app. Some important files in that folder are:

app/templates/application.plush.html

This is the main application layout. It will be loaded by Buffalo by default and will be used as the base for all the other views.

app/templates/partials

This folder holds partials for the application. Partials are small pieces of HTML that can be reused across multiple views. Headers and footers are a good example for these.

app/assets

This is where you put your frontend assets. Typically the assets folder will have 3 folders inside:

• css : The css folder holds the styles for the app, Ox supports sass, scss and css.
• js : The js folder holds your JS files. These will be transpiled (if needed) by Webpack.
• images : Images for the app.

In the build process Ox will invoke npm to generate the compiled version of your assets in the public/assets folder.

public/assets

This folder contains the assets generated by the asset building process, which will be served by the Buffalo file server. Any time a change occurs in any of the app/assets sub directories will make Ox generate a new version of the changed files in this folder. In production, Ox does not use this folder, rather the compiled binary contains the assets embedded in it.

webpack.config.js

This file contains the webpack configuration. Ox ships with a default webpack configuration that will handle both, development and production modes. You can customize this file according to any other tools your application needs.

package.json

Package.json is the node standard file for dependencies. Ox ships with the dependencies needed to compile your frontend assets and serves them with the Buffalo file server. There are two scripts in here that are worth mentioning, build and dev.

..."scripts": {    "build": "webpack --mode production --no-stats",    "dev": "webpack --watch"  },

These scripts are invoked by ox when you run ox build or ox dev. The Build script will invoke webpack in production mode, while the dev script will invoke webpack in development mode and with that watch the files for recompilation.

embedded.go

This file defines the files being embedded into the built binary. It is generated by Ox and can be modified in case you need to add other folders. This file typically looks like the following snippet.

...var (    //go:embed app/templates public migrations config    fs embed.FS
    // Boxes used by the app, these are based on the embed.FS declared    // in the fs variable.    Assets     = fsbox.New(fs, "public")            // these are the assets served by the file server    Templates  = fsbox.New(fs, "app/templates")     // the  html templates that the app uses    Migrations = fsbox.New(fs, "migrations")    Config     = fsbox.New(fs, "config"))...

Building

Ox build command invokes the build script in package.json. Webpack takes care of building the assets and putting these in the public/assets folder.

Embedded Assets

Once the process has finished the embedded.go file contains a box that points to the public/assets folder. We use fsbox to provide a packd box that will serve Buffalo to serve these files.