Serve web files in go

main.go

@@ -2,10 +2,12 @@ package main
 
 import (
 	"crypto/rand"
+	"embed"
 	"encoding/json"
 	"flag"
 	"fmt"
 	"io"
+	"io/fs"
 	"net/http"
 	"os"
 	"path"
@@ -20,14 +22,45 @@ import (
 var (
 	imagesDir   string
 	collageDir  string
+	localAssets bool
 )
 
+//go:embed web/*
+var webFS embed.FS
+
 func main() {
 	flag.StringVar(&imagesDir, "images-dir", "images", "Sets the images dir")
 	flag.StringVar(&collageDir, "collages-dir", "collages", "Sets the collages dir")
+	flag.BoolVar(&localAssets, "local-assets", false, "Serve local assets for testing")
+
 	flag.Parse()
 	nameGen := NewNameGen()
 	imagesDirFs := os.DirFS(imagesDir)
+	imagesURLPath := "images"
+	collagesPath := "collages"
+
+	addFileServer := func(path, dir string) {
+
+		httpFileServer := http.FileServer(http.Dir(dir))
+		http.Handle("/"+path+"/", http.StripPrefix("/"+path, httpFileServer))
+	}
+
+	addFileServer(imagesURLPath, imagesDir)
+	addFileServer(collagesPath, collageDir)
+
+	if localAssets {
+		httpFileServer := http.FileServer(http.Dir("web"))
+		http.Handle("/", httpFileServer)
+	} else {
+		fs, err := fs.Sub(webFS, "web")
+
+		if err != nil {
+			panic(err)
+		}
+
+		httpFileServer := http.FileServer(http.FS(fs))
+		http.Handle("/", httpFileServer)
+	}
 
 	http.HandleFunc("/make-collage", func(w http.ResponseWriter, r *http.Request) {
 		collageReq := collage.Request{}

req.json

@@ -1,29 +0,0 @@
-{
-    "background_image": "",
-    "aspect": { "width": 4224, "height": 3264 },
-    "dimension": { "width": 1187, "height": 848 },
-    "photos": [
-        {
-            "image": "img1.jpg",
-            "crop": {
-                "start": { "x": 419, "y": 667 },
-                "end": { "x": 2707, "y": 3389 }
-            },
-            "frame": {
-                "start": { "x": 0, "y": 0 },
-                "end": { "x": 712, "y": 848 }
-            }
-        },
-        {
-            "image": "img2.jpg",
-            "crop": {
-                "start": { "x": 331, "y": 44 },
-                "end": { "x": 1132, "y": 1468 }
-            },
-            "frame": {
-                "start": { "x": 712, "y": 0 },
-                "end": { "x": 1187, "y": 848 }
-            }
-        }
-    ]
-}

web/index.html

@@ -73,10 +73,10 @@
             </div>
             <div class="imagebox">
             <div id="collage" class="image-surface letter-landscape-2">
-                <div class="collage-img img1" data-collage-image-url="img1.jpg">
+                <div class="collage-img img1" data-collage-image-url="images/img1.jpg">
                     <!-- <img src="img1.jpg"> -->
                 </div>
-                <div class="collage-img img2" data-collage-image-url="img2.jpg">
+                <div class="collage-img img2" data-collage-image-url="images/img2.jpg">
                     <!-- <img src="img2.jpg"> -->
                 </div>
             </div>