All Projects → rtfeldman → elm-0.18-workshop

rtfeldman / elm-0.18-workshop

Licence: MIT license
An introductory Elm 0.18 workshop.

Programming Languages

elm
856 projects
javascript
184084 projects - #8 most used programming language

This workshop is licensed under a Creative Commons Attribution 4.0 International License. The server/ directory uses moleculer-node-realworld-example, which has its own license. The rest of the code is a variation on elm-spa-example, an MIT-licensed implementation of the realworld front-end. Many thanks to the authors of these projects!

Getting Started

Install Elm Tools

  1. Install Node.js 7.0.0 or higher

  2. Add a plugin for your editor of choice: Atom, Sublime Text, VS Code, Light Table, Vim, Emacs, Brackets

  3. Not required, but highly recommended: enable "elm-format on save" in your editor.

  4. Run the following command to install all the other Elm tools:

Note: Make sure not to run this command with sudo! If it gives you an EACCESS error, apply this fix and then re-run the command (still without sudo).

You can confirm this worked by running:

elm --version

It should print 0.18.0 if everything worked!

Clone this repository

Run this at the terminal:

git clone https://github.com/rtfeldman/elm-0.18-workshop.git
cd elm-0.18-workshop

Note: Tab characters are syntax errors in Elm code, so if your editor uses them for indentation, definitely switch it to spaces for this workshop!

Start the server

We'll be running a local server for our Elm UI to use. Let's get it set up.

cd server
npm install
npm start

If the server started up successfully, you should see > moleculer-runner services at the end of your terminal.

We're going to leave this server running and not touch it again for the duration of the workshop, so don't close it until the workshop is over!

Build the Elm UI

Leave the existing terminal running, and open a second terminal.

In the new termnal, cd into the elm-workshop/server/ directory again.

Then run this to build the Elm code for the first time:

elm-live src/Main.elm --output=../server/public/elm.js --dir=../server/public --pushstate

It should say "Server running at" and "LiveReload running on" - but we'll ignore both of those, because we'll instead be using the server we already started running in the previous step!

Leave elm-live running and open http://localhost:3000 in your browser. You should see this in it:

A screenshot showing “You’re all set!”

If things aren’t working, the instructor will be happy to help!

Links

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].