Select Page

Learn Elm Quickly by Making an App in Ubuntu 18.04

by | Oct 9, 2019 | Elm, Programming

Learn Elm quickly, why drag it out if you don’t have to? For this tutorial I am going to actually combine Elm and Golang in one. The Go will makeup the web server and the Elm will create the UI.

The startup app repository is outdated, but the solution is one that many have already put together for us. Using the elm-upgrade tool the dated dependencies listed out for this repo are automatically updated. I don’t even have to do anything really besides run the one command to get it working again.

Here’s What You Need

  • Ubuntu 18.04 Virtual Machine (VirtualBox). Need help? See the easy setup guide.
  • Golang
  • Elm
  • Bootstrap startup app

To accomplish this task one solution is to move the Elm binary into a directory already in your PATH. That directory is /usr/local/bin. Not sure? Try listing what is in your PATH already with the command echo $PATH. There it is!

# Move to ~/Downloads
ehg@ehg-VirtualBox:~$ cd Downloads

# Move Elm to /usr/local/bin
ehg@ehg-VirtualBox:~/Downloads$ sudo mv binaries-for-linux.tar.gz /usr/local/bin

Now that the Elm binary, the Elm program itself, is in the right spot it’s time for the next task. This task is simple. If you forget to do this step, you will be aware of it, as a shell prompt won’t recognize the elm command.

# Extract the Elm binary
ehg@ehg-VirtualBox:~/usr/local/bin$ sudo tar -xvzf binaries-for-linux.tar.gz

# Test 
ehg@ehg-VirtualBox:~/usr/local/bin$ elm
"blah blah blah... it worked!"

Get the “Bootstrap” App

The “bootstrap” app I am talking about is one that helps us create a new elm project and compile the Elm code into javascript. This web-compatible version of the project relies on the web server that we build with Go. That’s go-elm for ya! Download the master branch of the https://github.com/mremond/go-elm repo and save it into your home directory. This is the /home/{username}/ directory.

Mac Installation for Elm 18.0

npm install –global [email protected]

brew update

brew install node

git clone https://github.com/mremond/go-elm

cd go-elm

elm-package install

elm-make ./elm-src/App.elm --output static/js/app.js
cd server
go build server.go
./server
2019/07/25 19:00:14 Listening on port 3000

Ubuntu 18.04 LTS

sudo apt install nodejs
sudo apt install npm
npm install --global [email protected]
npm install -g elm-format
sudo npm i -g npx
cd go-elm/
npx elm-upgrade@latest
/usr/local/bin/elm make ./elm-src/App.elm --output static/js/app.js
~/go/src/go-elm/server$ go build server.go
./server

Upgrade from 18.0 to 19.0

Well so there are still some errors it seems in the repo, here’s a hint: it’s very old.

What’s the Difference?

Show the new elm stuff here

Here is the Elm 18.0 elm-package.json file.

{
    "version": "1.0.0",
    "summary": "Bootstrap app to get started quickly with Go + Elm application.",
    "repository": "https://github.com/mremond/go-elm.git",
    "license": "BSD3",
    "source-directories": [
        "elm-src"
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

and here is the Elm 19.0 elm-package.json file.

{
     "type": "application",
     "source-directories": [
         "elm-src"
     ],
     "elm-version": "0.19.0",
     "dependencies": {
         "direct": {
             "elm/core": "1.0.0",
             "elm/html": "1.0.0"
         },
         "indirect": {
             "elm/json": "1.0.0",
             "elm/virtual-dom": "1.0.2"
         }
     },
     "test-dependencies": {
         "direct": {},
         "indirect": {}
     }
 }

Here is the App.elm file from the Elm 18.0 original.

module App exposing (..)

import Html exposing (text)


main : Html.Html msg
main =
    text "Hello"

And here is the App.elm file from the Elm 19.0 upgrade.

module App exposing (main)

import Html exposing (text)


main : Html.Html msg
main =
    text "Hello"

Not much difference there.

Coming Soon

  • Using JSON data from a third party API in your Elm app.

error: