DEV Community

Cover image for 🔥 A next-generation CLI tool for building amazing web apps in Go using htmx & hyperscript
Vic Shóstak
Vic Shóstak

Posted on

🔥 A next-generation CLI tool for building amazing web apps in Go using htmx & hyperscript

Introduction

Hey, my DEV friends! 👋

It's been a while since I've been here, hasn't it? Sorry I've been missing, but there was a good reason... one of which I'm going to talk about in this article.

So, here is a new CLI tool that I have named gowebly 👇

📝 Table of contents

What is gowebly?

It's a next-generation CLI tool that makes it easy to create amazing web applications using Go on the backend (net/http, Fiber, Echo, chi, etc.), htmx and hyperscript, and the most popular atomic/utility-first CSS frameworks (Tailwind CSS, UnoCSS, etc.) on the frontend.

Fully configured Docker files, as well, are included in your project.

GitHub logo gowebly / gowebly

🔥 A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.

gowebly logo

The Gowebly CLI

A next-generation CLI tool that makes it easy to create amazing web applications
with Go on the backend, using htmx, hyperscript or Alpine.js
and the most popular CSS frameworks on the frontend.

Go version Go report License

↘  The official Gowebly CLI documentation  ↙

English · Русский · 简体中文 · Español

↘  Share the project's link to your friends  ↙

Share on X Share on Telegram Share on WhatsApp Share on Reddit

gowebly create command

✨ Features

  • 100% free and open source under the Apache 2.0 license;
  • For any developer's level of knowledge and technical expertise, as the intelligent CLI does most of the routine project setup for you, creates an understandable structure, and prepares code for use and deployment in production;
  • Cross-platform and multi-architecture allows successful running on any GNU/Linux distros, Microsoft Windows (including WSL) and Apple macOS;
  • Well-documented, includes translations in many other languages (Русский, 简体中文, Español);
  • Enables you to start a new project faster with Go, htmx

↑ Table of contents

What is the enjoyment of using it?

The main purpose of gowebly CLI is to make it easier to create a new project. And it does this very well! But it's better to see it once than to hear it a hundred times:

The first thing you need to do is to install it. This can be done via:

  • Homebrew (for GNU/Linux and Apple macOS users);
  • Native Go installation (any platforms);
  • Docker image (any platforms);
  • Downloading a ready-made executable (any platforms).

💡 Note: No matter how exactly you want to install the gowebly CLI, it will work fine either way.

Once the gowebly CLI is installed on your system, the following commands are available to you: init, create, run, and build.

Let's take a closer look at them 😊

💡 Note: Also, keep in mind that the documentation of the gowebly project has already been translated to: Русский, 中文 and Español.

And the original language, of course, English.

init command

Command to create a default config file (.gowebly.yml) in the current folder.

gowebly init

Every time you make gowebly init command in the empty folder:

  1. CLI validates the current folder;
  2. CLI creates a default .gowebly.yml config file.

Typically, a created config file contains the following options:

backend:
   module_name: project # (string) option can be any name of your Go module (for example, 'github.com/user/project')
   go_framework: default # (string) option can be one of the values: 'fiber', 'echo', 'chi', or 'default'
   port: 5000 # (int) option can be any port that is not taken up on your system
   timeout:
      read: 5 # (int) option can be any number of seconds, 5 is recommended
      write: 10 # (int) option can be any number of seconds, 10 is recommended

frontend:
   package_name: project # (string) option can be any name of your package.json (for example, 'project')
   css_framework: default # (string) option can be one of the values: 'tailwindcss', 'unocss', or 'default'
   runtime_environment: default # (string) option can be one of the values: 'bun', or 'default'
   htmx: latest # (string) option can be any existing version
   hyperscript: latest # (string) option can be any existing version
Enter fullscreen mode Exit fullscreen mode

You can choose any Go framework for your project's backend:

Go framework Description
default Don't use any Go framework (only built-in net/http package)
fiber Use a Go backend with the Fiber web framework
echo Use a Go backend with the Echo web framework
chi Use a Go backend with the chi composable router

