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
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
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
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
.
And at the top of my_app/assets/js/app.js I have import Elm from './elm.js';
Last Post!
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex










