{"id":13393404,"url":"https://github.com/rtfeldman/elm-spa-example","last_synced_at":"2025-05-14T21:06:51.381Z","repository":{"id":38310790,"uuid":"90600001","full_name":"rtfeldman/elm-spa-example","owner":"rtfeldman","description":"A Single Page Application written in Elm","archived":false,"fork":false,"pushed_at":"2023-11-03T22:11:23.000Z","size":800,"stargazers_count":3297,"open_issues_count":50,"forks_count":528,"subscribers_count":81,"default_branch":"master","last_synced_at":"2025-05-07T21:09:49.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa","language":"Elm","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/rtfeldman.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-08T07:41:27.000Z","updated_at":"2025-05-07T15:21:21.000Z","dependencies_parsed_at":"2024-01-08T20:18:59.757Z","dependency_job_id":null,"html_url":"https://github.com/rtfeldman/elm-spa-example","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-spa-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-spa-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-spa-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-spa-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtfeldman","download_url":"https://codeload.github.com/rtfeldman/elm-spa-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227612,"owners_count":22035669,"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-07-30T17:00:51.944Z","updated_at":"2025-05-14T21:06:46.358Z","avatar_url":"https://github.com/rtfeldman.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# ![RealWorld Example App](https://cloud.githubusercontent.com/assets/556934/25448178/3e7dc5c0-2a7d-11e7-8069-06da5169dae6.png)\n\n👉 I gave [a talk](https://www.youtube.com/watch?v=x1FU3e0sT1I)\nto explain the principles I used to build this. I highly recommend watching it!\n\n\u003e [Elm](http://elm-lang.org) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API.\n\n\n### [Demo](https://elm-spa-example.netlify.com/)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;[RealWorld](https://github.com/gothinkster/realworld)\n\n\nThis codebase was created to demonstrate a fully fledged fullstack application built with [Elm](http://elm-lang.org) including CRUD operations, authentication, routing, pagination, and more.\n\nFor more information on how this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.\n\n# How it works\n\nCheck out [the full writeup](https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa)!\n\n# Building\n\nI decided not to include a build script, since all you need for a development build is the `elm` executable, and all you need on top of that for production is Uglify.\n\n## Development Build\n\n[Install Elm](https://guide.elm-lang.org/install.html) (e.g. with `npm install --global elm`), then from the root project directory, run this:\n\n```\n$ elm make src/Main.elm --output elm.js\n```\n\nIf you want to include the time-traveling debugger, add `--debug` like so:\n\n```\n$ elm make src/Main.elm --output elm.js --debug\n```\n\nTo view the site in a browser, bring up `index.html` from any local HTTP server, for example [`http-server`](https://www.npmjs.com/package/http-server).\n\n## Production Build\n\nThis is a two-step process. First we compile `elm.js` using `elm make` with `--optimize`, and then we Uglify the result.\n\n#### Step 1\n\n```\n$ elm make src/Main.elm --output elm.js --optimize\n```\n\nThis [generates production-optimized JS](https://elm-lang.org/blog/small-assets-without-the-headache) that is ready to be minified further using Uglify.\n\n#### Step 2\n\n(Make sure you have [Uglify](http://lisperator.net/uglifyjs/) installed first, e.g. with `npm install --global uglify-js`)\n\n```\n$ uglifyjs elm.js --compress 'pure_funcs=\"F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9\",pure_getters=true,keep_fargs=false,unsafe_comps=true,unsafe=true,passes=2' --output=elm.js \u0026\u0026 uglifyjs elm.js --mangle --output=elm.js\n```\n\nThis one lengthy command (make sure to scroll horizontally to get all of it if you're copy/pasting!) runs `uglifyjs` twice - first with `--compress` and then again with `--mangle`.\n\n\u003e It's necessary to run Uglify twice if you use the `pure_funcs` flag, because if you enable both `--compress` and `--mangle` at the same time, the `pure_funcs` argument will have no effect; Uglify will mangle the names first and then not recognize them when it encounters those functions later.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtfeldman%2Felm-spa-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtfeldman%2Felm-spa-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtfeldman%2Felm-spa-example/lists"}