Browse files

Added Elm support. (#324)

* Added Elm Webpack loader.

- Informs Webpack on how to transform Elm source code into JavaScript
- Elm requires Node (`node_modules`) and Elm-specific (`elm-stuff`) package
  dependencies that can be excluded (NOTE: There is talk within the Elm
  community that a future change might eliminate the need for the `elm-
  stuff` directory altogether).

* Added Elm extension to Webpack paths.

- Necessary for Webpack to recognize Elm source code file extensions.
- Might be a worthwhile to alpha-sort this list in the future.

* Added Elm example application.

- Provides an example Elm application which can be used to confirm that
  Elm is running properly on top of Rails.
- This is the minimum required for a single page Elm application (with
  enough structure in place for others to expand upon).

* Added Elm install script.

- Necessary to perform the actual install of the Elm example app within
  the newly generated Rails app.

* Added Elm to list of Rake task installers.

- Necessary to list Elm as an installable option.
- Usage: `rails webpacker:install:elm`.

* Updated to Bundler 1.14.6.

- Keeps us on the latest version of Bundler.
- Additionally, updates the gem to the proper version as denoted in

* Added Elm usage documentation to README.

- Provides instruction on how to setup Elm with a new or existing Rails

* Fixed .gitignore to ignore gem packages.

- When building the gem locally, for testing purposes (i.e. `bundle
  exec rake install`), you don't want the `pkg` directory lingering
  around in order to avoid accidental inclusion in a commit.

* Added Elm support notes to CHANGELOG.

- Preps the CHANGELOG for future release with new details added.
  • Loading branch information...
bkuhlmann authored and gauravtiwari committed May 5, 2017
1 parent 69c09a5 commit 74cde3c0f028516f11a793c17235ea71af21bca6
@@ -1,2 +1,3 @@
@@ -1,3 +1,7 @@
- Added [Elm]( support. You can now add Elm support via the following methods:
- New app: `rails new <app> --webpack=elm`
- Within an existing app: `rails webpacker:install:elm`
## [1.2] - 2017-04-27
Some of the changes made requires you to run below commands to install new changes.
@@ -1,7 +1,7 @@
remote: .
webpacker (1.1)
webpacker (1.2)
activesupport (>= 4.2)
multi_json (~> 1.2)
railties (>= 4.2)
@@ -134,4 +134,4 @@ DEPENDENCIES
@@ -215,6 +215,13 @@ To use Webpacker with Angular, just create a new app with `rails new myapp --web
To use Webpacker with Vue, just create a new app with `rails new myapp --webpack=vue` (or run `rails webpacker:install:vue` on a Rails app already setup with webpacker). Vue and its supported libraries will be added via yarn and changes to the configuration files made. An example component is also added to your project in `app/javascript` so that you can experiment Vue right away.
## Ready for Elm
To use Webpacker with [Elm](, create a new app with `rails new myapp
--webpack=elm` (or run `rails webpacker:install:elm` on a Rails app already setup with webpacker).
The Elm library and core packages will be added via Yarn and Elm itself. An example `Main.elm` app
is also added to your project in `app/javascript` so that you can experiment with Elm right away.
## Troubleshooting
* If you get this error `ENOENT: no such file or directory - node-sass` on Heroku
@@ -0,0 +1,5 @@
module.exports = {
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-hot-loader!elm-webpack-loader?verbose=true&warn=true&debug=true'
@@ -9,6 +9,7 @@ default: &default
source: app/javascript
- .coffee
- .elm
- .js
- .jsx
- .ts
@@ -0,0 +1,22 @@
require "webpacker/configuration"
puts "Copying elm loader to #{Webpacker::Configuration.config_path}/loaders"
copy_file "#{__dir__}/config/loaders/installers/elm.js",
puts "Copying elm example entry file to #{Webpacker::Configuration.entry_path}"
copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker::Configuration.entry_path}/Main.elm"
puts "Copying elm app file to #{Webpacker::Configuration.entry_path}"
copy_file "#{__dir__}/examples/elm/hello_elm.js",
puts "Updating .gitignore to include elm-stuff folder"
insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"
puts "Installing all elm dependencies"
run "./bin/yarn add elm"
run "./bin/yarn add --dev elm-hot-loader elm-webpack-loader"
run "yarn run elm package install -- --yes"
puts "Webpacker now supports elm 🎉"
@@ -0,0 +1,54 @@
module Main exposing (..)
import Html exposing (Html, h1, text)
import Html.Attributes exposing (style)
type alias Model =
init : (Model, Cmd Message)
init =
(Model, Cmd.none)
view : Model -> Html Message
view model =
-- The inline style is being used for example purposes in order to keep this example simple and
-- avoid loading additional resources. Use a proper stylesheet when building your own app.
h1 [style [("display", "flex"), ("justify-content", "center")]]
[text "Hello Elm!"]
type Message
= None
update : Message -> Model -> (Model, Cmd Message)
update message model =
(model, Cmd.none)
subscriptions : Model -> Sub Message
subscriptions model =
main : Program Never Model Message
main =
init = init,
view = view,
update = update,
subscriptions = subscriptions
@@ -0,0 +1,11 @@
// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the head of your layout
// file, like app/views/layouts/application.html.erb. It will render "Hello Elm!" within the page.
import App from './Main'
document.addEventListener('DOMContentLoaded', () => {
const target = document.createElement('div')
@@ -1,5 +1,6 @@
"Angular": :angular,
"Elm": :elm,
"React": :react,
"Vue": :vue

0 comments on commit 74cde3c

Please sign in to comment.