In additional, you can choose versions of the htmx, hyperscript, and one of the most popular atomic/utility-first CSS framework to your project:

CSS framework Description
default Don't use any CSS framework (only default styles for the code example)
tailwindcss Use the Tailwind CSS as a CSS framework
unocss Use the UnoCSS as a CSS framework

Also, you can set one of the JavaScript runtime environment for your frontend part:

JavaScript runtime Description
default Use the Node.js as a JavaScript runtime environment
bun Use the Bun as a JavaScript runtime environment

create command

Command to create a new project with the Go backend, htmx & hyperscript, and (optionally) atomic/utility-first CSS framework.

💡 Note: If you don't run init command to create a config file (.gowebly.yml), the gowebly CLI creates a new project with a default configuration.

gowebly create

Every time you make gowebly create command for your project:

  1. CLI validates the config and applies all settings to the current project;
  2. CLI prepares the backend part of your project (generates the project structure and needed utility files, runs go mod tidy);
  3. CLI prepares the frontend part of your project (generates the needed utility files, runs npm|bun install and npm|bun run build:dev for the first time);
  4. CLI downloads minimized versions of htmx and hyperscript (from official and trusted unpkg.com CDN) to the ./static folder and places them as separated <script> tags (at the bottom of the <body> tag) in the Go HTML template templates/main.html.

Typically, a created project contains the following files and folders:

.
├── assets
│   └── styles.css
├── static
│   ├── favicon.ico
│   ├── htmx.min.js
│   ├── hyperscript.min.js
│   └── styles.css
├── templates
│   ├── pages
│   │   └── index.html
│   └── main.html
├── .gitignore
├── go.mod
├── go.sum
├── handlers.go
├── main.go
├── package-lock.json
├── package.json
└── server.go
Enter fullscreen mode Exit fullscreen mode

run command

Command to run your project in a development (non-production) mode.

💡 Note: If you don't run init command to create a config file (.gowebly.yml), the gowebly CLI runs your project with a default configuration.

gowebly run

Every time you make gowebly run command for your project:

  1. CLI validates the config and applies all settings to the current project;
  2. CLI prepares the frontend part of your project (runs npm|bun run build:dev);
  3. CLI prepares a development (non-production) version of the selected CSS framework to the ./static folder and places it as a <link> tag (at the bottom of the <head> tag) in the Go HTML template templates/main.html;
  4. CLI starts a project's backend with settings from the default configuration (or from the .gowebly.yml config file) by a simple go run command.

build command

Command to build your project for production and prepare Docker files for deploy.

💡 Note: If you don't run init command to create a config file (.gowebly.yml), the gowebly CLI builds your project with a default configuration.

gowebly build

You might add the following options:

Option Description Required?
--skip-docker Skip generation process for the Docker files (it's helpful if you've your own) no

Every time you make gowebly build command for your project:

  1. CLI validates the config and applies all settings to the current project;
  2. CLI downloads minimized versions of htmx and hyperscript (from official and trusted unpkg.com CDN) to the ./static folder and places them as separated <script> tags (at the bottom of the <body> tag) in the Go HTML template templates/main.html;
  3. CLI prepares a production version of the selected CSS framework and places it as a <link> tag (at the bottom of the <head> tag) in the Go HTML template templates/main.html;
  4. If the --skip-docker option is not set, CLI generate a clear and well-documented Docker files (.dockerignore, Dockerfile, docker-compose.yml) in the root of the project folder to deploy it in isolated containers via Portainer (recommended), or manually, to your remote server.

↑ Table of contents

gowebly logo

Motivation in CLI creation

Tell me, how often have you had to start a new project from scratch and had to make painful manual configurations? 🤔 Especially, when you are just getting acquainted with a new technology or stack, where everything is new to you.

For many developers, including me, this process is as tedious and even depressing as possible, and doesn't carry any useful workload. It is a very frustrating process that can push any developer away from technology a lot.

