My Page

├── src ├── main.js └── App.svelte ├── .gitignore ├── makefile ├── public ├── favicon.png ├── index.html └── global.css ├── README.md ├── templates └── mainpage.html ├── go.mod ├── main.go ├── package.json ├── .session.vim ├── rollup.config.js ├── scripts └── setupTypeScript.js └── go.sum /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /makefile: -------------------------------------------------------------------------------- 1 | run: 2 | npm run dev & go run . 3 | build: 4 | npm run build 5 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ksckaan1/go-and-svelte-template/HEAD/public/favicon.png -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

My App

6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Created for my blog article 2 | 3 | https://dev.to/ksckaan1/creating-a-website-using-golang-and-sveltejs-together-55g8 4 | 5 | Before lauch, run `npm install` from command line. 6 | 7 | -------------------------------------------------------------------------------- /templates/mainpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Page 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /go.mod: -------------------------------------------------------------------------------- 1 | module naber 2 | 3 | go 1.17 4 | 5 | require ( 6 | github.com/gofiber/fiber/v2 v2.22.0 7 | github.com/gofiber/template v1.6.19 8 | ) 9 | 10 | require ( 11 | github.com/andybalholm/brotli v1.0.2 // indirect 12 | github.com/klauspost/compress v1.13.4 // indirect 13 | github.com/valyala/bytebufferpool v1.0.0 // indirect 14 | github.com/valyala/fasthttp v1.31.0 // indirect 15 | github.com/valyala/tcplisten v1.0.0 // indirect 16 | golang.org/x/sys v0.0.0-20210514084401-e8d321eab015 // indirect 17 | ) 18 | -------------------------------------------------------------------------------- /main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "github.com/gofiber/fiber/v2" 5 | "github.com/gofiber/template/html" 6 | ) 7 | 8 | func main() { 9 | 10 | //template render engine 11 | engine := html.New("./templates", ".html") 12 | 13 | app := fiber.New(fiber.Config{ 14 | Views: engine, //set as render engine 15 | }) 16 | app.Static("/public", "./public") 17 | app.Get("/", mainPage) 18 | app.Listen(":3000") 19 | } 20 | 21 | func mainPage(c *fiber.Ctx) error { 22 | return c.Render("mainpage", fiber.Map{}) 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "rollup -c", 7 | "dev": "rollup -c -w", 8 | "start": "sirv public --no-clear" 9 | }, 10 | "devDependencies": { 11 | "@rollup/plugin-commonjs": "^17.0.0", 12 | "@rollup/plugin-node-resolve": "^11.0.0", 13 | "rollup": "^2.3.4", 14 | "rollup-plugin-css-only": "^3.1.0", 15 | "rollup-plugin-livereload": "^2.0.0", 16 | "rollup-plugin-svelte": "^7.0.0", 17 | "rollup-plugin-terser": "^7.0.0", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^1.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | -webkit-padding: 0.4em 0; 36 | padding: 0.4em; 37 | margin: 0 0 0.5em 0; 38 | box-sizing: border-box; 39 | border: 1px solid #ccc; 40 | border-radius: 2px; 41 | } 42 | 43 | input:disabled { 44 | color: #ccc; 45 | } 46 | 47 | button { 48 | color: #333; 49 | background-color: #f4f4f4; 50 | outline: none; 51 | } 52 | 53 | button:disabled { 54 | color: #999; 55 | } 56 | 57 | button:not(:disabled):active { 58 | background-color: #ddd; 59 | } 60 | 61 | button:focus { 62 | border-color: #666; 63 | } 64 | -------------------------------------------------------------------------------- /.session.vim: -------------------------------------------------------------------------------- 1 | let SessionLoad = 1 2 | let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1 3 | let v:this_session=expand(":p") 4 | silent only 5 | silent tabonly 6 | cd ~/Dev/go/go-and-svelte-template 7 | if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == '' 8 | let s:wipebuf = bufnr('%') 9 | endif 10 | set shortmess=aoO 11 | argglobal 12 | %argdel 13 | $argadd README.md 14 | edit README.md 15 | argglobal 16 | setlocal fdm=expr 17 | setlocal fde=Foldexpr_markdown(v:lnum) 18 | setlocal fmr={{{,}}} 19 | setlocal fdi=# 20 | setlocal fdl=0 21 | setlocal fml=1 22 | setlocal fdn=20 23 | setlocal fen 24 | let s:l = 5 - ((4 * winheight(0) + 17) / 35) 25 | if s:l < 1 | let s:l = 1 | endif 26 | keepjumps exe s:l 27 | normal! zt 28 | keepjumps 5 29 | normal! 050| 30 | tabnext 1 31 | badd +0 README.md 32 | if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0 && getbufvar(s:wipebuf, '&buftype') isnot# 'terminal' 33 | silent exe 'bwipe ' . s:wipebuf 34 | endif 35 | unlet! s:wipebuf 36 | set winheight=1 winwidth=20 shortmess=filnxtToOFc 37 | let s:sx = expand(":p:r")."x.vim" 38 | if filereadable(s:sx) 39 | exe "source " . fnameescape(s:sx) 40 | endif 41 | let &g:so = s:so_save | let &g:siso = s:siso_save 42 | set hlsearch 43 | nohlsearch 44 | doautoall SessionLoadPost 45 | unlet SessionLoad 46 | " vim: set ft=vim : 47 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import commonjs from '@rollup/plugin-commonjs'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import css from 'rollup-plugin-css-only'; 7 | 8 | const production = !process.env.ROLLUP_WATCH; 9 | 10 | function serve() { 11 | let server; 12 | 13 | function toExit() { 14 | if (server) server.kill(0); 15 | } 16 | 17 | return { 18 | writeBundle() { 19 | if (server) return; 20 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 21 | stdio: ['ignore', 'inherit', 'inherit'], 22 | shell: true 23 | }); 24 | 25 | process.on('SIGTERM', toExit); 26 | process.on('exit', toExit); 27 | } 28 | }; 29 | } 30 | 31 | export default { 32 | input: 'src/main.js', 33 | output: { 34 | sourcemap: true, 35 | format: 'iife', 36 | name: 'app', 37 | file: 'public/build/bundle.js' 38 | }, 39 | plugins: [ 40 | svelte({ 41 | compilerOptions: { 42 | // enable run-time checks when not in production 43 | customElement: true, 44 | dev: !production 45 | } 46 | }), 47 | // we'll extract any component CSS out into 48 | // a separate file - better for performance 49 | css({ output: 'bundle.css' }), 50 | 51 | // If you have external dependencies installed from 52 | // npm, you'll most likely need these plugins. In 53 | // some cases you'll need additional configuration - 54 | // consult the documentation for details: 55 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 56 | resolve({ 57 | browser: true, 58 | dedupe: ['svelte'] 59 | }), 60 | commonjs(), 61 | 62 | // In dev mode, call `npm run start` once 63 | // the bundle has been generated 64 | //!production && serve(), 65 | 66 | // Watch the `public` directory and refresh the 67 | // browser on changes when not in production 68 | !production && livereload('public'), 69 | 70 | // If we're building for production (npm run build 71 | // instead of npm run dev), minify 72 | production && terser() 73 | ], 74 | watch: { 75 | clearScreen: false 76 | } 77 | }; 78 | -------------------------------------------------------------------------------- /scripts/setupTypeScript.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** This script modifies the project to support TS code in .svelte files like: 4 | 5 | 8 | 9 | As well as validating the code for CI. 10 | */ 11 | 12 | /** To work on this script: 13 | rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template 14 | */ 15 | 16 | const fs = require("fs") 17 | const path = require("path") 18 | const { argv } = require("process") 19 | 20 | const projectRoot = argv[2] || path.join(__dirname, "..") 21 | 22 | // Add deps to pkg.json 23 | const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8")) 24 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { 25 | "svelte-check": "^2.0.0", 26 | "svelte-preprocess": "^4.0.0", 27 | "@rollup/plugin-typescript": "^8.0.0", 28 | "typescript": "^4.0.0", 29 | "tslib": "^2.0.0", 30 | "@tsconfig/svelte": "^2.0.0" 31 | }) 32 | 33 | // Add script for checking 34 | packageJSON.scripts = Object.assign(packageJSON.scripts, { 35 | "check": "svelte-check --tsconfig ./tsconfig.json" 36 | }) 37 | 38 | // Write the package JSON 39 | fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " ")) 40 | 41 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too 42 | const beforeMainJSPath = path.join(projectRoot, "src", "main.js") 43 | const afterMainTSPath = path.join(projectRoot, "src", "main.ts") 44 | fs.renameSync(beforeMainJSPath, afterMainTSPath) 45 | 46 | // Switch the app.svelte file to use TS 47 | const appSveltePath = path.join(projectRoot, "src", "App.svelte") 48 | let appFile = fs.readFileSync(appSveltePath, "utf8") 49 | appFile = appFile.replace("