jrswab

How To Build a Modern Web App in a Day

Categories: [Technology], [Programming], [Web Development]

Building a modern web application typically takes weeks of setup and configuration. You need to choose and configure a web framework, set up templates, handle CSS, create deployment pipelines, and more. But what if you could skip straight to building features? That's why I created go-htmx-forge, a template that gives you everything you need to build and deploy a modern web app in a day.

What You Get Out of the Box

In less than 10 minutes, you'll have:

• A high-performance Go web server using Echo
• Type-safe HTML templates with templ
• Modern CSS using TailwindCSS
• Dynamic interfaces with HTMX
• Automated development workflow
• Production-ready deployment pipeline
• Redis integration for sessions and caching

No more spending days on configuration. Everything just works.

Your First Hour: From Zero to Running

Here's how quickly you can get started:

# Clone the template (2 minutes)
git clone https://github.com/jrswab/go-htmx-forge your-project

# Install dependencies (5 minutes)
go mod tidy
npm install tailwindcss
go install github.com/a-h/templ/cmd/templ@latest

# Start development (1 minute)
make run

Visit localhost:3000 and you're ready to build features. No configuration needed.

Quick Win: Add Your First Feature

Let's add a dynamic user counter to show how quickly you can build real features. Here's all it takes:

1. Create a template (user_counter.templ):

   package views
   templ UserCounter(count int) {
   <div id="counter">
       <p>Current Users: {count}</p>
       <button hx-post="/increment" hx-target="#counter">
           Increment
       </button>
   </div>
   }

2. Add a handler (handlers/counter.go):

   package handlers
   func IncrementCounter(c echo.Context) error {
   count++ // Using a global for this example
   return c.Render(http.StatusOK, UserCounter(count))
   }

3. Add the route (main.go):

   app.POST("/increment", handlers.IncrementCounter)

That's it! You now have a dynamic counter that updates without page refreshes. No JavaScript required.

What You're Not Wasting Time On

Here's what you'd typically spend days setting up manually:

• CI/CD Pipeline (2-3 days saved)

  • PR workflows for testing
  • Production deployment pipeline
  • Service management

• Frontend Tools (1-2 days saved)

  • Template engine setup
  • CSS framework configuration
  • Hot reloading

• Production Setup (2-3 days saved)

  • OpenBSD service configuration
  • Redis integration
  • Logging setup

Afternoon: Building Your App

With the basics handled, you can focus on what matters:

1. Design Your Data Models (1-2 hours)

   • Add your types
   • Create your handlers
   • Set up Redis if needed

2. Create Your Views (2-3 hours)

   • Add templ templates
   • Style with TailwindCSS
   • Add HTMX interactions

3. Test and Deploy (1 hour)

   • Run the test suite
   • Push to GitHub
   • Let the workflows handle deployment

Evening: Production Deployment

When you're ready to go live, the template handles deployment for you:

1. PR Workflow tests changes in isolation:

   • Separate testing environments per branch
   • Automated tests and linting
   • Preview deployments

2. Production Workflow handles going live:

   • Zero-downtime deployments
   • OpenBSD service management
   • Automatic Redis configuration

Why OpenBSD?

I chose OpenBSD as the target platform for its security, reliability, and simplicity. The template configures everything you need:

• Secure by default settings
• Automatic service recovery
• Clean service management
• Predictable deployment environment

Looking Forward

This template is just the beginning. Future updates will include:

• Database migration templates
• Authentication patterns
• Enhanced Redis examples
• Additional deployment targets

Get Started Now

go-htmx-forge is open source under the BSD 3-Clause license. Want to build your web app today?

1. Check out the GitHub repository
2. Star it if you find it useful
3. Share your experience
4. Consider supporting my work on Liberapay

Stop wasting time on setup and start building features that matter. With go-htmx-forge, you can have your web app running in production today.