windholtz

windholtz

Setup for elm in phoenix 1.3.0-rc directory structure

I’m trying to get elm and brunch-config.js working with the phoenix 1.3.0-rc directory structure https://github.com/mwindholtz/elm_phoenix_1_3 (UPDATE: URL now points to the solution repo)

The error is that “ReferenceError: Can’t find variable: Elm”
Are there any examples out there on how to set up brunch for 1.3.0-rc ?

brunch-config.js is here:
https://github.com/mwindholtz/elm_phoenix_1_3 /blob/master/assets/brunch-config.js (UPDATED: now points to the solution repo)

I hardcoded executablePath just to at least get it to compile.
And it does compile a seatsaver.js in assets/static/vendor/seatsaver.js

but somehow not loading when I hit the page.

Most Liked

mm-tfx

mm-tfx

When I started with Elm and Phoenix I put Elm code into web directory and now when moving towards Phoenix 1.3 I kept this structure. So now Elm code is in lib/my_app/web/elm
brunch-config.js and package.json are in assets directory.
Elm part in brunch-config.js looks like this:

elmBrunch: {
      elmFolder: "../lib/my_app/web/elm",
      mainModules: ["Main.elm"],
      outputFolder: "../../../../assets/js"
    }

I have also added Elm path to (still brunch-config.js):

watched: [ "static", "css", "js", "vendor", "../lib/my_app/web/elm"],

I have modified package.json according to Phoenix upgrade instruction but I had to update devDependencies.
For this I created new Phoenix application using mix phx.new and I copied this part of a package.json
Now it looks like this:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "babel-brunch": "6.0.6",
    "brunch": "2.10.7",
    "clean-css-brunch": "2.10.0",
    "css-brunch": "2.10.0",
    "elm-brunch": "^0.8.0",
    "uglify-js-brunch": "2.1.1"
  }
}

Last thing I did was to update assets/js/app.js I had to add import Elm from "./main.js

import Elm from "./main.js"
const elmDiv = document.getElementById('elm-main')
   , elmApp = Elm.Main.embed(elmDiv)

Before it worked for me even without this import line, maybe it should work without anyhow, I’ll try.

Please let me know if you need more information.

dustinfarris

dustinfarris

I am using 1.3-rc.0. I have this directory structure:

assets/
    elm-package.json
    package.json
    brunch-config.js
    js/
    css/
    elm/
        Main.elm

I have elm, elm-css, elm-brunch, and elm-css-brunch installed:

npm install elm elm-css elm-brunch elm-css-brunch --save-dev

Here’s my brunch config (note I am also using elm-css):

Most

Most

I have my elm folder in the directory my_app/lib/my_app/web/elm.

I’m not using elmCss. The only 2 parts of my brunch config I changed that were relevant to elm are:

paths: {
    watched: ["static", "css", "js", "vendor", "../lib/my_app/web/elm"],
    ...

and

plugins: {
    babel: {
      ...
    },
    elmBrunch: {
      elmFolder: "../lib/my_app/web/elm",
      mainModules: ["Main.elm"],
      outputFolder: "../../../../assets/js",
      outputFile: 'elm.js',
      makeParameters: ["--warn"]
    }

I should probably move my elm folder to my_app/assets/elm like @dustinfarris though :sweat_smile:.

And at the top of my_app/assets/js/app.js I have import Elm from './elm.js';

Last Post!

sashang

sashang

Glad I’m not the only one. New to Phoenix and Elm I thought I was just being stupid or the instructions I was following when trying to set it up were buggy. Turns out it’s a change in the Phoenix directory structure that 1.3 brought that was causing the instructions not to work.

Where Next?

Popular in Questions Top

vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New

Other popular topics Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36654 110
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44532 311
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New

We're in Beta

About us Mission Statement