New multi page architecture

main
Antonio De Lucreziis 2 years ago
parent 4653793eea
commit 4a738260d9

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

14
.gitignore vendored

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

@ -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,51 +11,56 @@ 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/`
- `database/`
This keeps all server related files
- `config/`
Loads env variables and keeps them as globals
- `database/`
Module with a `Database` interface and two implementation: `memDB` is an in-memory database for testing purposes. `sqliteDB` is a wrapper for working with an SQLite database.
- `routes/`
- `routes/`
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
```

File diff suppressed because it is too large Load Diff

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

@ -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/',
},
},
})

@ -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")
}

@ -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"},
}

@ -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`)
}

@ -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)
}
}

@ -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)
}
}

@ -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>

@ -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
)

@ -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=

@ -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))
}

@ -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()

@ -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'))
}

@ -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"
}
}

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

@ -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/',
},
},
}
})
Loading…
Cancel
Save