Setup Golang server with Vue3 using InertiaJS
This commit is contained in:
commit
2e284cbff9
GPG Key ID:
6893A31C2D84A9D2
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
serve/build
|
||||
13
go.mod
Normal file
13
go.mod
Normal 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
8
go.sum
Normal 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
6496
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal 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
13
root.html
Normal 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
18
serve/js/Pages/Home/index.vue
Normal 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
13
serve/js/app.js
Normal 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
34
server.go
Normal 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
41
webpack.config.js
Normal 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'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user