Part 1: How to setup IHP with Elm

Get Elm with hot reloading on top of IHP, the new framework that makes Haskell a cool kid in web dev.

This is part 1 of the series IHP with Elm

Elm was my gateway drug into type-safe functional programming. It's such a good tool for making robust frontends. Writing big projects in React and TypeScript honestly bums me out because of it.

I have always wanted have to have the equivalent type-safe joy on the backend like I have with Elm.

Now I have it all, with SSR included and an amazing developer experience 😍

IHP is a new web framework that has opened a wide door for the web development community to get into Haskell. Like Rails and Laravel, it's great for quick prototyping, well documented and easy to use.

It even has the pipe operator (|>) included making it even more similar to the Elm syntax.

Things I don't use Elm for in IHP

IHP gives you HTML templating (HSX) with pure functions, very similar to Elm. In that regard it's partially overlapping with Elm.

It can be a blurry line for beginners, so here are my recommendations for how to set those lines.

So unless you really want to write a full Single Page App, Elm should be used with restraint in IHP, for only specific supercharged parts of the site.

Most sites are actually better off outputting just HTML and CSS.

Create a new IHP Project

If you haven't installed IHP already, make sure you do. It's surprisingly easy to get going.

After it's installed, you can now simply run this command:

ihp-new --elm ihp-with-elm

To verify the app is working, cd into the ihp-with-elm folder and run ./start.

Archived deprecated content

NOTE: This part of the series was formerly longer, but IHP has added official support for initializing Elm that is pretty much identical to part 1 of this series. 😀 I have archived the former content of this part into this gist. The gist can be useful if you want to implement Elm into an existing project.

The only thing to note is that it doesn't remove dependencies you might not use like for example jQuery.


This article belongs to a 4 part series

  1. Part 1: How to setup IHP with Elm

    Get Elm with hot reloading on top of IHP, the new framework that makes Haskell a cool kid in web dev.

  2. Part 2: Initialize data from IHP to Elm through flags

    Generate types, encoders and decoders for Elm automatically in IHP.

  3. Part 3: Structure Elm into a multi-widget app for IHP

    Making the widget-equivalent of Richard Feldmans's RealWorld SPA.

  4. Part 4: Making http requests from Elm to IHP

    Communication between Elm and IHP through HTTP JSON requests.