Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://rtfeldman.github.io/elm-spa-example/
A Single Page Application written in Elm
https://rtfeldman.github.io/elm-spa-example/
Last synced: 3 months ago
JSON representation
A Single Page Application written in Elm
- Host: GitHub
- URL: https://rtfeldman.github.io/elm-spa-example/
- Owner: rtfeldman
- License: mit
- Created: 2017-05-08T07:41:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-03T22:11:23.000Z (about 1 year ago)
- Last Synced: 2024-07-31T17:16:45.341Z (3 months ago)
- Language: Elm
- Homepage: https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa
- Size: 781 KB
- Stars: 3,287
- Watchers: 81
- Forks: 531
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-BigData - Elm SPA Example - Full stack Elm app w/ CRUD operations, Auth, routing, pagination and more. [Code](https://github.com/rtfeldman/elm-spa-example) / [Article](https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa) (Examples)
README
# 
👉 I gave [a talk](https://www.youtube.com/watch?v=x1FU3e0sT1I)
to explain the principles I used to build this. I highly recommend watching it!
> [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.
### [Demo](https://elm-spa-example.netlify.com/)Â Â Â Â [RealWorld](https://github.com/gothinkster/realworld)
This 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.
For more information on how this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
# How it works
Check out [the full writeup](https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa)!
# Building
I 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.
## Development Build
[Install Elm](https://guide.elm-lang.org/install.html) (e.g. with `npm install --global elm`), then from the root project directory, run this:
```
$ elm make src/Main.elm --output elm.js
```
If you want to include the time-traveling debugger, add `--debug` like so:
```
$ elm make src/Main.elm --output elm.js --debug
```
To 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).
## Production Build
This is a two-step process. First we compile `elm.js` using `elm make` with `--optimize`, and then we Uglify the result.
#### Step 1
```
$ elm make src/Main.elm --output elm.js --optimize
```
This [generates production-optimized JS](https://elm-lang.org/blog/small-assets-without-the-headache) that is ready to be minified further using Uglify.
#### Step 2
(Make sure you have [Uglify](http://lisperator.net/uglifyjs/) installed first, e.g. with `npm install --global uglify-js`)
```
$ 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 && uglifyjs elm.js --mangle --output=elm.js
```
This 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`.
> 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.