Why not just give all that awful manual work to machines? Let them do all the hard work for us, and we will just create awesome web products and not have to think about build and deploy.

That's why I created the gowebly CLI and its helpers' library, which helps you start an amazing web applications in Go using htmx, hyperscript and popular atomic/utility-first CSS frameworks.

I am here to save you (and myself) from this routine pain! ✨

Earlier, I have already saved the world once, it was Create Go App (yep, that's my project too). The GitHub stars statistics of this project can't lie: more than 2.2k developers of any level and different countries start a new project through this CLI tool.

↑ Table of contents

Mutually beneficial cooperation

And now, I invite you to participate in this project! Let's work together to create the most useful tool for developers on the web today.

  • Issues: ask questions and submit your features.
  • Pull requests: send your improvements to the current.

Your PRs & issues are welcome! Thank you 😘

↑ Table of contents

Photos and videos by

P.S.

If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My projects that need your help (and stars) 👇

  • 🔥 gowebly: A next-generation CLI tool for easily build amazing web applications with Go on the backend, using htmx & hyperscript and the most popular atomic/utility-first CSS frameworks on the frontend.
  • create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
  • 🏃 yatr: Yet Another Task Runner allows you to organize and automate your routine operations that you normally do in Makefile (or else) for each project.
  • 📚 gosl: The Go Snippet Library provides snippets collection for working with routine operations in your Go programs with a super user-friendly API and the most efficient performance.
  • 🏄‍♂️ csv2api: The parser reads the CSV file with the raw data, filters the records, identifies fields to be changed, and sends a request to update the data to the specified endpoint of your REST API.
  • 🚴 json2csv: The parser can read given folder with JSON files, filtering and qualifying input data with intent & stop words dictionaries and save results to CSV files by given chunk size.

Top comments (9)

Collapse
 
andrioid profile image
Andri

Cool! I've been on a similar journey from server-rendered PHP, to React and now considering if the complexity cost of single-page-applications is too high; I recently played around with Go templates and HTMX.

Any plans for using the "embed" package for building, instead of building containers? The only thing easier than deploying a container, is deploying a single binary.

Is there a non-trivial example with server-side-rendering, database and all that good stuff? Preparing the data for the templates, was the most challenging part in my experiments, and having something like file-based-routing, would be nice too.

Collapse
 
koddr profile image
Vic Shóstak • Edited

Hi,

Glad to hear such a good review of my work! Thank you.

Could you please clarify what is meant by embedded delivery? How would you like to see it?

Basically, I could add functionality to the CLI so that the final build (both frontend and backend) is immediately available in a single binary file to simply run on the server if the Docker option is not suitable for the user.

Collapse
 
andrioid profile image
Andri

Just something like a “package” command that embeds all of the pages and assets inside a binary file. Go can already do this.

I think that’s a much more sensible way of default deployment

Collapse
 
ayonli profile image
A-yon Lee

Isn’t HTMX a last-generation thing? I remember some websites were using this kind of stuff many years ago.

Collapse
 
koddr profile image
Vic Shóstak

For me, htmx is a breath of fresh air in the world of complex frontend. I love frontend (and everything related to it), but I've always been uncomfortable customizing a workspace for React/Vue to do simple things in HTML templates.

✨ Now simple (and truly reactive) things can be done without knowing JS at all, just with htmx + hyperscript ✨

And that's super cool, in my opinion!

Collapse
 
mariusty profile image
mariusty

Super cool and interesting article! Also I really like your style, keep posting!

Collapse
 
koddr profile image
Vic Shóstak

Thanks 😘

Collapse
 
nobletv profile image
janoble

**Super Duper! **My friend this is an excellent job you did... liked it a lot.... I have bee trying with it and the cli is what you promise.... Good Work!

Collapse
 
koddr profile image
Vic Shóstak

Thanks for the feedback! It helps me make the product even better every day.

I can't wait to see the projects you create! Post links to their repositories or URLs in the comments. I'm very interested! 😊