Its good news that elm is now working for you. Would you be willing to share your directory structure and your brunch-config.js file? I’d still like to get my example app above working for everyone to see.
windholtz
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.
4
windholtz
Its working!
The example Phoenix App (new git repo below) is now loading and displaying HelloElm.elm
This is how you could connect an Elm into the new directory structure of a Phoenix 1.3 app.
Full example of the configs that work, see: https://github.com/mwindholtz/elm_phoenix_1_3
Thanks to everyone for suggestions and examples.
I’m removing the old git repo from previous posts, since it is just a mess at this point.
1
windholtz
NOTE: the GitHub repo in this post was replaced by the working example at https://github.com/mwindholtz/elm_phoenix_1_3
2
Oxyrus
I still can’t manage to get it working, I have my Elm folder under lib/my_app/web/elm, I have my Main.elm file as follows:
module HelloWorld exposing (..)
import Html
main =
Html.text "Hello world from Elm!"
My brunch-config.js is as follows:
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
paths: {
watched: ["static", "css", "js", "vendor", "../lib/my_app/web/elm"],
public: "../priv/static"
},
plugins: {
babel: {
ignore: [/vendor/]
},
elmBrunch: {
elmFolder: "../lib/my_app/web/elm",
mainModules: ["Main.elm"],
makeParameters: ['--debug'],
outputFolder: "assets/js"
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
My app.js file:
import "phoenix_html"
import Elm from "./main.js"
const elmDiv = document.getElementById('elm-main')
, elmApp = Elm.SeatSaver.embed(elmDiv)
But I get the error
iex(1)> 16:22:00 - error: Processing of js/app.js failed. Error: Could not load module ‘./main.js’ from ‘/home/ubuntu/workspace/my_app/assets/js’. Make sure the file actually exists.
Edit
Also tried with @Most instructions:
exports.config = {
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
paths: {
watched: ["static", "css", "js", "vendor", "../lib/my_app/web/elm"],
public: "../priv/static"
},
plugins: {
babel: {
ignore: [/vendor/]
},
elmBrunch: {
elmFolder: "../lib/my_app/web/elm",
mainModules: ["Main.elm"],
outputFolder: "../../../../assets/js",
outputFile: "elm.js",
makeParameters: ['--debug']
},
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true
}
};
Running $ find -name "elm.js" doesn’t return any file for given name, so it’s not compiling the file.
I keep getting
iex(1)> 16:39:50 - error: Processing of js/app.js failed. Error: Could not load module ‘./elm.js’ from ‘/home/ubuntu/workspace/my_app/assets/js’. Make sure the file actually exists.
What am I missing here?
1
windholtz
Are you able to get my example project from the link above, working? It uses a different directory structure with assets/elm
Also, remember to check your package.json for the latest version numbers of everything including brunch. This took me hours to learn. 
1
Oxyrus
I’ve also tried with it under assets/elm but it still doesn’t output the file so I get an error when I import Elm from './main.js'
1
Most
Are you seeing anything In your terminal when you start the phoenix server about elm failing or succeeding to compile?
For example:
Elm compile: Main.elm, in ../lib/my_app/web/elm, to ../../../../assets/js/elm.js
1
Oxyrus
No, the error is the same
iex(1)> 16:39:50 - error: Processing of js/app.js failed. Error: Could not load module ‘./elm.js’ from ‘/home/ubuntu/workspace/my_app/assets/js’. Make sure the file actually exists.
1