Setup for elm in phoenix 1.3.0-rc directory structure

Phoenix Forum Questions / Help
,
1

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.

4 Likes
2

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):

3 Likes
3

Thanks to dustinfarris for the example brunch file.

I updated my example elm/phoenix 1.3 project in GitHub.
see: mwindholtz/hello_elm/blob/master/assets/brunch-config.js

It looks better than before, but still two issues:
(1) Page console now shows … Error: Cannot find module ‘js/app’ from ‘/’
(2) I still needed to hardcode the full path to executablePath

So something is still off base with the pathing.
Suggestions accepted.

ref: https://github.com/mwindholtz/elm_phoenix_1_3

1 Like
4

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';

2 Likes
5

Don’t see why but something is calling
/js/elm/elm-stuff/packages/elm-lang/virtual-dom/2.0.4/tests/TestMain.elm

TestMain.elm ?

1 Like
6

I have my elm folder in the my_app/lib/my_app/web/elm as well.
Should we really move it to my_app/assets/elm ?

Anyhow I tried both locations and my Elm application disappeared :frowning:
I mean when I visit wanted web page I can only see blank web page.

What should I check more?

2 Likes
7

The js console in your web browser might have some clues as to why you have a blank page.

I’d say just keep your elm folder at whatever location works for you for now as things still seem liable to change.

Maybe you missed a configuration step when trying to change the directory?

1 Like
8

Do you have something like “main module” in the brunch config? If so, probably you should update it with your own main module

1 Like
9

Console says Error: There are two Elm modules called Main on this page! Rename one of them.

It is app.js that is complaining.

What should I check? In app.js I have just two lines for Elm:
const elmDiv = document.getElementById(‘elm-main’)
, elmApp = Elm.Main.embed(elmDiv)

1 Like
10

I have moved elm back to lib/my_app/web/elm
In my brunch-config.js I have
watched: [“static”, “css”, “js”, “vendor”, “…/lib/my_app/web/elm”],

elmBrunch: {
elmFolder: “…/lib/my_app/web/elm”,
mainModules: [“Main.elm”],
outputFolder: “…/vendor”,
makeParameters: ["–warn"]
}

It seems like Elm can be compiled
Elm compile: Main.elm, in …/lib/my_app/web/elm, to …/vendor/main.js

But still page is blank and now console says:
Error: Cannot find module ‘js/app’ from ‘/’

I’ll keep searching but perhaps someone has a suggestion for me. Thanks.

1 Like
11

I have updated Brunch dependencies now and it seems that solved my problem.

I used package.json from new created Phoenix application.

1 Like
12

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.

1 Like
13

Sure. I’ll provide all details tomorrow.

1 Like
14

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 Likes
15

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 Like
17

NOTE: the GitHub repo in this post was replaced by the working example at https://github.com/mwindholtz/elm_phoenix_1_3

2 Likes
18

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 Like
19

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. :frowning:

1 Like
20

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 Like
21

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 Like