{"id":21493602,"url":"https://github.com/alienkevin/elm-rust-template","last_synced_at":"2025-07-06T05:32:53.026Z","repository":{"id":53874521,"uuid":"249256632","full_name":"AlienKevin/elm-rust-template","owner":"AlienKevin","description":"A convenient template for creating a progressive web app using Elm and Rust","archived":false,"fork":false,"pushed_at":"2020-04-11T10:26:00.000Z","size":311,"stargazers_count":26,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T09:25:08.471Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlienKevin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE_APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-22T19:26:43.000Z","updated_at":"2024-01-02T15:34:10.000Z","dependencies_parsed_at":"2022-08-24T00:50:20.967Z","dependency_job_id":null,"html_url":"https://github.com/AlienKevin/elm-rust-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlienKevin/elm-rust-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Felm-rust-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Felm-rust-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Felm-rust-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Felm-rust-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlienKevin","download_url":"https://codeload.github.com/AlienKevin/elm-rust-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Felm-rust-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263853379,"owners_count":23520131,"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":[],"created_at":"2024-11-23T15:43:38.012Z","updated_at":"2025-07-06T05:32:53.009Z","avatar_url":"https://github.com/AlienKevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-rust-template\n\nA convenient template for creating a progressive web app using Elm and Rust.\n\n# Set up\n## Elm\nFollow instructions [here](https://guide.elm-lang.org/install/) to install the Elm toolchain.\n\n## The Rust Toolchain\nYou will need the standard Rust toolchain, including rustup, rustc, and cargo.\n\n[Follow these instructions to install the Rust toolchain.](https://www.rust-lang.org/tools/install)\n\n## wasm-pack\nwasm-pack is your one-stop shop for building, testing, and publishing Rust-generated WebAssembly.\n\n[Get wasm-pack here!](https://rustwasm.github.io/wasm-pack/installer/)\n\n## cargo-generate\ncargo-generate helps you get up and running quickly with a new Rust project by leveraging a pre-existing git repository as a template.\n\nInstall cargo-generate with this command:\n```\ncargo install cargo-generate\n```\n\n## cargo-watch\ncargo-watch allows you to watch for code changes in Rust.\n\nInstall cargo-watch with this command:\n```\ncargo install cargo-watch\n```\n\n## npm\nnpm is a package manager for JavaScript. We will use it to install and run a JavaScript bundler and development server. At the end of the tutorial, we will publish our compiled .wasm to the npm registry.\n\n[Follow these instructions to install npm.](https://www.npmjs.com/get-npm)\n\nIf you already have npm installed, make sure it is up to date with this command:\n\n```\nnpm install npm@latest -g\n```\n\n# Usage\n\n## Clone this template\n```\ncargo generate --git https://github.com/AlienKevin/elm-rust-template\n```\nThis should prompt you for the new project's name.\n\n## Build Rust into WebAssembly\nIn the project root:\n```\ncargo watch -i \"pkg/*\" -s \"wasm-pack build\"\n```\nThis should continuously watch for Rust code changes and compile the new version into WebAssembly.\n\n## Install web dependencies\nOpen another terminal and navigate to the `www` directory:\n```\ncd www\n```\nThen install all npm dependencies:\n```\nnpm install\n```\n\n## Serve locally for development\nIn the `www` directory.\n\nWatch for Elm file changes:\n```\nnpm run watch\n```\nOpen another terminal, navigate to `www`\n```\ncd www\n```\nand spin up a dev server using webpack:\n```\nnpm run start\n```\nNavigate your Web browser to http://localhost:8080/ and you should see the default page.\n\nAll new changes will be automatically reflected on http://localhost:8080/.\n\n## Deploy for a new release\nIn the root directory.\n\nCreate an optimized release build from Rust to WebAssembly.\n```\nwasm-pack build --release\n```\nIn the `www` directory.\n\nBundle, optimize, and minimize all JavaScript and Elm for smaller asset size and faster speed.\n```\nnpm run build\n```\nNow you should see a `dist` folder within `www` similar to this:\n```\nwww\n├── ...\n├── dist\n    ├── 1.bootstrap.js\n    ├── 27911fde1b082c3d4.module.wasm\n    ├── bootstrap.js\n    ├── index.html\n    ├── ...\n├── ...\n```\nThis template uses set all build processes to production mode so all assets including JavaScript and WebAssembly are optimized and minimized. \n\n## Publish to Github Pages\nFollow all the previous steps outlined in deployment instructions. Then push the `www/dist` folder to the `gh-pages` branch on GitHub.\n```\ngit subtree push --prefix www/dist origin gh-pages\n```\n\n## Customization\n### Logos\nThis template by defaults uses the a combination of ico and png files to provide best logo resolutions for all popular platforms. Included logo files are:\n\n```\nwww\n  ├── android-chrome-192x192.png\n  ├── android-chrome-512x512.png\n  ├── apple-touch-icon.png\n  ├── favicon-16x16.png\n  ├── favicon-32x32.png\n  ├── favicon.ico\n```\nTo customize the logo used, go to https://favicon.io/ and generate your own logo files from text, image, or emoji. You are also welcome to user other logo generation tools but I found favicon.io easy and fast. Once you have the 6 files listed above, simply replace the originals and no further configurations are needed.\n\n### Theme color and background color\nTheme color specifies the color of the browser address bar. Background colors specifies the background color of the splash screen when the browser tries to load your app. You can change both of them in `www/manifest.json`:\n```json\n{\n  ...\n  \"theme_color\": \"#f74c00\",\n  \"background_color\": \"#ffffff\"\n}\n```\nYou should also change the `theme-color` meta-tag in the `\u003chead\u003e` of `www/index.html` to match the value specified in `www/manifest.json`:\n```html\n\u003cmeta name=\"theme-color\" content=\"#f74c00\"\u003e\n```\n\n# Porting existing Elm apps\nCurrently there are no automated way but it's still very easy.\n\n1. Copy all your Elm files into the `www/src` directory\n2. Modify the `www/index.html` and `www/index.js` to configure ports and HTML layouts.\n3. No step 3 because you are all set now. Just follow the above steps in building and shipping your project.\n\n# Examples using elm-rust-template\n[Hack Assembler](https://github.com/AlienKevin/hack-assembler-web): An assembler for the Hack assembly language\n\n# Credits\nTemplate and README adapted from [The Rust and Wasm Book](https://rustwasm.github.io/docs/book/introduction.html). Github Pages deployment instruction from [gh-pages-deploy](https://gist.github.com/cobyism/4730490)\n\n# License\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienkevin%2Felm-rust-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falienkevin%2Felm-rust-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienkevin%2Felm-rust-template/lists"}