How to Use Templ With Goravel
<h2 id=install-the-framework-and-tools>Install the framework and tools</h2><p>First let’s install
<a href=https://goravel.dev/ target=_blank rel=noopener>Goravel</a>
. It’s a batteries included Go Web Framework for developers familiar with the Laravel Framework.</p><p>Steps from
<a href=https://github.com/goravel/docs/blob/master/getting-started/installation.md target=_blank rel=noopener>Getting started documentation</a>
:</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-bash data-lang=bash><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span>// Download framework
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>git clone https://github.com/goravel/goravel.git
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span>rm -rf goravel/.git*
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span>// Install dependencies
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span><span style=color:#24909d>cd</span> goravel
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span>go mod tidy
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span>// Create .env environment configuration file
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span>cp .env.example .env
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">12</span><span>// Generate application key
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">13</span><span>go run . artisan key:generate
</span></span></code></pre></div><p>Now install
<a href=https://templ.guide/quick-start/installation target=_blank rel=noopener>templ</a>
for html templates and
<a href="https://github.com/cosmtrek/air?tab=readme-ov-file#installation" target=_blank rel=noopener>air</a>
for hot reloading:</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-bash data-lang=bash><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">1</span><span>go install github.com/a-h/templ/cmd/templ@latest
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">2</span><span>go install github.com/cosmtrek/air@latest
</span></span></code></pre></div><h2 id=configure-a-simple-frontend-template-structure>Configure a simple frontend template structure</h2><p>(work in progress - I will update with global variables and script push)</p><p>• Add this line in your <code>/.gitignore</code> file: <code>*_templ.go</code></p><p>• Delete <code>resources/views/welcome.tmpl</code></p><p>• Create 2 folders in <code>resources/views</code>, <code>home</code> and <code>parts</code></p><p>• In the folder <code>resources/views/parts</code> create 3 files:</p><p> 1. <code>resources/views/parts/header.templ</code></p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">1</span><span><span style=color:#6ab825;font-weight:700>package</span> parts
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">3</span><span>templ <span style=color:#447fcf>Header</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">4</span><span> <h1>Header</h1>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">5</span><span>}
</span></span></code></pre></div><p> 2. <code>resources/views/parts/footer.templ</code></p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">1</span><span><span style=color:#6ab825;font-weight:700>package</span> parts
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">3</span><span>templ <span style=color:#447fcf>Footer</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">4</span><span> <footer>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">5</span><span> <p>&copy; <span style=color:#3677a9>2024</span> MyProject</p>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">6</span><span> </footer>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">7</span><span>}
</span></span></code></pre></div><p> 3. <code>resources/views/parts/template.templ</code></p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>package</span> parts
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span>templ <span style=color:#447fcf>Template</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span> <!DOCTYPE html>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span> <html>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span> <head>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span> <title>My Page</title>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span> <meta charset=<span style=color:#ed9d13>"utf-8"</span>/>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> <meta http-equiv=<span style=color:#ed9d13>"Content-Type"</span> content=<span style=color:#ed9d13>"text/html; charset=utf-8"</span>/>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span> <meta name=<span style=color:#ed9d13>"viewport"</span> content=<span style=color:#ed9d13>"width=device-width, initial-scale=1"</span>/>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span> <!-- Your styles <span style=color:#6ab825;font-weight:700>go</span> here -->
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">12</span><span> </head>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">13</span><span> <body>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">14</span><span> <span style=color:#a61717;background-color:#e3d2d2>@</span><span style=color:#447fcf>Header</span>()
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">15</span><span> { children... }
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">16</span><span> <span style=color:#a61717;background-color:#e3d2d2>@</span><span style=color:#447fcf>Footer</span>()
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">17</span><span> <!-- Your scripts <span style=color:#6ab825;font-weight:700>go</span> here -->
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">18</span><span> <script src=<span style=color:#ed9d13>"//unpkg.com/alpinejs"</span> <span style=color:#6ab825;font-weight:700>defer</span>></script>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">19</span><span> </body>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">20</span><span> </html>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">21</span><span>}
</span></span></code></pre></div><p>• Create your homepage component: <code>resources/views/home/index.templ</code></p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>package</span> home
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span><span style=color:#6ab825;font-weight:700>import</span> <span style=color:#ed9d13>"goravel/resources/views/parts"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span>templ <span style=color:#447fcf>Index</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span> <span style=color:#a61717;background-color:#e3d2d2>@</span>parts.<span style=color:#447fcf>Template</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span> <h1>Homepage</h1>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span> <div>Templ is awesome</div>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> }
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span>}
</span></span></code></pre></div><p>Their documentation for
<a href=https://templ.guide/syntax-and-usage/template-composition target=_blank rel=noopener>children components is here</a>
. They have an example for a layout structure but I find this method better.</p><h2 id=use-this-homepage-component-in-your-controller>Use this homepage component in your controller</h2><p>I made this new file <code>app/http/controllers/controller.go</code> where I can store some helpers available to any controller.</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>package</span> controllers
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span><span style=color:#6ab825;font-weight:700>import</span> (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span> <span style=color:#ed9d13>"github.com/a-h/templ"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span> <span style=color:#ed9d13>"github.com/goravel/framework/contracts/http"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span><span style=color:#6ab825;font-weight:700>func</span> <span style=color:#447fcf>RenderTempl</span>(c http.Context, comp templ.Component) http.Response {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> c.<span style=color:#447fcf>Response</span>().<span style=color:#447fcf>Status</span>(<span style=color:#3677a9>200</span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span> c.<span style=color:#447fcf>Response</span>().<span style=color:#447fcf>Header</span>(<span style=color:#ed9d13>"Content-Type"</span>, <span style=color:#ed9d13>"text/html"</span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span> comp.<span style=color:#447fcf>Render</span>(c, c.<span style=color:#447fcf>Response</span>().<span style=color:#447fcf>Writer</span>())
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">12</span><span> <span style=color:#6ab825;font-weight:700>return</span> <span style=color:#6ab825;font-weight:700>nil</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">13</span><span>}
</span></span></code></pre></div><p>This helper renders the provided templ component in the response buffer along with a 200 status header.
Let’s use it in <code>app/http/controllers/home_controller.go</code></p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>package</span> controllers
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span><span style=color:#6ab825;font-weight:700>import</span> (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span> <span style=color:#ed9d13>"goravel/resources/views/home"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span> <span style=color:#ed9d13>"github.com/goravel/framework/contracts/http"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span><span style=color:#6ab825;font-weight:700>type</span> HomeController <span style=color:#6ab825;font-weight:700>struct</span> {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> <span style=color:#999;font-style:italic>//Dependent services
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span><span style=color:#999;font-style:italic></span>}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">12</span><span><span style=color:#6ab825;font-weight:700>func</span> <span style=color:#447fcf>NewHomeController</span>() *HomeController {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">13</span><span> <span style=color:#6ab825;font-weight:700>return</span> &HomeController{
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">14</span><span> <span style=color:#999;font-style:italic>//Inject services
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">15</span><span><span style=color:#999;font-style:italic></span> }
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">16</span><span>}
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">17</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">18</span><span><span style=color:#6ab825;font-weight:700>func</span> (r *HomeController) <span style=color:#447fcf>Index</span>(ctx http.Context) http.Response {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">19</span><span> <span style=color:#999;font-style:italic>// doing awesome stuff here
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">20</span><span><span style=color:#999;font-style:italic></span> <span style=color:#6ab825;font-weight:700>return</span> <span style=color:#447fcf>RenderTempl</span>(ctx, home.<span style=color:#447fcf>Index</span>())
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">21</span><span>}
</span></span></code></pre></div><p>Now set this new route:</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 1</span><span><span style=color:#6ab825;font-weight:700>package</span> routes
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 2</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 3</span><span><span style=color:#6ab825;font-weight:700>import</span> (
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 4</span><span> <span style=color:#ed9d13>"goravel/app/http/controllers"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 5</span><span> <span style=color:#ed9d13>"github.com/goravel/framework/facades"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 6</span><span>)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 7</span><span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 8</span><span><span style=color:#6ab825;font-weight:700>func</span> <span style=color:#447fcf>Web</span>() {
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868"> 9</span><span> homeController := controllers.<span style=color:#447fcf>NewHomeController</span>()
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">10</span><span> facades.<span style=color:#447fcf>Route</span>().<span style=color:#447fcf>Get</span>(<span style=color:#ed9d13>"/"</span>, homeController.Index)
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">11</span><span>}
</span></span></code></pre></div><h2 id=configure-hot-reloading-with-air>Configure hot reloading with Air</h2><p>Goravel already comes with the configuration file (<code>.air.toml</code>) you need for this, we only need to add the <code>templ generate</code> command in the cmd parameter, like this:</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-diff data-lang=diff><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">1</span><span>[build]
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">2</span><span> bin = "./storage/temp/main"
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">3</span><span><span style=color:#d22323>- cmd = "go build -o ./storage/temp/main ."
</span></span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">4</span><span><span style=color:#d22323></span><span style=color:#589819>+ cmd = "templ generate && go build -o ./storage/temp/main ."
</span></span></span></code></pre></div><p>If you are using Windows add <code>.exe</code> to main in both <code>bin</code> and <code>cmd</code> parameters:</p><div class=highlight><pre tabindex=0 style=color:#d0d0d0;background-color:#202020;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-toml data-lang=toml><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">1</span><span>[build]
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">2</span><span> bin = <span style=color:#ed9d13>"./storage/temp/main.exe"</span>
</span></span><span style=display:flex><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#686868">3</span><span> cmd = <span style=color:#ed9d13>"templ generate && go build -o ./storage/temp/main.exe ."</span>
</span></span></code></pre></div><p>Done ! Happy coding !</p><hr width=100% id=EOF><p style=color:#777>Last modified on 2024-11-18</p>