Install the framework and tools
First let’s install Goravel . It’s a batteries included Go Web Framework for developers familiar with the Laravel Framework.
Steps from Getting started documentation :
1// Download framework
2git clone https://github.com/goravel/goravel.git
3rm -rf goravel/.git*
4
5// Install dependencies
6cd goravel
7go mod tidy
8
9// Create .env environment configuration file
10cp .env.example .env
11
12// Generate application key
13go run . artisan key:generate
Now install templ for html templates and air for hot reloading:
1go install github.com/a-h/templ/cmd/templ@latest
2go install github.com/cosmtrek/air@latest
Configure a simple frontend template structure
(work in progress - I will update with global variables and script push)
• Add this line in your /.gitignore file: *_templ.go
• Delete resources/views/welcome.tmpl
• Create 2 folders in resources/views, home and parts
• In the folder resources/views/parts create 3 files:
1. resources/views/parts/header.templ
1package parts
2
3templ Header() {
4 <h1>Header</h1>
5}
2. resources/views/parts/footer.templ
1package parts
2
3templ Footer() {
4 <footer>
5 <p>© 2024 MyProject</p>
6 </footer>
7}
3. resources/views/parts/template.templ
1package parts
2
3templ Template() {
4 <!DOCTYPE html>
5 <html>
6 <head>
7 <title>My Page</title>
8 <meta charset="utf-8"/>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
10 <meta name="viewport" content="width=device-width, initial-scale=1"/>
11 <!-- Your styles go here -->
12 </head>
13 <body>
14 @Header()
15 { children... }
16 @Footer()
17 <!-- Your scripts go here -->
18 <script src="//unpkg.com/alpinejs" defer></script>
19 </body>
20 </html>
21}
• Create your homepage component: resources/views/home/index.templ
1package home
2
3import "goravel/resources/views/parts"
4
5templ Index() {
6 @parts.Template() {
7 <h1>Homepage</h1>
8 <div>Templ is awesome</div>
9 }
10}
Their documentation for children components is here . They have an example for a layout structure but I find this method better.
Use this homepage component in your controller
I made this new file app/http/controllers/controller.go where I can store some helpers available to any controller.
1package controllers
2
3import (
4 "github.com/a-h/templ"
5 "github.com/goravel/framework/contracts/http"
6)
7
8func RenderTempl(c http.Context, comp templ.Component) http.Response {
9 c.Response().Status(200)
10 c.Response().Header("Content-Type", "text/html")
11 comp.Render(c, c.Response().Writer())
12 return nil
13}
This helper renders the provided templ component in the response buffer along with a 200 status header.
Let’s use it in app/http/controllers/home_controller.go
1package controllers
2
3import (
4 "goravel/resources/views/home"
5 "github.com/goravel/framework/contracts/http"
6)
7
8type HomeController struct {
9 //Dependent services
10}
11
12func NewHomeController() *HomeController {
13 return &HomeController{
14 //Inject services
15 }
16}
17
18func (r *HomeController) Index(ctx http.Context) http.Response {
19 // doing awesome stuff here
20 return RenderTempl(ctx, home.Index())
21}
Now set this new route:
1package routes
2
3import (
4 "goravel/app/http/controllers"
5 "github.com/goravel/framework/facades"
6)
7
8func Web() {
9 homeController := controllers.NewHomeController()
10 facades.Route().Get("/", homeController.Index)
11}
Configure hot reloading with Air
Goravel already comes with the configuration file (.air.toml) you need for this, we only need to add the templ generate command in the cmd parameter, like this:
1[build]
2 bin = "./storage/temp/main"
3- cmd = "go build -o ./storage/temp/main ."
4+ cmd = "templ generate && go build -o ./storage/temp/main ."
If you are using Windows add .exe to main in both bin and cmd parameters:
1[build]
2 bin = "./storage/temp/main.exe"
3 cmd = "templ generate && go build -o ./storage/temp/main.exe ."
Done ! Happy coding !
Last modified on 2024-11-18