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 .env
*.local* *.local*
bin/
.out/
out/
dist/
node_modules/

@ -1,6 +1,6 @@
# Go Vite Kit # 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 ## Features
@ -11,51 +11,56 @@ Minimal boilerplate project for a Golang server using [Fiber](https://github.com
## Architecture ## Architecture
- `_frontend/` - `frontend/`
This is a Vite project for building all the static pages used by this app. 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. 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. 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 ## Usage
First install the required npm packages First install the required npm packages
```bash ```bash
$ cd _frontend $ npm install
_frontend/ $ npm install
``` ```
### Development ### Development
```bash ```bash
# Development # Development
$ MODE=dev go run -v . $ MODE=dev go run -v ./cmd/server
# Development with watcher # 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 ### 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 ```bash
$ cd _frontend # Build
$ npm run build $ go run -v ./cmd/build
```
and then # Run
$ ./out/server
```bash
# Production
$ go run -v .
``` ```

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 // Load Config
godotenv.Load() godotenv.Load()
Mode = loadEnv(os.Getenv("MODE"), "development") Mode = loadEnv("MODE", "development")
Host = loadEnv(os.Getenv("HOST"), ":4000") Host = loadEnv("HOST", ":4000")
BaseURL = loadEnv(os.Getenv("HOST"), "http://localhost: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> <body>
<h1>Homepage</h1> <h1>Homepage</h1>
<script type="module" src="/src/home.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

@ -1,4 +1,4 @@
module server module go-vite-kit
go 1.18 go 1.18
@ -9,9 +9,12 @@ require (
require ( require (
github.com/andybalholm/brotli v1.0.4 // indirect 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/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/bytebufferpool v1.0.0 // indirect
github.com/valyala/fasthttp v1.37.0 // indirect github.com/valyala/fasthttp v1.37.0 // indirect
github.com/valyala/tcplisten v1.0.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 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig= 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 h1:C6saXB7385HvtXX+XMzc5Dqj5S/aEXOfKCW7JNep4rA=
github.com/gofiber/fiber/v2 v2.34.1/go.mod h1:ozRQfS+D7EL1+hMH+gutku0kfx1wLX4hAxDCtDzpj4U= 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 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
github.com/joho/godotenv v1.4.0/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4= 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 h1:xqfchp4whNFxn5A4XFyyYtitiWI8Hy5EW59jEwcyL6U=
github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk= 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 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc= github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
github.com/valyala/fasthttp v1.37.0 h1:7WHCyI7EAkQMVmrfBhWTCOaeROb1aCBiTopx63LkMbE= 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-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 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-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-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8= 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= 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 express from 'express'
import { createServer as createViteServer } from 'vite' import { createServer as createViteServer } from 'vite'
import { fileURLToPath } from 'url'
import { readFile } from 'fs/promises' 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() {
async function createServer(customHtmlRoutes) {
const app = express() const app = express()
// In middleware mode, if you want to use Vite's own HTML serving logic // 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' }, server: { middlewareMode: 'html' },
}) })
for (const [route, file] of Object.entries(customHtmlRoutes)) { const routes = await getDevelopmentRoutes()
app.get(route, async (req, res) => {
const filePath = resolve(__dirname, file)
console.log(`Custom Route: %s`, req.url)
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 htmlFile = await readFile(filePath, 'utf8')
const htmlViteHooksFile = await vite.transformIndexHtml(req.originalUrl, htmlFile) const htmlViteHooksFile = await vite.transformIndexHtml(req.originalUrl, htmlFile)
@ -32,7 +32,8 @@ async function createServer(customHtmlRoutes) {
app.use(vite.middlewares) app.use(vite.middlewares)
console.log('Started dev server on port :3000')
app.listen(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", "main": "index.js",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "node server.js", "dev": "node meta/dev-server.js",
"build": "vite build" "build": "vite build"
}, },
"license": "MIT", "license": "MIT",
@ -13,5 +13,8 @@
"express": "^4.18.1", "express": "^4.18.1",
"sass": "^1.53.0", "sass": "^1.53.0",
"vite": "^2.9.13" "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