๐Ÿ”ฅ A next-generation CLI tool for building amazing web apps in Go using htmx & hyperscript

koddr

Vic Shรณstak

Posted on September 30, 2023

๐Ÿ”ฅ 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โ€ฆ

โ†‘ 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! ๐Ÿ˜ป

โ—๏ธ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.

support me on Boosty

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 main projects that need your help (and stars) ๐Ÿ‘‡

  • ๐Ÿ”ฅ 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.
  • โœจ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: yatr, gosl, json2csv, csv2api.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
koddr
Vic Shรณstak

Posted on September 30, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About