torenware / go-vite-docker

Demo project on doing frontend development with golang using Vite, Docker and SSL

Doing Frontend In Golang Apps

This repository is for a series of articles on doing front end work together with Golang web apps. Different parts of the series are branches in this repo. I start with a simple Go web application, and build on it until we get the finished system.

1. Starting version of the app. Just Go, with a bit of Bootstrap 5.
2. Adding Vite, Javascript and CSS. Link the Go app up with Vite 3, and add a bit of Javascript and CSS using Vite.
3. Dockerizing Vite and the Go Project. Create containers for Vite and for the Go application, and wire them together using a docker-compose.yaml file.
4. Adding an Nginx Router. Set up an Nginx reverse proxy to access our Go and Vite links.
5. Creating Certificates and Adding SSL to the Router. Create our certs with mkcert, and modify our Nginx reverse proxy to terminate our links with SSL.

The Articles

The pieces of the "Doing Frontend Development with Golang, JavaScript and Docker" series are now up on Medium:

• Part the First: Better JavaScript in Go with Vite
• Part the Second: Dockerize Your Go and Vite Setup
• Part the Third: Creating Certificates and Setting up a Router

Reading List

A number of articles and software packages were essential in figuring out how to do this tutorial. Here are my main sources:

• How to set up an easy and secure reverse proxy with Docker, Nginx & Letsencrypt. This freeCodeCamp piece is my major source for setting up Nginx as a reverse proxy on Docker. If you need to learn how to do that, this is your article.
• How to handle https with docker-compose and mkcert for local development Excellent instructions on how to set up and use mkcert to create certificates. As for Traefik, another solution for the reverse proxy: I just couldn't get it to work. Not the article's fault.
• Vite 3 configuration docs. Generally great, although the sections on websocket configuration are somewhat lacking. It took a fair bit of trial and error to figure out how to configure HMR.
• vite-go: Tooting my own horn here. My Vite integration module for Go.
• Air, an easy to use development build utility for Go. Air rocks, and the Air docs rock too. Using the author's docker image was truly easy to do.
• DDEV, a Docker Compose based development environment popular with the PHP community. DDEV is a great tool, and learning how DDEV works helped a great deal in getting my much more bare-boned solution to work for Go. If you do PHP development, DDEV should be an essential part of your toolset.
• Working with Microservices in Go (Golang) (Udemy course). Trevor Sawler's Go courses are excellent, and this course in particular helped me get this tutorial to work. Good background on using Docker Compose in Go development.
• Websocket Handshaking: article on how a websocket connection gets set up. Useful to know, especially when things aren't working as you expect.

Copyright © 2022 Rob Thorne

This work is licensed under a Creative Commons Attribution 4.0 International License.