Nigel/HomeAutomation-Web
1
0
Fork 0
Code Actions Releases Activity

Setup Golang server with Vue3 using InertiaJS

Browse Source
This commit is contained in:
Nigel Barink 2024-10-27 20:59:26 +01:00
commit 2e284cbff9
Signed by: Nigel
GPG Key ID: 6893A31C2D84A9D2
10 changed files with 6665 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
serve/build

13
go.mod Normal file
View File

@ -0,0 +1,13 @@
module homeautomation/webserver
go 1.23.2
require (
github.com/petaki/inertia-go v1.8.0
github.com/petaki/support-go v1.10.0
)
require (
github.com/gorilla/mux v1.8.1 // indirect
github.com/romsar/gonertia v1.3.4 // indirect
)

8
go.sum Normal file
View File

@ -0,0 +1,8 @@
github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
github.com/petaki/inertia-go v1.8.0 h1:Gwt0U7fcSXoALahTYg4ovh6RKb+nJDG6kToMfzBfeTo=
github.com/petaki/inertia-go v1.8.0/go.mod h1:roW6skZWJ8jz6RvGHOUyRipi8wb5fLu+4RmQWvV/0JE=
github.com/petaki/support-go v1.10.0 h1:dtRkoRyU5n/Nv5LuIztoVk+PE0Bf7LzcaDqHZXAEqN0=
github.com/petaki/support-go v1.10.0/go.mod h1:KdaZcqk+BrjYTpv+vEqUToRijzr0GssEsECN8/NSyGo=
github.com/romsar/gonertia v1.3.4 h1:5BTBFNtKBVCRJF9vMBatvcw4CDrHpEtpJqU2aZ3Nw4M=
github.com/romsar/gonertia v1.3.4/go.mod h1:aFqeLl9P8/zQ/aMfLz8iDj8gZWiNsooHFajj3b1VsYA=

6496
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "webserver",
"version": "1.0.0",
"main": "server/js/App.js",
"scripts": {
"start": "webpack serve --config webpack.config.js"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@inertiajs/inertia": "^0.11.1",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/vue3": "^1.2.0",
"html-webpack-plugin": "^5.6.3",
"vue": "^3.5.12",
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"babel-loader": "^9.2.1",
"vue-loader": "^17.4.2"
}
}

13
root.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{ .inertiaHead }}
</head>
<body>
{{ .inertia }}
<script type="module" src="build/main.bundle.js"></script>
</body>
</html>

18
serve/js/Pages/Home/index.vue Normal file
View File

@ -0,0 +1,18 @@
<script setup>
import { ref } from 'vue'
defineProps({ text: String })
const count = ref(0);
function increment() {
count.value++;
}
</script>
<template>
<h1>Home Automation</h1>
<h2>{{ text }} </h2>
<span> {{ count }}</span>
<button @click="increment">+</button>
</template>

13
serve/js/app.js Normal file
View File

@ -0,0 +1,13 @@
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp( { render: () => h(App, props)})
.use(plugin)
.mount(el)
},
})

34
server.go Normal file
View File

@ -0,0 +1,34 @@
package main
import (
inertia "github.com/romsar/gonertia"
"log"
"net/http"
)
func main() {
i, err := inertia.NewFromFile("./root.html")
if err != nil {
log.Fatal(err)
}
mux := http.NewServeMux()
mux.Handle("/", i.Middleware(homeHandler(i)))
mux.Handle("/build/", http.StripPrefix("/build/", http.FileServer(http.Dir("./serve/build"))))
http.ListenAndServe(":8080", mux)
}
func homeHandler(i *inertia.Inertia) http.Handler {
fn := func(w http.ResponseWriter, r *http.Request) {
err := i.Render(w, r, "Home/Index", inertia.Props{
"text": "From Golang",
})
if err != nil {
return
}
}
return http.HandlerFunc(fn)
}

41
webpack.config.js Normal file
View File

@ -0,0 +1,41 @@
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './serve/js/app.js',
output: {
path: path.resolve(__dirname, 'serve/build'),
filename: '[name].bundle.js',
clean: true
},
plugins: [
// new HtmlWebpackPlugin({
// template: './root.html',
// }),
new VueLoaderPlugin(),
],
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env'],
},
},
},
],
}
}