How do you organize files in apps with Elm and JS?

Curious question for the community: when you’ve got an app that has a fair amount of both Elm and JavaScript (or TypeScript, etc.), what does your directory structure usually look like? Do you keep the code in different languages in separate directory structures? Do you mix them up in the same one? Some and some?

I’m trying to make some decisions about this myself and I’m curious what others are doing.

I definitely favor separating things out as much as possible.

Here’s an example of how most of my scripts folders are organized, with one elm project and two ReScript projects within the overall project.


I have an assets folder with img, js and scss folders. After bundling, the img folder gets copied to dist, the js and scss get bundled together with the elm output into app.js and app.css.

I sometimes have doubts about the structure since the data in assets/js and assets/scss would still qualify as “source code” and I do have a src folder where I keep my elm files but this structure worked fine for me and I do like that my src folder is Elm only.

Having src/elm, scr/js and src/scss would also be fine. There is something in me that dislikes this structure but doesn’t hate it.

There is also the option where the source code is grouped by components:

src/Ui/Component.elm, src/Ui/Component/component.js, src/Ui/Component/component.scss

There are no solutions, only tradeoffs. In a multi-developer context, no matter what structure you select, some people will like it more than other.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.