This is a sample application that uses a Go backend to serve content using HTMX and Te 8000 mpl. For styling, it uses Tailwind and Flowbite. It supports live reloading (using Air) and browser reloading (simply using server-sent events). Assets are hashed using hashfs. There are helpers in Go for setting active pages based on page URL.
The reason why I like this approach is it keeps the majority of your front-end logic in Go and HTML so it does not require a front-end framework like React or Vue, it uses the HTMX library to provide many of the features of dynamic web applications like loading content without having to do a full page render.
Some of the unique features are explained below in how they flow from config to Go to HTML templates:
- Browser reloading: enabled from a config file (.env), stored in the request context (server/middleware.go), loaded from request context by a web helper (web/helpers.go), then used as a conditional in the web template (web/base.templ). The handler the sends the SSE is in server/reload.go. The javascript code that listens for SSEs is in web/assets/js/hotreload.js.
- Asset hashing: enabled from a config file (.env), stored in the request context (server/middleware.go), enabled on the assets (server/routes.go), loaded from request context by a web helper (web/helpers.go), then used on each asset in the web template (web/base.templ).
- Active page determination: URL is stored in the request context (server/middleware.go), web helper determine if the URL matches the current page from request context (web/helpers.go), and it's used in web templates on menu items (web/navigation.templ).
- Navmenu Reloading: stored in the request context (server/middleware.go), loaded from request context by a web helper (web/helpers.go), then referenced in the web template (web/navigation.templ).
Note: The UI itself is very basic, it's not a real web application, it's just designed to show how the different components work together in code. There are UI elements that could be improved.
To test the application locally, you can run these commands. You will need to install Go and NPM before running these commands.
# Clone the repo.
git git@github.com:josephspurrier/gohtmxapp.git
# Change to the project directory.
cd gohtmxapp
# Create the config.
cp example.env .env
# Install the dependencies.
make install
# Start the web server with reload capability.
make watch
# Open your browser to view the application: http://localhost:8080/dashboard
# Most of the pages are placeholders, but a few pages do have content: Dashboard, Test Form, and Settings.This projects uses a combination of tools to make management of dependencies, reloading, and a few other things easier.
- Makefile contains helpful commands to interact with the project during development.
- Air is used to rebuild the Go binary with files changes.
- package.json contains dependencies for this project. There is no advanced system outside of a few commands like creating a tailwind CSS output file.
- templ is used for templating in Go. You may want to set up your IDE using these suggestions. If you're using VSCode and don't want file nesting in the explorer window when using the
templextension, you can add this to your VSCode settings.json:"explorer.fileNesting.enabled": false.
To install any dependencies using npm, you should install them as dev dependencies like this: npm install -D htmx.org@2. The make install command does call the npm scripts to copy the dependencies to the correct web/assets/js folder.
This project was created initially using Go-Blueprint and then modified to fit my needs.
You can update the assets/favicon folder with your own Favicon: http://realfavicongenerator.net.
You should add to your .env or .envrc file.
For .env:
# App Config.
PORT=8080
HASH_ASSETS=true
APPLICATION_URL="https://app-name-here.fly.dev"
HOT_RELOAD=trueFor .envrc (direnv required):
# App Config.
export PORT=8080
export HASH_ASSETS=true
export APPLICATION_URL="https://app-name-here.fly.dev"
export HOT_RELOAD=trueYou can run these commands from your terminal:
# Install and setup the project dependencies.
make install
# Start the web server and watch the files for changes.
make watch
Other commands:
# Clean up binary from the last build.
make clean
# Build the application.
make build
# Run the application.
make run
# Run the test suite.
make test