DEV Community

Cover image for From the Terminal to Browser: Building a Web-Based ASCII Art Generator
Tyclone81
Tyclone81

Posted on

From the Terminal to Browser: Building a Web-Based ASCII Art Generator

In my last post, I pulled back the curtain on version control. Knowing how to safely track and commit files is half the test, building software that people can actually interact with is the real test.
This project ensured I took a step up the stack. The project required me to transform a terminal-based ASCII-Art logic into a fully functional web application. This is a completely new challenge from the previous one and as usual, I was locked and ready to walk these waters.

*The Core Architecture: Serving HTTP
*

First, the web application has to constantly listen for incoming user requests, process payload data and serve responses back without crashing. GO's net/http package handles this.
_package main
import (
"fmt"
"net/http"
)
func main() {
http.HandleFunc("/", home)
http.HandleFunc("/ascii-art", artHandler)

log.Println("Server running smoothly at http://localhost:8080")
log.Fatal(http.ListenAndServe(":8080", nil))
Enter fullscreen mode Exit fullscreen mode

}_

I learnt the hard way that if a single request causes a runtime panic, the web server crashes for everyone. I had to be more cautious in handling error as a result.

*The Rendering Engine: Processing the Font File
*

This is the heart of the application. The server accepts an input string from a web form, maps each character to a corresponding visual block in a given banner text file and structures it into a graphic ASCII typography.

The logic works as follows:
File I/O: _os.ReadFile _ reads the chosen font file e.g standard, shadow or thinkertoy.
Splitting the Font: the raw banner file is then split by newline characters into a massive string slice,8 lines tall.
Mathematical Mapping: To find the starting line of any character block, its position is calculated based on its ASCII decimal value.
_startLine := int(char-32)*9 + 1
_

*Shipping the Code: Containerization with Docker
*

The program works perfectly on my local machine. However, I have learnt that local success means nothing it it does not run identically in production or on a grading server.
Therefore, I had to learn the Dockerization concept. The concept ensures that my application would run seamlessly in any given environment. It entailed packing the GO binary, the font banner files and HTML templates into a single lightweight image.
_# --- Stage 1: Build & Test Environment ---

FROM golang:1.22-alpine AS builder

Metadata to track build stages for garbage collection

LABEL stage=ascii-art-web-builder

WORKDIR /src

Copy all source files and assets needed for building and testing

COPY main.go ascii.go main_test.go go.mod ./
COPY banners/ ./banners/
COPY templates/ ./templates/

Run the automated safety test script inside the container; If any test block fails, the Docker build stops immediately

RUN go test -v

Build the optimized, statically linked Go binary

RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o ascii-art-web-server main.go ascii.go

--- Stage 2: Final Runtime Environment ---

FROM alpine:3.19

Apply metadata directly from your updated documentation

LABEL app="ascii-art-generator"
LABEL version="1.0"
LABEL description="Dockerfike for my ASCII Art Generator Web Application with Asset Auditing and In-Memory Caching."

Security: Run as a non-root user

RUN adduser -D -u 10001 appuser
USER appuser

WORKDIR /app

Copy binary from the builder stage

COPY --from=builder /src/ascii-art-web-server .

Copy assets and layout folders exactly as specified in the directory structure

COPY banners/ ./banners/
COPY templates/ ./templates/

Document the port exposed by your Main Controller

EXPOSE 8080

Execute the application

CMD ["./ascii-art-web-server"]
_

The Breakthrough

Building this web generator made everything I have learned the past month unfold before me. The strict formatting logic in go-reloaded through to the structural progress in Git. I have literally gone full circle really. From observing how tools work in the lab, to actively participating in building web platforms.

Now more than ever, I am convinced I will ultimately hack it. Through this exercise, I already have an idea in mind that I would like to implement. Stay tuned for my next post where I put the web skills into a production grade implementation.

go #beginners #webdev #buildfromhere

Top comments (0)