{"id":15162316,"url":"https://github.com/adnaan/gomodest-starter","last_synced_at":"2025-07-24T05:35:33.176Z","repository":{"id":53588632,"uuid":"314420032","full_name":"adnaan/gomodest-starter","owner":"adnaan","description":"A complex SAAS starter kit  using Go, the  html/template package, and sprinkles of javascript.","archived":false,"fork":false,"pushed_at":"2021-03-24T23:08:02.000Z","size":2073,"stargazers_count":83,"open_issues_count":3,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-20T09:26:44.035Z","etag":null,"topics":["bulma","go","golang","golang-web","goview","html","modest","modestjs","server-side-rendering","stimulusjs","sveltejs","webapp"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adnaan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-20T02:01:41.000Z","updated_at":"2025-07-04T00:53:52.000Z","dependencies_parsed_at":"2022-09-07T23:50:52.415Z","dependency_job_id":null,"html_url":"https://github.com/adnaan/gomodest-starter","commit_stats":null,"previous_names":["adnaan/gomodest"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/adnaan/gomodest-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adnaan%2Fgomodest-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adnaan%2Fgomodest-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adnaan%2Fgomodest-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adnaan%2Fgomodest-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adnaan","download_url":"https://codeload.github.com/adnaan/gomodest-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adnaan%2Fgomodest-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266796853,"owners_count":23985486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","go","golang","golang-web","goview","html","modest","modestjs","server-side-rendering","stimulusjs","sveltejs","webapp"],"created_at":"2024-09-27T01:23:31.507Z","updated_at":"2025-07-24T05:35:33.153Z","avatar_url":"https://github.com/adnaan.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"**GOMODEST** is a Multi Page App(MPA) **starter kit** using Go's `html/template`, `SvelteJS` and `StimulusJS`. It is inspired from modest approaches to building webapps as enlisted in https://modestjs.works/.\n\n## Motivation\n\nI am a devops engineer who dabbles in UI for side projects, internal tools and such. The SPA/ReactJS ecosystem is too costly for me. This is an alternative approach.\n\n\n\u003e The main idea is to use server rendered html with spots of client-side dynamism using SvelteJS \u0026 StimulusJS\n \nThe webapp is mostly plain old javascript, html, css but with sprinkles of StimulusJS \u0026 spots of SvelteJS used for interactivity sans page reloads. StimulusJS is used for sprinkling\ninteractivity in server rendered html \u0026 mounting Svelte components into divs.\n\n## Stack \n\nA few things which were used:\n\n1. Go, html/template, goview, \n2. Authentication: [github.com/adnaan/authn](https://github.com/adnaan/authn)\n3. SvelteJS\n4. [Hotwire](https://hotwire.dev/) \n5. Bulma CSS\n\nMany more things in `go.mod` \u0026 `web/package.json`\n\nTo run, clone this repo and: \n\n```bash\n$ make install\n# another terminal\n$ make run-go\n```\n\nThe ideas in this starter kit follow the JS gradient as noted [here](https://modestjs.works/book/part-2/the-js-gradient/). I have taken the liberty to organise them into the following big blocks: **server-rendered html**, **sprinkles** and **spots**.\n\n## Server Rendered HTML\n\nUse `html/template` and `goview` to render html pages. It's quite powerful when do you don't need client-side interactions.\n\nexample: \n\n```go\nfunc accountPage(w http.ResponseWriter, r *http.Request) (goview.M, error) {\n\n\tsession, err := store.Get(r, \"auth-session\")\n\tif err != nil {\n\t\treturn nil, fmt.Errorf(\"%v, %w\", err, InternalErr)\n\t}\n\n\tprofileData, ok := session.Values[\"profile\"]\n\tif !ok {\n\t\treturn nil, fmt.Errorf(\"%v, %w\", err, InternalErr)\n\t}\n\n\tprofile, ok := profileData.(map[string]interface{})\n\tif !ok {\n\t\treturn nil, fmt.Errorf(\"%v, %w\", err, InternalErr)\n\t}\n\n\treturn goview.M{\n\t\t\"name\": profile[\"name\"],\n\t}, nil\n\n}\n```\n\n## Sprinkles\n\nUse `stimulusjs` to level up server-rendered html to handle simple interactions like: navigations, form validations etc.\n\nexample:\n\n```html\n    \u003cbutton class=\"button is-primary is-outlined is-fullwidth\"\n            data-action=\"click-\u003enavigate#goto\"\n            data-goto=\"/  \"\n            type=\"button\"\u003e\n        Home\n    \u003c/button\u003e\n```\n\n```js\n    goto(e){\n        if (e.currentTarget.dataset.goto){\n            window.location = e.currentTarget.dataset.goto;\n        }\n    }\n```\n\n## Spots\n\nUse `sveltejs` to take over `spots` of a server-rendered html page to provide more complex interactivity without page reloads.\n\nThis snippet is the most interesting part of this project: \n\n```html\n{{define \"content\"}}\n    \u003cdiv class=\"columns is-mobile is-centered\"\u003e\n        \u003cdiv class=\"column is-half-desktop\"\u003e\n            \u003cdiv\n                    data-target=\"svelte.component\"\n                    data-component-name=\"app\"\n                    data-component-props=\"{{.Data}}\"\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n{{end}}\n```\n\n[source](https://github.com/adnaan/gomodest-starter/blob/main/web/html/app.html)\n\nIn the above snippet, we use StimulusJS to mount a Svelte component by using the following code:\n\n```js\n     import { Controller } from \"stimulus\";\n     import components from \"./components\";\n     \n     export default class extends Controller {\n         static targets = [\"component\"]\n         connect() {\n             if (this.componentTargets.length \u003e 0){\n                 this.componentTargets.forEach(el =\u003e {\n                     const componentName = el.dataset.componentName;\n                     const componentProps = el.dataset.componentProps ? JSON.parse(el.dataset.componentProps): {};\n                     if (!(componentName in components)){\n                         console.log(`svelte component: ${componentName}, not found!`)\n                         return;\n                     }\n                     const app = new components[componentName]({\n                         target: el,\n                         props: componentProps\n                     });\n                 })\n             }\n         }\n     }\n```\n[source](https://github.com/adnaan/gomodest-starter/blob/main/web/src/controllers/svelte_controller.js)\n\nThis strategy allows us to mix server rendered HTML pages with client side dynamism.\n\nOther possibly interesting aspects could be the layout of [web/html](https://github.com/adnaan/gomodest-starter/tree/main/web/html) and the usage of the super nice [goview](https://github.com/foolin/goview) library to render html in these files: \n\n 1. [router.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/router.go)\n 2. [view.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/view.go)\n 3. [pages.go](https://github.com/adnaan/gomodest-starter/blob/main/routes/pages.go)\n \n That is all.\n \n ---------------\n\n\n ## Attributions\n\n1. https://areknawo.com/making-a-todo-app-in-svelte/\n2. https://modestjs.works/\n3. https://github.com/foolin/goview\n\n    \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadnaan%2Fgomodest-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadnaan%2Fgomodest-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadnaan%2Fgomodest-starter/lists"}