fix: simplified development server architecture

main
Antonio De Lucreziis 2 years ago
parent a72f543346
commit 6ff903fb06

@ -33,7 +33,7 @@ Minimal boilerplate project for a Golang server using [Fiber](https://github.com
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. 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. When building the frontend ViteJS will call `go run ./cmd/routes` to read the content of this variabile. This is also used while developing to let Vite know add all necessary entrypoints to the dev server.
## Usage ## Usage

@ -44,10 +44,6 @@ func main() {
app.Route("/api", router.Api) app.Route("/api", router.Api)
if strings.HasPrefix(config.Mode, "dev") { if strings.HasPrefix(config.Mode, "dev") {
app.Get("/dev/routes", func(c *fiber.Ctx) error {
return c.JSON(routes.HtmlEntrypoints)
})
setupDevServer() setupDevServer()
} }

@ -3,7 +3,7 @@ import express from 'express'
import { createServer as createViteServer } from 'vite' import { createServer as createViteServer } from 'vite'
import { readFile } from 'fs/promises' import { readFile } from 'fs/promises'
import { getDevelopmentRoutes } from './routes.js' import { getBuildRoutes } from './routes.js'
async function createServer() { async function createServer() {
const app = express() const app = express()
@ -14,9 +14,9 @@ async function createServer() {
server: { middlewareMode: 'html' }, server: { middlewareMode: 'html' },
}) })
const routes = await getDevelopmentRoutes() const routes = await getBuildRoutes()
console.log(`Mounting static routes:`) console.log(`mounting static routes...`)
for (const [route, file] of Object.entries(routes)) { for (const [route, file] of Object.entries(routes)) {
const filePath = join('./frontend', file) const filePath = join('./frontend', file)
console.log(`- "%s" => %s`, route, filePath) console.log(`- "%s" => %s`, route, filePath)

@ -1,15 +1,9 @@
import { spawn } from 'child_process' import { spawn } from 'child_process'
import axios from 'axios'
function transformRoutes(entrypoints) { function transformRoutes(entrypoints) {
return Object.fromEntries(entrypoints.map(({ route, filename }) => [route, filename])) 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() { export async function getBuildRoutes() {
// Thanks to ChatGPT // Thanks to ChatGPT
function readCommandOutputAsJSON(command) { function readCommandOutputAsJSON(command) {
@ -40,5 +34,6 @@ export async function getBuildRoutes() {
}) })
} }
return transformRoutes(await readCommandOutputAsJSON('go run ./cmd/routes')) console.log('loading build entrypoints...')
return transformRoutes(await readCommandOutputAsJSON('go run ./meta/routes'))
} }

@ -1,12 +1,17 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import { getBuildRoutes, getDevelopmentRoutes } from './meta/routes.js' import { getBuildRoutes } from './meta/routes.js'
import { join } from 'path' import { join } from 'path'
export default defineConfig(async config => { export default defineConfig(async () => {
const routes = config.command === 'build' ? await getBuildRoutes() : await getDevelopmentRoutes() const routes = await getBuildRoutes()
console.log('html entrypoints:')
for (const [route, filename] of Object.entries(routes)) {
console.log(`- "${route}" => ${filename}`)
}
console.log()
const entryPoints = Object.values(routes) const entryPoints = Object.values(routes)
console.log('Found entrypoints:', entryPoints)
return { return {
root: './frontend', root: './frontend',

Loading…
Cancel
Save