https://github.com/remast/go_buffalo_turbo
Simple example for using Buffalo with Turbo powers to develop modern, user-friendly web applications.
https://github.com/remast/go_buffalo_turbo
go golang hotwire ssr turbo webdev
Last synced: 6 months ago
JSON representation
Simple example for using Buffalo with Turbo powers to develop modern, user-friendly web applications.
- Host: GitHub
- URL: https://github.com/remast/go_buffalo_turbo
- Owner: remast
- Created: 2021-01-03T21:25:28.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-01-28T11:53:09.000Z (over 1 year ago)
- Last Synced: 2024-05-01T12:15:27.419Z (over 1 year ago)
- Topics: go, golang, hotwire, ssr, turbo, webdev
- Language: HTML
- Homepage:
- Size: 369 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Go Buffalo with Turbo Powers
Modern, user-friendly web applications powered by Server Rendered HTML? This example shows how to build a modern, user-friendly web application based on HTML and the [hotwire](https://hotwire.dev/) approach. We will develop a server rendered web application in [Go]() with [Buffalo](http://gobuffalo.io) enhanced by the [Turbo]() that powers [Basecamps](https://basecamp.com/) mail service [Hey](http://hey.com/).
## Running the Example
Run the example
$ buffalo dev
Now point your browser to [http://127.0.0.1:3000](http://127.0.0.1:3000).
You'll see the app with a list of TODOs and a feed of todos on the right:
### Using the Example without Turbo
You can also try the example without Turbo and without any JavaScript at all. To use the example without Turbo just set the cookie `skipTurbo` to `true`.
## Setting up Turbo
Turbo is set up by including the Turbo JavaScript in the HTML header. In Buffalo the header is rendered by the layout template `application.plush.html`.
Add the Turbo JavaScript to [application.plush.html](templates/application.plush.html):
```html
...
```
## Turbo Frame with Lazy Loading
The home pages shows a feed of todos of other users as a feed on the right. This feed is loaded lazily as [Turbo Frame](https://turbo.hotwire.dev/reference/frames)
Example for Turbo Frame in [todo/index.plush.html](templates/todo/index.plush.html):
```html
Loading feed ...
```
## Form handling with Turbo Streams
Turbo Streams allow the server to send just fragments of HTML over the wire and only replace these fragements on the client. The example uses Turbo Streams to create new todos.
The submitted form returns a Turbo Stream if possible, see [todo.go](actions/todo.go):
```go
if acceptsTurboStream(c.Request()) {
// Handle Turbo requests
turboAction := "replace"
turboDomID := "todo_new_form"
return c.Render(http.StatusOK, r.Func("text/vnd.turbo-stream.html", createTurboWriter("todo/new.plush.html", turboAction, turboDomID)))
}
// Handle normal requests
return c.Render(http.StatusOK, r.HTML("todo/new.plush.html"))
```
## What Next?
Check out how to use Turbo Streams over WebSockets in my example [github.com/remast/go_websocket_turbo](https://github.com/remast/go_websocket_turbo)
A must is the full hotwire demo implemented in Go [github.com/while1malloc0/hotwire-go-example](https://github.com/while1malloc0/hotwire-go-example).
## Thanks to
https://github.com/luchsamapparat/ssr-to-csr