thag-stack-web-app-template

README

THAG Stack Webapp Template (TailwindCSS + HTMX + Alpine.js + Go)

A Web application template to show off the THAG Stack.

Development Setup

For the best development experience it is recomended to use a Linux or MacOS operating system and VSCode or VSCodium - Open version of VSCode as the IDE.

1. Install Golang v1.22 or greater

Follow the instalation instructions here.

2. Install Air

Air makes it easy do develop Go applications by automatically recompiling on code changes.

To install it do the following:

1. Create a directory named air within the dev directory:

   mkdir -p ./dev/air
   

2. Download air standalone executable from here.

3. Move the executable to ./dev/air.

4. Rename the executable to bin.

5. Give it executable permissions:

   chmod +x ./dev/air/bin
   

3. Install Templ

Templ is a powerful HTML templating tool that makes web development with Go easier.

To install it do the following:

To install it do the following:

1. Create a directory named templ within the dev directory:

   mkdir -p ./dev/templ
   

2. Download templ standalone executable tar ball from here.

3. Uncompress it:

   tar xfz path/to/templ.tar.gz
   

4. Move the executable to ./dev/templ.

5. Rename the executable to bin.

6. Give it executable permissions:

   chmod +x ./dev/templ/bin
   

4. Install TailwindCSS

TailwindCSS allows for modern and beautiful web UIs without leaving the HTML.

To install it do the following:

1. Create a directory named tailwindcss within the dev directory:

   mkdir -p ./dev/tailwindcss
   

2. Download tailwind standalone executable from here.

3. Move the executable to ./dev/tailwindcss.

4. Rename the executable to bin.

5. Give it executable permissions:

   chmod +x ./dev/tailwindcss/bin
   

5. Setup IDE for development

While it's not strictly necessary, adding intellisense support for HTMX, Templ, TailwindCSS and Alpine.js in your prefered IDE (if avaliable), will result in a much richer development experience.

Here is a list of extencions for VSCode/VSCodium recommended for this project:

• Go
• templ-vscode
• HTMX Attributes
• Tailwind CSS IntelliSense
• Alpine.js IntelliSense

On VSCodium some extensions are not avaliable by default on the extensions tab (Alpine.js IntelliSense for examle), but they can still be installed manually.

To manually install an extension on VSCodium, search for it on VSCode Marketplace and look the download link for the latest version. After the vsix extension file finishes downloading, install it by running:

codium --install-extension extension_file_name.vsix

# replace 'extension_file_name' for the actual file name of the extension

Development mode

Start the app in development mode by running:

make dev

Open a web browser and navigate to the URL http://localhost:3333. The application will automatically update as you make changes to the codebase.

Build for production

Build a production ready executable by running:

make build

The build executable will be avaliable on ./tmp/main.