https://github.com/dwyl/phoenix-elm-starter
🌱 A quick starter for building a Phoenix + Elm (PETE Stack) project with Esbuild compilation, live reloading, etc.
https://github.com/dwyl/phoenix-elm-starter
elixir elixir-lang elixir-phoenix elm elm-lang example phoenix phoenix-framework starter starter-kit
Last synced: 8 months ago
JSON representation
🌱 A quick starter for building a Phoenix + Elm (PETE Stack) project with Esbuild compilation, live reloading, etc.
- Host: GitHub
- URL: https://github.com/dwyl/phoenix-elm-starter
- Owner: dwyl
- Created: 2022-04-26T16:59:54.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-09-16T09:54:36.000Z (9 months ago)
- Last Synced: 2025-09-16T11:58:01.959Z (9 months ago)
- Topics: elixir, elixir-lang, elixir-phoenix, elm, elm-lang, example, phoenix, phoenix-framework, starter, starter-kit
- Language: JavaScript
- Homepage:
- Size: 637 KB
- Stars: 32
- Watchers: 4
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Phoenix + Elm _Starter_
A **starter kit**
for adding
an **`Elm` frontend**
to a **`Phoenix` Web App**lication.
[](http://codecov.io/github/dwyl/phoenix-elm-starter?branch=main)
[](https://hex.pm/packages/phoenix)
[](https://github.com/dwyl/phoenix-elm-starter/issues)
[](https://github.com/dwyl/phoenix-elm-starter)
## _Why?_
To build a more **advanced UI/UX**,
there is **_nothing_ better than `Elm`**.
## What?
A step-by-step guide to getting `Elm`
working in a `Phoenix` app
with live reloading.
By the end of this guide you will understand
how all the pieces fit together.
Latest `Phoenix`,
latest `Elm`
and `esbuild`;
the fastest build system available.
## How?
### Prerequisites
_Before_ you start,
make sure you have the following installed:
1. `Elixir`: https://elixir-lang.org/install.html
New to `Elixir`, see: https://github.com/dwyl/learn-elixir
2. `Phoenix`: https://hexdocs.pm/phoenix/installation.html
New to `Phoenix` see:
https://github.com/dwyl/learn-phoenix-framework
3. `Node.js`: https://nodejs.org/en
4. `Elm`: https://guide.elm-lang.org/install/elm.html
e.g: `npm install -g elm@elm0.19.1`
Once you have `Elm` installed,
run the following command in your terminal
to confirm:
```sh
elm --version
```
you should see:
```sh
0.19.1
```
### Create the Phoenix App
For this example, we are creating a basic **`Phoenix`** App
without the live dashboard or mailer (email)
but with `Ecto` (Postgres database)
so that we can simulate a real-world app.
```sh
mix phx.new app --no-dashboard --no-mailer
```
```sh
cd app
```
```sh
mix ecto.setup
```
```sh
mix phx.server
```
Open your web browser to the URL: http://localhost:4000
You should see the default **`Phoenix`** home page:
So far so good. 👌
Let's add **`Elm`**!
## Add `Elm` to the `Phoenix` App
Change directory in `/assets`,
and create a directory called `elm`.
Inside the `/assets/elm` directory,
run the following command:
```sh
elm init
```
See: https://elm-lang.org/0.19.1/init
You will see the following prompt:
```sh
Hello! Elm projects always start with an elm.json file. I can create them!
Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.
Check out for all the answers!
Knowing all that, would you like me to create an elm.json file now? [Y/n]: y
```
Type `y` and `Enter` to continue:
```sh
Okay, I created it. Now read that link!
```
That will have created a new directory at `/assets/elm/src`
and an `elm.json` file.
### Create a `Main.elm` file
Create a new file with the path:
`/assets/src/Main.elm`
and add the following contents to it:
```elm
module Main exposing (..)
import Html exposing (text)
name = "Alex" -- set name to your name!
main =
text ("Hello " ++ name ++ "!")
```
### _Manually_ Compile the `Elm` Code
```sh
elm make elm/src/Main.elm --output=../priv/static/assets/elm.js
```
That results in an un-optimized **`elm.js`** file that is **488kb**
For development/testing purposes this is fine;
we can optimize/minify it for production later. (see below)
Let's include this file in our `Phoenix` template just to show that it works.
### _Temporarily_ add `elm.js` to `root.html.heex` template
> **Note**: this will not work in production,
> it's just for basic illustration as a "_quick win_".
Open the
`lib/app_web/templates/layout/root.html.heex`
file
and add the following lines just before the `