stub out webapp & Set up a go skeleton that works with the underlying FE js

This commit is contained in:
Barak Michener 2020-11-11 20:08:54 -08:00
commit 35325c74d0
16 changed files with 2869 additions and 0 deletions

4
.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
web/node_modules/
web/public/build/
.DS_Store

3
go.mod Normal file
View file

@ -0,0 +1,3 @@
module git.barakmich.com/barakmich/changeme
go 1.15

0
go.sum Normal file
View file

109
main.go Normal file
View file

@ -0,0 +1,109 @@
package main
import (
"context"
"flag"
"log"
"net/http"
"os"
"os/exec"
"os/signal"
"path/filepath"
"sync"
"syscall"
"time"
)
var (
devMode = flag.Bool("dev", false, "Run yarn autoreload underneath Go")
)
const (
publicWebPath = "./web/public/"
)
func main() {
flag.Parse()
var wg sync.WaitGroup
c := make(chan os.Signal, 1)
signal.Notify(c, os.Interrupt)
ctx, cancel := context.WithCancel(context.Background())
go func() {
oscall := <-c
log.Printf("system call:%+v", oscall)
cancel()
}()
wg.Add(1)
go serveHTTP(ctx, &wg)
if *devMode {
wg.Add(1)
go runYarn(ctx, &wg)
}
wg.Wait()
}
func serveHTTP(ctx context.Context, wg *sync.WaitGroup) {
fs := http.FileServer(http.Dir(publicWebPath))
mux := http.NewServeMux()
mux.Handle("/", fs)
srv := &http.Server{
Addr: ":5000",
Handler: mux,
}
go func() {
if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
log.Fatalf("listen:%+s\n", err)
}
}()
log.Printf("Listening on port :5000")
<-ctx.Done()
log.Printf("server stopped")
ctxShutDown, cancel := context.WithTimeout(context.Background(), 5*time.Second)
defer cancel()
if err := srv.Shutdown(ctxShutDown); err != nil {
if err != http.ErrServerClosed {
log.Fatalf("server Shutdown Failed:%+s", err)
}
}
log.Printf("server exited properly")
wg.Done()
return
}
func runYarn(ctx context.Context, wg *sync.WaitGroup) {
var err error
cmd := exec.Command("yarn", "dev")
cmd.Env = append(cmd.Env, "SKIP_SERVE=1")
cmd.Dir, err = filepath.Abs("./web/")
cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
cmd.Stdout = os.Stdout
cmd.Stderr = os.Stderr
if err != nil {
panic(err)
}
err = cmd.Start()
if err != nil {
panic(err)
}
<-ctx.Done()
log.Println("closing")
err = syscall.Kill(-cmd.Process.Pid, syscall.SIGKILL)
if err != nil {
panic(err)
}
wg.Done()
return
}

34
web/package.json Normal file
View file

@ -0,0 +1,34 @@
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"validate": "svelte-check"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.3.0",
"@rollup/plugin-commonjs": "^12.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-typescript": "^4.0.0",
"@tsconfig/svelte": "^1.0.0",
"autoprefixer": "^9.8.5",
"node-sass": "^5.0.0",
"postcss": "^7.0.32",
"postcss-load-config": "^2.1.0",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0",
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.0.0",
"tailwindcss": "^1.6.0",
"tslib": "^2.0.0",
"typescript": "^3.9.3"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}

13
web/postcss.config.js Normal file
View file

@ -0,0 +1,13 @@
const purgecss = require("@fullhuman/postcss-purgecss")({
content: ["./src/**/*.html", "./src/**/*.svelte"],
whitelistPatterns: [/svelte-/],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})
const dev = process.env.ROLLUP_WATCH
module.exports = {
plugins: [require("tailwindcss"), ...(!dev ? [purgecss] : [])],
}

BIN
web/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

4
web/public/global.css Normal file
View file

@ -0,0 +1,4 @@
html,
body {
height: 100vh;
}

18
web/public/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

88
web/rollup.config.js Normal file
View file

@ -0,0 +1,88 @@
import svelte from "rollup-plugin-svelte"
import resolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import livereload from "rollup-plugin-livereload"
import { terser } from "rollup-plugin-terser"
import sveltePreprocess from "svelte-preprocess"
import typescript from "@rollup/plugin-typescript"
const production = !process.env.ROLLUP_WATCH
const do_serve = !process.env.SKIP_SERVE
function serve() {
let server
function toExit() {
if (server) server.kill(0)
}
return {
writeBundle() {
if (server) return
server = require("child_process").spawn("yarn", ["run", "start", "--", "--dev"], {
stdio: ["ignore", "inherit", "inherit"],
shell: true,
})
process.on("SIGTERM", toExit)
process.on("exit", toExit)
},
}
}
export default {
input: "src/main.ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: (css) => {
css.write("public/build/bundle.css")
},
preprocess: sveltePreprocess({
postcss: true,
scss: {
includePaths: ["src"],
postcss: {
plugins: [require("autoprefixer")],
},
},
}),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && do_serve && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload("public"),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
],
watch: {
clearScreen: false,
},
}

22
web/src/App.svelte Normal file
View file

@ -0,0 +1,22 @@
<script lang="ts">
import Tailwind from "./Tailwind.svelte"
const name: string = "Something";
</script>
<style lang="scss">
main {
h1 {
font-size: 25px;
}
}
</style>
<Tailwind />
<main>
<h1 class="text-blue-200">Hello {name}!</h1>
<p>
Visit the
<a class="text-blue-700" href="https://svelte.dev/tutorial">Svelte tutorial</a>
to learn how to build Svelte apps.
</p>
</main>

5
web/src/Tailwind.svelte Normal file
View file

@ -0,0 +1,5 @@
<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

7
web/src/main.ts Normal file
View file

@ -0,0 +1,7 @@
import App from "./App.svelte"
const app = new App({
target: document.body,
})
export default app

8
web/tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
purge: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}

6
web/tsconfig.json Normal file
View file

@ -0,0 +1,6 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

2548
web/yarn.lock Normal file

File diff suppressed because it is too large Load diff