AWS Logo
Menu
Deploying a Go Application with HTMX to AWS Elastic Beanstalk: A Step-by-Step Guide

Deploying a Go Application with HTMX to AWS Elastic Beanstalk: A Step-by-Step Guide

Learn how to deploy a Go application using HTMX to AWS Elastic Beanstalk with this comprehensive step-by-step guide. Say goodbye to complex JavaScript setups and embrace server-side rendering with HTMX. This tutorial covers everything from prerequisites to verifying your deployment, ensuring you can get your web application up and running efficiently in a scalable and managed environment. Perfect for developers looking to simplify their deployment process and leverage the power of Go and HTMX.

elasticbeanstalkawsgohtmxwebsite
Grant Starkman
Published Jun 23, 2024

Introduction

Welcome to the world of HTMX, where you can set aside your React skills and embrace a new way of building web applications without writing JavaScript. With HTMX, you no longer need to worry about client-side rendering or hooks that are difficult to reason about. Instead, you'll make requests to a backend Golang server that handles all your HTML template needs.
Deploying an HTMX Go app on the internet may seem daunting, but with this step-by-step guide, you'll find it manageable. AWS Elastic Beanstalk simplifies the deployment process by managing the underlying infrastructure for you. In this guide, we'll walk you through the process of deploying a Go application with HTMX to Elastic Beanstalk.
HTMXMeme
Prerequisites Before we begin, ensure you have the following:
  • An AWS account.
  • AWS CLI installed and configured.
  • Elastic Beanstalk CLI installed.
  • Git installed.
  • Basic knowledge of Go and HTMX.

Introduction to HTMX and Go

HTMX allows you to add AJAX, CSS Transitions, WebSockets, and Server-Sent Events (SSE) directly in HTML using attributes, enabling you to build modern user interfaces without writing JavaScript. When combined with Go, a powerful and efficient language for backend development, you get a robust and performant stack for web applications.

Go HTMX Application Setup

  • You can reference my HTMX GO Project Here: Its a simple To-Do list.
  • Ensure your Go project is structured correctly and includes HTMX. It should look something like this:
  • Ensure your file server runs on port 5000: http.ListenAndServe(":5000", nil)
  • Make sure your index.html file, which serves your static webpage and content, looks similar to this. Note that HTMX is being installed via the HTMX CDN:
  • Build your project: go build -o bin/application cmd/server/main.go
  • To configure the Elastic Beanstalk environment to build your project:
    • 1. Create the required directory structure by running: mkdir -p .platform/hooks/prebuild
    • 2. Within the prebuild directory, create a build.sh file with the following contents:
  • Also ensure that you have a file name Procfile in your project root directory with the following contents:

Initialize Elastic Beanstalk Environment and Application

After your GO HTMX project has been correctly setup you can now run eb init
When you run eb init, you are initializing an Elastic Beanstalk application in your project directory. This command sets up the necessary configuration files and connects your local project to Elastic Beanstalk.
  1. Select your region.
  2. Create a new application.
  3. Choose the Go platform.
  4. Select Amazon Linux 2023.
  5. Set up SSH access for debugging. eb ssh
  6. Select or create a key pair (usually created in the AWS console under EC2).
This should create an .elasticbeanstalk directory in your project.
After your Elastic Beanstalk application has been initialized you can now create and deploy your environment with: eb create
  1. Choose an environment name (the default should work).
  2. Select the application load balancer.
  3. You can choose not to enable spot fleets if asked.
  4. Elastic Beanstalk will attempt to deploy your application.

Verify Your Deployment

If the deployment fails:
  1. Run eb logs or eb ssh to troubleshoot.
If the deployment succeeds:
  1. Find your Elastic Beanstalk environment in the AWS console.
  2. Click the domain link provided to access your HTMX Go site. If it navigates correctly, then you have succeeded.
  3. If you need additional guidance with routing traffic with Route 53 or delivering content using a CDN with CloudFront, see this guide.
  4. Run eb deploy to attempt redeployment.
If you need any additional guidance with routing traffic with Route53 or delivering content using a CDN with Cloudfront see this guide.

Automating the Elastic Beanstalk deployment with Github actions

To automate your Elastic Beanstalk deployment, ensure that your Elastic Beanstalk application is stored in a remote GitHub repository. Follow these steps to set up a GitHub Actions workflow for deployment:
  • Step 1: Create a New GitHub Action
    • Create a new blank action in your GitHub repository by navigating to the "Actions" tab and selecting "New workflow." Use the following YAML configuration for your GitHub Action:
  • Step 2: Create the Build and Deployment Script
    • Create a recursiveBuild.sh script in your repository root directory and make it executable. This script will handle the build and deployment process:
    • You can verify that the script works by running the script locally and checking if your Elastic Beanstalk environment updates successfully.

Step 3: Commit and Push

Commit the new workflow and script to your repository:
With this setup, every push to the main branch will trigger the GitHub Action to build and deploy your Go application to AWS Elastic Beanstalk automatically. This streamlines your deployment process and ensures that your application is always up-to-date with the latest changes.

Exercise for the Reader

  • Route traffic from your elastic beanstalk domain to a custom domain using Route53.
    • Create an A record in a Route53 hosted zone that routes traffic to a Cloudfront distribution or to your elastic beanstalk domain.
  • Serve the site content globally using the AWS Content Delivery Network (CDN) with AWS Cloudfront
    • Create a Cloudfront distribution by setting the origin domain to the elastic beanstalk domain using HTTP port 80.
    • Also set the behavior to redirect traffic from HTTP to HTTPS and also set the cache policy to disabled - you do not want the responses to your request to be cached so you can get a fresh response for every request
    • Be sure to also set a custom SSL certificate and the custom domain you created in Route53
  • Connect a database to your instance using AWS RDS
    • You can attach an AWS RDS database in the configuration page under your Elastic Beanstalk environment.
    • Be sure your application connects to the database properly. You can ssh into your environment with eb ssh and after installing Ncat with sudo yum install nc on your eb environment you can verify connection to your database with:
  • Run /opt/elasticbeanstalk/bin/get-config environment inside your Elastic Beanstalk environment to print out the environment variables available to your application.
  • If you want to connect to your RDS instance using a local database client like DataGrip or MySQL Workbench, modify your RDS Security Group inbound rule to allow IPv4 TCP traffic on port 3306 from your source IP address.
  • If you want your Go application to connect to your RDS database, handle the connection like so:
  • Setup authentication to your page
    • Use AWS Amplify to create and configure a login page.
    • Implement authentication mechanisms to secure your application.

Conclusion

Deploying a Go application with HTMX to AWS Elastic Beanstalk is straightforward with the right steps. By following this guide, you can quickly get your application up and running in a scalable and managed environment.

Additional Resources

Feel free to ask questions or share your experiences in the comments below!
 

3 Comments