New multi page architecture

.env.default

@@ -0,0 +1,3 @@
+MODE=development
+HOST=:4000
+BASE_URL=http://localhost:4000

.gitignore

@@ -1,10 +1,8 @@
-# NodeJS
-node_modules/
-dist/
-
-# Server Executable
-server
-
-# Local Files
 .env
 *.local*
+bin/
+
+.out/
+out/
+dist/
+node_modules/

README.md

@@ -1,6 +1,6 @@
 # Go Vite Kit
 
-Minimal boilerplate project for a Golang server using [Fiber](https://github.com/gofiber/fiber) and [ViteJS](https://vitejs.dev/) for static pages
+Minimal boilerplate project for a Golang server using [Fiber](https://github.com/gofiber/fiber) and [ViteJS](https://github.com/vitejs/vite) for static pages
 
 ## Features
 
@@ -11,11 +11,17 @@ Minimal boilerplate project for a Golang server using [Fiber](https://github.com
 
 ## Architecture
 
--   `_frontend/`
+-   `frontend/`
 
     This is a Vite project for building all the static pages used by this app.
 
-    The `routes.js` (this is used both from `server.js` for _serving_ and from `vite.config.js` for _building_) file contains a mapping from express route patterns to entry html files, this is useful for rendering the same page for multiple urls in development mode.
+-   `backend/`
+
+    This keeps all server related files
+
+    -   `config/`
+
+        Loads env variables and keeps them as globals 
 
     -   `database/`
 
@@ -25,37 +31,36 @@ Minimal boilerplate project for a Golang server using [Fiber](https://github.com
 
         Various functions for configuring all the server routes.
 
+        A very important file is `backend/routes/router.go` that contains the `HtmlEntrypoints` variable that is used both by the backend and ViteJS to mount HTML entrypoints. 
+        
+        When building the frontend ViteJS will call `go run ./cmd/routes` to read the content of this variabile, while during development a special route called `/dev/routes` gets mounted on the backend server and this lets Vite add all necessary entrypoints to the dev server.
+
 ## Usage
 
 First install the required npm packages
 
 ```bash
-$ cd _frontend
-_frontend/ $ npm install
+$ npm install
 ```
 
 ### Development
 
 ```bash
 # Development
-$ MODE=dev go run -v .
+$ MODE=dev go run -v ./cmd/server
 
 # Development with watcher
-$ fd -e go | MODE=dev entr -r go run -v .
+$ fd -e go | MODE=dev entr -r go run -v ./cmd/server
 ```
 
 ### Production
 
-First build the `_frontend/dist` folder using
+You can build everything with the following command, it will build first the frontend and then the backend and generate `./out/server`. 
 
 ```bash
-$ cd _frontend
-$ npm run build
-```
+# Build
+$ go run -v ./cmd/build
 
-and then
-
-```bash
-# Production
-$ go run -v .
+# Run
+$ ./out/server
 ```

_frontend/routes.js

@@ -1,3 +0,0 @@
-export default {
-    '/': './index.html',
-}

_frontend/vite.config.js

@@ -1,22 +0,0 @@
-import { basename } from 'path'
-import { defineConfig } from 'vite'
-
-// Routes
-import routes from './routes.js'
-
-const entryPoints = Object.fromEntries(
-    Object.values(routes).map(path => [basename(path, '.html'), path])
-)
-
-export default defineConfig({
-    build: {
-        rollupOptions: {
-            input: entryPoints,
-        },
-    },
-    server: {
-        proxy: {
-            '/api': 'http://127.0.0.1:4000/',
-        },
-    },
-})

backend/config/config.go

@@ -31,7 +31,7 @@ func init() {
 	// Load Config
 	godotenv.Load()
 
-	Mode = loadEnv(os.Getenv("MODE"), "development")
-	Host = loadEnv(os.Getenv("HOST"), ":4000")
-	BaseURL = loadEnv(os.Getenv("HOST"), "http://localhost:4000")
+	Mode = loadEnv("MODE", "development")
+	Host = loadEnv("HOST", ":4000")
+	BaseURL = loadEnv("BASE_URL", "http://localhost:4000")
 }

backend/routes/router.go

@@ -0,0 +1,17 @@
+package routes
+
+import "go-vite-kit/backend/database"
+
+type Router struct {
+	Database database.Database
+}
+
+type htmlEntrypoint struct {
+	Route    string `json:"route"`
+	Filename string `json:"filename"`
+}
+
+var HtmlEntrypoints = []htmlEntrypoint{
+	{"/", "./index.html"},
+	// {"/u/:username", "./user.html"},
+}

cmd/build/main.go

@@ -0,0 +1,44 @@
+package main
+
+import (
+	"bufio"
+	"io"
+	"log"
+	"os"
+	"os/exec"
+
+	"github.com/fatih/color"
+)
+
+var logger = log.New(os.Stderr, "", 0)
+
+func run(command string) {
+	logger.Printf(`> %s`, color.HiWhiteString(command))
+
+	cmd := exec.Command("sh", "-c", command)
+	cmdOutReader, _ := cmd.StdoutPipe()
+	cmdErrReader, _ := cmd.StderrPipe()
+
+	s := bufio.NewScanner(io.MultiReader(cmdOutReader, cmdErrReader))
+	if err := cmd.Start(); err != nil {
+		logger.Fatal(err)
+	}
+
+	for s.Scan() {
+		logger.Printf("  %s", color.WhiteString(s.Text()))
+	}
+	if err := s.Err(); err != nil {
+		logger.Fatal(err)
+	}
+
+	if err := cmd.Wait(); err != nil {
+		logger.Fatal(err)
+	}
+
+	logger.Println()
+}
+
+func main() {
+	run(`npm run build`)
+	run(`go build -v -o ./out/server ./cmd/server`)
+}

cmd/routes/main.go

@@ -0,0 +1,16 @@
+package main
+
+import (
+	"encoding/json"
+	"go-vite-kit/backend/routes"
+	"log"
+	"os"
+)
+
+func main() {
+	enc := json.NewEncoder(os.Stdout)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(routes.HtmlEntrypoints); err != nil {
+		log.Fatal(err)
+	}
+}

cmd/server/main.go

@@ -0,0 +1,79 @@
+package main
+
+import (
+	"bufio"
+	"io"
+	"log"
+	"os"
+	"os/exec"
+	"path"
+	"strings"
+
+	"github.com/fatih/color"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/middleware/logger"
+	"github.com/gofiber/fiber/v2/middleware/recover"
+
+	"go-vite-kit/backend/config"
+	"go-vite-kit/backend/database"
+	"go-vite-kit/backend/routes"
+)
+
+const FrontendOutDir = "./out/frontend"
+
+func main() {
+	db := database.NewInMemoryDB()
+
+	router := &routes.Router{
+		Database: db,
+	}
+
+	app := fiber.New()
+
+	app.Use(logger.New())
+	app.Use(recover.New())
+
+	app.Static("/", FrontendOutDir)
+	for _, entrypoint := range routes.HtmlEntrypoints {
+		app.Get(entrypoint.Route, func(c *fiber.Ctx) error {
+			return c.SendFile(path.Join(FrontendOutDir, entrypoint.Filename))
+		})
+	}
+
+	app.Route("/api", router.Api)
+
+	if strings.HasPrefix(config.Mode, "dev") {
+		app.Get("/dev/routes", func(c *fiber.Ctx) error {
+			return c.JSON(routes.HtmlEntrypoints)
+		})
+
+		setupDevServer()
+	}
+
+	log.Fatal(app.Listen(config.Host))
+}
+
+func setupDevServer() {
+	log.Printf(`Running dev server for frontend: "npm run dev"`)
+	cmd := exec.Command("sh", "-c", "npm run dev")
+	cmdStdout, _ := cmd.StdoutPipe()
+	cmdStderr, _ := cmd.StderrPipe()
+
+	viteLogger := log.New(os.Stderr, color.HiGreenString("[ViteJS]")+" ", log.Ltime|log.Lmsgprefix)
+
+	go func() {
+		s := bufio.NewScanner(io.MultiReader(cmdStdout, cmdStderr))
+		for s.Scan() {
+			viteLogger.Print(s.Text())
+		}
+		if err := s.Err(); err != nil {
+			viteLogger.Fatal(err)
+		}
+	}()
+
+	err := cmd.Start()
+	if err != nil {
+		log.Fatal(err)
+	}
+}

frontend/index.html

@@ -11,6 +11,6 @@
 <body>
     <h1>Homepage</h1>
 
-    <script type="module" src="/src/home.js"></script>
+    <script type="module" src="/src/main.js"></script>
 </body>
 </html>

go.mod

@@ -1,4 +1,4 @@
-module server
+module go-vite-kit
 
 go 1.18
 
@@ -9,9 +9,12 @@ require (
 
 require (
 	github.com/andybalholm/brotli v1.0.4 // indirect
+	github.com/fatih/color v1.15.0 // indirect
 	github.com/klauspost/compress v1.15.0 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.17 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.37.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
-	golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9 // indirect
+	golang.org/x/sys v0.6.0 // indirect
 )

go.sum

@@ -1,11 +1,18 @@
 github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
 github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/fatih/color v1.15.0 h1:kOqh6YHBtK8aywxGerMG2Eq3H6Qgoqeo13Bk2Mv/nBs=
+github.com/fatih/color v1.15.0/go.mod h1:0h5ZqXfHYED7Bhv2ZJamyIOUej9KtShiJESRwBDUSsw=
 github.com/gofiber/fiber/v2 v2.34.1 h1:C6saXB7385HvtXX+XMzc5Dqj5S/aEXOfKCW7JNep4rA=
 github.com/gofiber/fiber/v2 v2.34.1/go.mod h1:ozRQfS+D7EL1+hMH+gutku0kfx1wLX4hAxDCtDzpj4U=
 github.com/joho/godotenv v1.4.0 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
 github.com/joho/godotenv v1.4.0/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/klauspost/compress v1.15.0 h1:xqfchp4whNFxn5A4XFyyYtitiWI8Hy5EW59jEwcyL6U=
 github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
+github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasthttp v1.37.0 h1:7WHCyI7EAkQMVmrfBhWTCOaeROb1aCBiTopx63LkMbE=
@@ -21,6 +28,9 @@ golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9 h1:nhht2DYV/Sn3qOayu8lM+cU1ii9sTLUeBQwQQfUHtrs=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0 h1:MVltZSvRTcU2ljQOhs94SXPftV6DCNnZViHeQps87pQ=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=

main.go

@@ -1,55 +0,0 @@
-package main
-
-import (
-	"bufio"
-	"log"
-	"os/exec"
-	"server/config"
-	"server/database"
-	"server/routes"
-	"strings"
-
-	"github.com/gofiber/fiber/v2"
-	"github.com/gofiber/fiber/v2/middleware/logger"
-	"github.com/gofiber/fiber/v2/middleware/recover"
-)
-
-func main() {
-	db := database.NewInMemoryDB()
-
-	router := &routes.Router{
-		Database: db,
-	}
-
-	app := fiber.New()
-
-	app.Use(logger.New())
-	app.Use(recover.New())
-
-	app.Static("/", "/_frontend/dist")
-
-	app.Route("/api", router.Api)
-
-	if strings.HasPrefix(config.Mode, "dev") {
-		log.Printf(`Running dev server for frontend: "npm run dev"`)
-		cmd := exec.Command("sh", "-c", "cd _frontend/ && npm run dev")
-		cmdStdout, _ := cmd.StdoutPipe()
-
-		go func() {
-			s := bufio.NewScanner(cmdStdout)
-			for s.Scan() {
-				log.Printf("[ViteJS] %s", s.Text())
-			}
-			if err := s.Err(); err != nil {
-				log.Fatal(err)
-			}
-		}()
-
-		err := cmd.Start()
-		if err != nil {
-			log.Fatal(err)
-		}
-	}
-
-	log.Fatal(app.Listen(config.Host))
-}

meta/dev-server.js

@@ -1,14 +1,11 @@
-import { dirname, resolve } from 'path'
+import { join } from 'path'
 import express from 'express'
 import { createServer as createViteServer } from 'vite'
-import { fileURLToPath } from 'url'
 import { readFile } from 'fs/promises'
 
-import routes from './routes.js'
+import { getDevelopmentRoutes } from './routes.js'
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-async function createServer(customHtmlRoutes) {
+async function createServer() {
     const app = express()
 
     // In middleware mode, if you want to use Vite's own HTML serving logic
@@ -17,11 +14,14 @@ async function createServer(customHtmlRoutes) {
         server: { middlewareMode: 'html' },
     })
 
-    for (const [route, file] of Object.entries(customHtmlRoutes)) {
-        app.get(route, async (req, res) => {
-            const filePath = resolve(__dirname, file)
-            console.log(`Custom Route: %s`, req.url)
+    const routes = await getDevelopmentRoutes()
 
+    console.log(`Mounting static routes:`)
+    for (const [route, file] of Object.entries(routes)) {
+        const filePath = join('./frontend', file)
+        console.log(`- "%s" => %s`, route, filePath)
+
+        app.get(route, async (req, res) => {
             const htmlFile = await readFile(filePath, 'utf8')
             const htmlViteHooksFile = await vite.transformIndexHtml(req.originalUrl, htmlFile)
 
@@ -32,7 +32,8 @@ async function createServer(customHtmlRoutes) {
 
     app.use(vite.middlewares)
 
+    console.log('Started dev server on port :3000')
     app.listen(3000)
 }
 
-createServer(routes)
+createServer()

meta/routes.js

@@ -0,0 +1,44 @@
+import { spawn } from 'child_process'
+import axios from 'axios'
+
+function transformRoutes(entrypoints) {
+    return Object.fromEntries(entrypoints.map(({ route, filename }) => [route, filename]))
+}
+
+export async function getDevelopmentRoutes() {
+    const res = await axios.get('http://127.0.0.1:4000/dev/routes')
+    return transformRoutes(res.data)
+}
+
+export async function getBuildRoutes() {
+    // Thanks to ChatGPT
+    function readCommandOutputAsJSON(command) {
+        const [cmd, ...args] = command.split(' ')
+
+        return new Promise((resolve, reject) => {
+            const child = spawn(cmd, args)
+
+            let stdout = ''
+
+            child.stdout.on('data', data => {
+                stdout += data.toString()
+            })
+
+            child.on('close', code => {
+                if (code !== 0) {
+                    reject(`Command ${cmd} ${args.join(' ')} failed with code ${code}`)
+                    return
+                }
+
+                try {
+                    const output = JSON.parse(stdout)
+                    resolve(output)
+                } catch (e) {
+                    reject(`Error parsing JSON output: ${e.message}`)
+                }
+            })
+        })
+    }
+
+    return transformRoutes(await readCommandOutputAsJSON('go run ./cmd/routes'))
+}

package.json

@@ -5,7 +5,7 @@
     "main": "index.js",
     "type": "module",
     "scripts": {
-        "dev": "node server.js",
+        "dev": "node meta/dev-server.js",
         "build": "vite build"
     },
     "license": "MIT",
@@ -13,5 +13,8 @@
         "express": "^4.18.1",
         "sass": "^1.53.0",
         "vite": "^2.9.13"
+    },
+    "dependencies": {
+        "axios": "^1.4.0"
     }
 }

routes/router.go

@@ -1,7 +0,0 @@
-package routes
-
-import "server/database"
-
-type Router struct {
-	Database database.Database
-}

vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { getBuildRoutes, getDevelopmentRoutes } from './meta/routes.js'
+
+import { join } from 'path'
+
+export default defineConfig(async config => {
+    const routes = config.command === 'build' ? await getBuildRoutes() : await getDevelopmentRoutes()
+    const entryPoints = Object.values(routes)
+    console.log('Found entrypoints:', entryPoints)
+
+    return {
+        root: './frontend',
+        build: {
+            outDir: '../out/frontend',
+            emptyOutDir: true,
+            rollupOptions: {
+                input: entryPoints.map(e => join('./frontend', e)),
+            },
+        },
+        server: {
+            proxy: {
+                '/api': 'http://127.0.0.1:4000/',
+            },
+        },
+    }
+})