{"id":13417513,"url":"https://github.com/torenware/vite-go","last_synced_at":"2025-04-03T03:11:39.083Z","repository":{"id":45811300,"uuid":"474191681","full_name":"torenware/vite-go","owner":"torenware","description":"Go module to integrate Vue 3, React, and Svelte projects with Golang web projects using Vite 2 and 3","archived":false,"fork":false,"pushed_at":"2023-08-27T06:13:25.000Z","size":115,"stargazers_count":214,"open_issues_count":6,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T21:39:09.310Z","etag":null,"topics":["golang","integrations","reactjs","vitejs","vue"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torenware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-03-25T23:27:50.000Z","updated_at":"2025-03-25T16:45:51.000Z","dependencies_parsed_at":"2024-01-07T18:06:37.826Z","dependency_job_id":"e9c46899-5a6a-4ecf-a88f-5e2ce4e0e51b","html_url":"https://github.com/torenware/vite-go","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torenware%2Fvite-go","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torenware%2Fvite-go/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torenware%2Fvite-go/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torenware%2Fvite-go/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torenware","download_url":"https://codeload.github.com/torenware/vite-go/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246927839,"owners_count":20856198,"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","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":["golang","integrations","reactjs","vitejs","vue"],"created_at":"2024-07-30T22:00:38.912Z","updated_at":"2025-04-03T03:11:39.063Z","avatar_url":"https://github.com/torenware.png","language":"Go","funding_links":[],"categories":["Integrations with Backends"],"sub_categories":["Go"],"readme":"# Vite Integration For Go\n\nA Go module that lets you serve your Vue 3, React, or Svelte project from a Go-based web server.  You build your project, tell Go where to find the `dist/` directory, and the module figures out how to load the generated Vue application into a web page.\n\n## Installation\n\n```shell\ngo get github.com/torenware/vite-go\n\n```\n\nTo upgrade to the current version:\n\n```shell\ngo get -u github.com/torenware/vite-go@latest \n```\n\n\n## Getting It Into Your Go Project\n\nThe first requirement is to [use ViteJS's tooling](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) for your JavaScript code. The easiest thing to do is either to start out this way, or to create a new project and move your files into the directory that Vite creates. Using NPM:\n\n```shell\nnpm create vite@latest\n```\n\nUsing Yarn:\n\n```shell\nyarn create vite\n```\n\nJust answer the questions asked, and away you go.\n\nYou will need to position your source files and the generated `dist/` directory so Go can find your  project, the `manifest.json` file that describes it, and the assets that Vite generates for you. You may need to change your `vite.config.js` file (`vite.config.ts` if you prefer using Typescript) to make sure the manifest file is generated as well. Here's what I'm using:\n\n```typescript\n/**\n * @type {import('vite').UserConfig}\n */\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [vue()],\n  build: {\n    manifest: 'manifest.json',\n    rollupOptions: {\n      input: {\n        main: 'src/main.ts',\n      },\n    },\n  },\n});\n```  \n\nThis, however, is more than you need. A minimal config file would be:\n\n```javascript\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [vue()],\n  build: {\n    manifest: \"manifest.json\",\n  },\n})\n\n```\n\nThe essential piece here is the vue plugin (or whatever plugin you need instead for React, Preact or Svelte) and the `build.manifest` line, since `vite-go` needs the manifest file to be present in order to work correctly.\n\n\nHere's some sample pseudo code that uses the go 1.16+ embedding feature for the production build, and a regular disk directory (`frontend` in our case) as a development directory:\n\n```golang\n\npackage main\n\nimport (\n  \"embed\"\n  \"html/template\"\n  \"net/http\"\n\n  vueglue \"github.com/torenware/vite-go\"\n)\n\n//go:embed \"dist\"\nvar dist embed.FS\n\nvar vueGlue *vueglue.VueGlue\n\nfunc main() {\n    \n    // This:\n    \n    // Production configuration.\n\tconfig := \u0026vueglue.ViteConfig{\n\t\tEnvironment: \"production\",\n\t\tAssetsPath:  \"dist\",\n\t\tEntryPoint:  \"src/main.js\",\n\t\tPlatform:    \"vue\",\n\t\tFS:          frontend,\n\t}\n\n    // OR this:\n    \n    // Development configuration\n\tconfig := \u0026vueglue.ViteConfig{\n\t\tEnvironment: \"development\",\n\t\tAssetsPath:  \"frontend\",\n\t\tEntryPoint:  \"src/main.js\",\n\t\tPlatform:    \"vue\",\n\t\tFS:          os.DirFS(\"frontend\"),\n\t}\n\n  // Parse the manifest and get a struct that describes\n  // where the assets are.\n  glue, err := vueglue.NewVueGlue(config)\n  if err != nil {\n    //bail!\n  }\n  vueGlue = glue\n  \n  // and set up your routes and start your server....\n  \n}\n\nfunc MyHandler(w http.ResponseWriter, r *http.Request) {\n  // Now you can pass the glue object to an HTML template\n  ts, err := template.ParseFiles(\"path/to/your-template.tmpl\")\n  if err != nil {\n  \t// better handle this...\n  }\n  ts.Execute(respWriter, vueGlue)\n\n}\n\n\n```\n\nYou will also need to serve your javascript, css and images used by your javascript code to the web. You can use a solution like [`http.FileServer`](https://pkg.go.dev/net/http#FileServer), or the wrapper the library implements that configures this for you:\n\n```golang\n   // using the standard library's multiplexer:\n\tmux := http.NewServeMux()\n\n\t// Set up a file server for our assets.\n\tfsHandler, err := glue.FileServer()\n\tif err != nil {\n\t\tlog.Println(\"could not set up static file server\", err)\n\t\treturn\n\t}\n\tmux.Handle(\"/src/\", fsHandler)\n\n```\n\nSome router implementations may alternatively require you to do something more like:\n\n```golang\n// chi router\nmux := chi.NewMux()\n\n...\n\nmux.Handle(\"/src/*\", fsHandler)\n\n```\n\nYMMV :-)\n\n## Templates\n\nYour template gets the needed tags and links by declaring the glue object in your template and calling RenderTags on, as so:\n\n\n```HTML\n\u003c!doctype html\u003e\n\u003chtml lang='en'\u003e\n{{ $vue := . }}\n    \u003chead\u003e\n        \u003cmeta charset='utf-8'\u003e\n        \u003ctitle\u003eHome - Vue Loader Test\u003c/title\u003e\n        \n        {{ if $vue }}\n          {{ $vue.RenderTags }}\n        {{ end }}\n        \n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n      \n    \u003c/body\u003e\n  \u003c/html\u003e\n      \n \n```\n\nYou should check that the glue (`$vue` in our example) is actually defined as I do here, since it will be nil unless you inject it into your template.\n\nThe sample program in [`examples/sample-program`](./examples/sample-program) has much more detail, and actually runs.\n\n## Configuration\nVite-Go is fairly smart about your Vite Javascript project, and will examine your package.json file on start up.  If you do not override the standard settings in your vite.config.js file, `vite-go` will probably choose to do the appropriate thing.\n\nAs mentioned above, a ViteConfig object must be passed to the `NewVueGlue()` routine, with anything you want to override. Here are the major fields and how to use them:\n\n| Field | Purpose | Default Setting |\n|---    |---      |---              |\n| **Environment** | What mode you want vite to run in. | development |\n| **FS** | A fs.Embed or fs.DirFS | none; required. |\n| **JSProjectPath** | Path to your Javascript files | frontend |\n| **AssetPath** | Location of the built distribution directory | *Production:* dist|\n| **Platform** | Any platform supported by Vite. vue and react are known to work; other platforms *may* work if you adjust the other configurations correctly. | Based upon your package.json settings. |\n| **EntryPoint** | Entry point script for your Javascript | Best guess based on package.json |\n| **ViteVersion** | Vite major version (\"2\" or \"3\") | Best guess based on your package.json file in your project. If you want to make sure, specify the version you want. |\n| **DevServerPort** | Port the dev server will listen on; typically 3000 in version 2, 5173 in version 3 | Best guess based on version | \n| **DevServerDomain** | Domain serving assets. | localhost |\n| **HTTPS** | Whether the dev server serves HTTPS | false | \n\n## Caveats\n\nThis code is relatively new; in particular, there may be some configurations you can use in `vite.config.js` that won't work as I expect. If so: [please open an issue on Github](https://github.com/torenware/vite-go/issues).  I've posted the code so people can see it, and try things out. I think you'll find it useful.\n\n\n\nCopyright © 2022 Rob Thorne\n\n[MIT License](https://github.com/torenware/go-tooling-for-vue/blob/8999977a5bffb8f0630740220c576b550a7115e9/LICENSE.md)\n\u003chr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorenware%2Fvite-go","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorenware%2Fvite-go","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorenware%2Fvite-go/lists"}