Build frontends with the expected base url

This commit is contained in:
Lucas Schumacher 2024-06-24 20:53:48 -04:00
parent 86eac30d5e
commit 1b760329ef
8 changed files with 107 additions and 53 deletions

2
.gitignore vendored
View File

@ -1,2 +1,4 @@
tmp tmp
server server
dist
index.html

View File

@ -20,47 +20,43 @@ svelte: svelte/dist/*
cleanSvelte: cleanSvelte:
rm -rf ./svelte/dist rm -rf ./svelte/dist
cleanbuild: cleandist:
rm -rf tmp/build rm -rf dist
tmp/build: cleanbuild dist:
mkdir -p tmp/build mkdir -p dist
tmp/build/vanillaJS: tmp/build vanillaJS/index.html dist/vanillaJS: dist vanillaJS/index.html
mkdir tmp/build/vanillaJS && \ rm -rf dist/vanillaJS && \
cp ./vanillaJS/index.html ./tmp/build/vanillaJS cp -r ./vanillaJS ./dist/vanillaJS
tmp/build/react: tmp/build react/index.html dist/react: dist react/index.html
mkdir tmp/build/react && \ rm -rf dist/react && \
cp ./react/index.html ./tmp/build/react/ cp -r ./react ./dist/react
tmp/build/alpinejs: alpinejs/index.html dist/alpinejs: dist alpinejs/index.html
mkdir tmp/build/alpinejs && \ rm -rf dist/alpinejs && \
cp ./alpinejs/index.html ./tmp/build/alpinejs cp -r ./alpinejs ./dist/alpinejs
tmp/build/_next: tmp/build reactNextJS/out/* dist/reactNextJS: dist reactNextJS/out/*
mkdir ./tmp/build/_next && \ rm -rf ./dist/reactNextJS && \
cp -r ./reactNextJS/out/_next ./tmp/build/ cp -r ./reactNextJS/out ./dist/reactNextJS
tmp/build/reactNextJS: tmp/build reactNextJS/out/* dist/vuejs: dist vuejs/dist/*
mkdir ./tmp/build/reactNextJS && \ rm -rf ./dist/vuejs && \
cp ./reactNextJS/out/*.* ./tmp/build/reactNextJS/ cp -r ./vuejs/dist ./dist/vuejs
tmp/build/assets: tmp/build svelte/dist/* vuejs/dist/* dist/svelte: dist svelte/dist/*
mkdir tmp/build/assets && \ rm -rf ./dist/svelte && \
cp svelte/dist/assets/* tmp/build/assets/ && \ cp -r ./svelte/dist ./dist/svelte
cp vuejs/dist/assets/* tmp/build/assets/ dist/index.html: dist index.tmpl
tmp/build/vuejs: tmp/build vuejs/dist/* go run server.go generate
mkdir ./tmp/build/vuejs && \ mv index.html dist/
cp ./vuejs/dist/*.* ./tmp/build/vuejs/
tmp/build/svelte: tmp/build svelte/dist/*
mkdir ./tmp/build/svelte && \
cp -r ./svelte/dist/* ./tmp/build/svelte/
tmp/build/index.html: tmp/build index.html
cp index.html tmp/build/
web: tmp/build/assets tmp/build/vanillaJS tmp/build/react tmp/build/alpinejs tmp/build/_next tmp/build/reactNextJS tmp/build/assets tmp/build/vuejs tmp/build/svelte tmp/build/index.html export: dist/vanillaJS dist/react dist/alpinejs dist/reactNextJS dist/assets dist/vuejs dist/svelte dist/index.html
web: ./svelte/dist/* ./vuejs/dist/* ./reactNextJS/out/* vanillaJS/index.html react/index.html alpinejs/index.html
build: web server.go build: web server.go
go build server.go go build server.go
run: web server.go run: web server.go
go run server.go go run server.go
air: nil web server.go air: nil web server.go
air server.go air server.go
clean: cleanNext cleanVue cleanSvelte clean: cleanNext cleanVue cleanSvelte cleandist
rm -rf tmp rm -rf tmp
rm -f server rm -f server
rm -f index.html
.PHONY: all build clean cleanbuild nextjs vuejs svelte run air nil web .PHONY: all build clean cleanbuild nextjs vuejs svelte run air nil web export

View File

@ -1,13 +0,0 @@
<html>
<body>
<h1>Frontends</h1>
<ul>
<li><a href="vanillaJS/">JS Only</a></li>
<li><a href="react/">React</a></li>
<li><a href="reactNextJS/">React (with Next)</a></li>
<li><a href="alpinejs/">Alpine.js</a></li>
<li><a href="svelte/">Svelte</a></li>
<li><a href="vuejs/">Vue.js</a></li>
</ul>
</body>
</html>

10
index.tmpl Normal file
View File

@ -0,0 +1,10 @@
<html>
<body>
<h1>Frontends</h1>
<ul>
{{range .}}
<li><a href="{{.Mountpoint}}">{{.Name}}</a></li>
{{end}}
</ul>
</body>
</html>

View File

@ -3,6 +3,7 @@
*/ */
const nextConfig = { const nextConfig = {
output: 'export', output: 'export',
basePath: '/reactNextJS',
// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html` // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
// trailingSlash: true, // trailingSlash: true,

View File

@ -3,21 +3,77 @@ package main
import ( import (
"embed" "embed"
"fmt" "fmt"
"html/template"
"io/fs" "io/fs"
"net/http" "net/http"
"os"
) )
const PORT = 3003 const PORT = 3003
//go:embed "all:tmp/build" type frontendInfo struct {
var webfs embed.FS Name, Mountpoint string
}
//go:embed "all:vuejs/dist"
var vueFiles embed.FS
//go:embed "all:reactNextJS/out"
var nextFiles embed.FS
//go:embed "all:svelte/dist"
var svelteFiles embed.FS
//go:embed "vanillaJS"
var vanillaFiles embed.FS
//go:embed "alpinejs"
var alpineFiles embed.FS
//go:embed "react"
var reactFiles embed.FS
func addFrontend(files embed.FS, mountpoint string, subfs string, name string) frontendInfo {
subFiles, _ := fs.Sub(files, subfs)
fileServer := http.FileServerFS(subFiles)
http.Handle(mountpoint, http.StripPrefix(mountpoint, fileServer))
return frontendInfo{name, mountpoint}
}
func outputIndexAndExit(indexTemplate template.Template, frontends []frontendInfo) {
file, err := os.OpenFile("index.html", os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
if err != nil {
panic(err) // Handle error
}
defer file.Close()
indexTemplate.Execute(file, frontends)
os.Exit(0)
}
func main() { func main() {
webfs, err := fs.Sub(webfs, "tmp/build") args := os.Args
home_template, err := template.ParseFiles("index.tmpl")
if err != nil { if err != nil {
panic(fmt.Sprintf("Error embeding web files: %s\nTry running \"make web\"", err)) panic(fmt.Sprintf("Error parsing homepage template\n%s", err))
} }
http.Handle("/", http.FileServerFS(webfs))
frontends := []frontendInfo{
addFrontend(vanillaFiles, "/vanillaJS/", "vanillaJS", "JS Only"),
addFrontend(alpineFiles, "/alpinejs/", "alpinejs", "Alpine.js"),
addFrontend(reactFiles, "/react/", "react", "React"),
addFrontend(nextFiles, "/reactNextJS/", "reactNextJS/out", "React (Next.js)"),
addFrontend(vueFiles, "/vuejs/", "vuejs/dist", "Vue.js"),
addFrontend(svelteFiles, "/svelte/", "svelte/dist", "Svelte"),
}
if len(args) == 2 && args[1] == "generate" {
outputIndexAndExit(*home_template, frontends)
}
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
err = home_template.Execute(w, frontends)
})
err = http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil) err = http.ListenAndServe(fmt.Sprintf(":%d", PORT), nil)
if err != nil { if err != nil {

View File

@ -4,4 +4,5 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [svelte()], plugins: [svelte()],
base: '/svelte/'
}) })

View File

@ -14,5 +14,6 @@ export default defineConfig({
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
} }
} },
base: '/vuejs/'
}) })