For starters, this repo is a great way to get an Elm project started with Webpack, so kodus!

I've set up my own project with Elm using this starter pack successfully. However, when I run npm run build to create my production files and open index.html (like the readme says), the browser shows a blank page.

While investigating this, I noticed that the src path in the script tag in index.html has a leading slash (/), meaning it will look in the root directory of either the file system or the web server. Since "To check it, open dist/index.html" can also mean just opening the file in your browser (without a web server), this led to a little confusion on my part. I expected my Elm app to show up, but instead got a blank page and the browser suprisingly gave no errors. Removing the leading slash fixed this. Of course, when you deploy the dist directory to a web server, the added slash is logical.

Long story short: I wanted to point out this confusion in case anyone else ran into this. It might be a good idea to edit the readme so it mentions serving index.html on a web server explicitly. The line I'm talking about is right here: https://github.com/elm-community/elm-webpack-starter/blame/master/README.md#L52

We should probably migrate to webpack 2 and update all other dependencies along the way too. I could give it a shot during the following week if that's ok with everyone. Any thoughts on that?

Hi!

This is just a general question about webpack configuration.. hope it's OK to ask here?
My local path for images is on my dev server is:

"../images"

But, when the project is deployed it will need to grab the images from here:

"/digitalresources/html/eng4cc/images/"

Is it possible to configure webpack to use this path when it builds to the dist folder?

when I execute npm start, it shows this:

ERROR in ENOENT: no such file or directory, 
scandir '/Users/AriesDevil/Documents/workspace/elm_workspace/girion/node_modules/node-sass/vendor'

It seems like hot auto reloading on save does not work for imported components.
So in this case it does not work for Hello.elm, but Main.elm hot reloading on save works fine.

I'm trying out elm-webpack-starter, and it's made getting started really easy. However, I'm not able to see any bootstrap styles besides Glyphicons in my generated index.html with the default config (using npm start). Is there an extra step I'm missing?

The official way to use Autoprefixer is by postcss-loader:

https://github.com/postcss/autoprefixer#webpack

If you follow Elm best practices and keep up with things said at Elm conf, you'll know that the idea of "Components" is not really encouraged. If a developer coming from react.js uses this boilerplate, they might believe that they "should" make everything a component. With that in mind, I propose that we remove the component example.

Running npm start will raise this error when using elm-lang/core 4.0.5. Works fine with elm-lang/core 4.0.4.

I installed everything.

I tried to change
, span[][ text "FTW!" ]
into
, span[][ text "FTW!!" ]

Then this happens:

What I'm doing wrong?
I'm on Fedora 24 and use Atom as Editor.

It would be nice to see the environment setup for unit & fuzz tests in the boilerplate too.

Hi,

was trying your code as mine (https://github.com/simonh1000/elm-hot-loader) is having lots of issues with watching (basically it watches one failed build and then stops, and this only on my bigger projects!).

But your code does not support images.

Hi, just a "Thank you!" for bumping this up to 0.17 😄
I user elm-webpack-starter with all my Elm projects and love it.

I have some code that compiles and runs fine in elm reactor.
However, when I run code the code with elm-webpack-starter I'm getting this runtime error:

Cannot read property 'appendChild' of null

The problem code is parentNode.appendChild(appNode); from this block of ode in main.js

function debugRenderer(moduleName, parentNode, popoutRef, view, viewIn, viewOut)
{
	return function(tagger, initialModel)
	{
		var appEventNode = { tagger: tagger, parent: undefined };
		var eventNode = { tagger: tagger, parent: undefined };

		// make normal stepper
		var appVirtualNode = view(initialModel);
		var appNode = render(appVirtualNode, appEventNode);
		parentNode.appendChild(appNode);
		var appStepper = makeStepper(appNode, view, appVirtualNode, appEventNode);

		// make overlay stepper
		var overVirtualNode = viewIn(initialModel)._1;
		var overNode = render(overVirtualNode, eventNode);
		parentNode.appendChild(overNode);
		var wrappedViewIn = wrapViewIn(appEventNode, overNode, viewIn);
		var overStepper = makeStepper(overNode, wrappedViewIn, overVirtualNode, eventNode);

		// make debugger stepper
		var debugStepper = makeDebugStepper(initialModel, viewOut, eventNode, parentNode, moduleName, popoutRef);

		return function stepper(model)
		{
			appStepper(model);
			overStepper(model);
			debugStepper(model);
		}
	};
}

It looks like tagger has an undefined parent.
Does anyone know what the problem might be?

Hi,

I have a very basic question about how to link an external JS file.

I'm using Material Design Lite (https://getmdl.io/index.html) for basic styling. It contains a CSS and JS file. I've been able to load the CSS file by adding a simple link in the head of index.html. But, I haven't been able to figure out how to link the JS file. Loading it with a <script> tag in the <body> seems to have no effect:

<body>
    <div id="main"></div>
    <script src="mdl/material.min.js"></script>
  </body>

Does the JS file need to be linked in webpack.config.js, index.js or through a subscription in the Elm source code?
Any advice would be appreciated 😄

Is there any particular reason for why dist is commited to the repo?

I randomly stumbled upon this repository and found an issue.

The yarn lockfile must be included in the repository, as it ensures that all dependencies and subdependencies are the same accross everyone's computers. That is why yarn was created in the first place to replace npm.

The flow should be:

• Don't use NPM to install dependencies. Use Yarn instead.
• On the maintainer's computer, run yarn install.
• Commit yarn.lockfile to the repository.

This will ensure that everyone else have the exact same setup, allowing for easier tracking of bugs when they occur.

Hello!

I've followed your directions for installing and running elm-webpack-starter and am receiving this error message when I run npm start

WEBPACK GO!
Serving locally...
http://localhost:8080/
webpack result is served from /
content is served from /Users/rexvanderspuy/elm/elm-webpack-starter
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn /Users/rexvanderspuy/elm/elm-webpack-starter/node_modules/elm/Elm-Platform/0.16.0/.cabal-sandbox/bin/elm-make ENOENT
    at exports._errnoException (util.js:860:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:450:9)
    at process._tickCallback (node.js:364:17)
    at Function.Module.runMain (module.js:459:11)
    at startup (node.js:136:18)
    at node.js:972:3

I'm on OS X El Capitan.
Do you have any idea what might be wong?

Hi, I'm not sure what's wrong but if Elm runs into an error and it can't compile, it seems that webpack stops picking up changes after that. This happens with the elm-webpack-starter webpack.config and any other ones I try with elm + webpack. Any thoughts?

First, huge thanks!

It seems when Elm code gets broken, you get a great compiler error, but then hot reloading never recovers, nor does fixing the issue & manual refreshing the page.

During development (npm start) the favicon is not available at ./favicon.ico but ./static/favicon.ico

Hi,

It would be great if it were possible to maybe install globally elm webpack starter and then to create project like elm-webpack-starter create MyProject.

BTW thanks for your work, it help me a lot, webpack is so fuck up and so hard to understand, and everything that can help use it without understanding the shit about it is very welcome.

To make it easy for folks to deploy an application based on this starter kit, we should include a docker setup so that it's easy to push something like this to production.

Hi there,

I'm just toying around with this kit starter, by the way, great job... but I noticed that when I modify the component Hello.elm, the app doesn't reload. It does so when I modify Main.elm though. I followed the installation, and I get the app running, but it doesn't seem to reload with changes in subfolders. Could it be an issue in elm-hot-loader?

Thanks

Hi!

I've followed the instructions on the README to install this on OSX.
I'm getting this error at sudo npm run reinstall:

Binary found at /Users/rvanderspuy/newspaper_interview_18/node_modules/node-sass/vendor/darwin-x64-46/binding.node
Testing binary
Binary is fine
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants elm-webpack-loader@^4.1.1

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rvanderspuy/newspaper_interview_18/npm-debug.log

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "reinstall"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] reinstall: `npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] reinstall script 'npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install'.
npm ERR! This is most likely a problem with the elm-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs elm-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls elm-webpack-starter
npm ERR! There is likely additional logging output above.

When I run nam start I get this message:

ERROR in Cannot find module 'glob'
 @ ./src/static/index.js 7:10-34

Any idea what might be wrong?

Hi,

I get an error when I try to build the default app for "distribution".

In the dist folder, I get some files, and the app actually runs, but the image is missing (and I guess that some other assets too)

Any idea what I am doing wrong ?

Thanks in advance !

Below are the error details :

'cp' n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run
" "build"
npm ERR! node v6.1.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist
/favicon.ico`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'rimraf dist && webpack && cp -r src/img/ dist/img/ && cp
src/favicon.ico dist/favicon.ico'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the elm-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs elm-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls elm-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Dev\Perso\elm-webpack-starter\npm-debug.log

npm-debug.log contains the following :

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Dev\Perso\elm-webpack-starter\node_modules\.bin;C:\Program Files\nodejs;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\WINDOWS\system32\config\systemprofile\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Elm Platform\0.17\bin;C:\Users\tdesodt.DEV\AppData\Roaming\npm;C:\Program Files (x86)\Microsoft VS Code\bin
10 verbose lifecycle [email protected]~build: CWD: C:\Dev\Perso\elm-webpack-starter
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c',
11 silly lifecycle   'rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico' ]
12 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:239:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:850:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Dev\Perso\elm-webpack-starter
17 error Windows_NT 10.0.10586
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v6.1.0
20 error npm  v3.8.6
21 error code ELIFECYCLE
22 error [email protected] build: `rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico`
22 error Exit status 1
23 error Failed at the [email protected] build script 'rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the elm-webpack-starter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     rimraf dist && webpack && cp -r src/img/ dist/img/ && cp src/favicon.ico dist/favicon.ico
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs elm-webpack-starter
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls elm-webpack-starter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

loading a url like http://example.org/level1/level2 will result in a 404 error because the elm generated js file is loaded from http://example.org/level1/302394f9230.js

FYI, running Windows 10.

To get this to run on windows, I had to make the following changes to webpack.config.js:

  output: {
    path:       outputPath,
    // filename:   path.join( 'static/js/', outputFilename ),
    filename:   "bundle.js",
    publicPath: '/'
  },

Other than that, nice starting place!

(also looks like bootstrap icon fonts aren't being bundled in the production build for some reason...)

i am getting an issue with rimraf not being recognised on windows....
apologies if this is an error on my side::
::
C:\Users\aj\Documents\programminglanguages\elm\my-elm-project [master]> npm run reinstall

[email protected] reinstall C:\Users\aj\Documents\programminglanguages\elm\my-elm-project
rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install

'rimraf' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\aj\AppData\Roaming\npm\node_modules\npm\bin\npm-c
li.js" "run" "reinstall"
npm ERR! node v4.1.0
npm ERR! npm v4.0.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] reinstall: rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && e lm package install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] reinstall script 'rimraf node_modules && npm uninstall -g elm && npm i
-g elm && npm i && elm package install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the elm-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs elm-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls elm-webpack-starter
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\aj\Documents\programminglanguages\elm\my-elm-project\npm-debug.log

Hi Peter,

it would be really great to include elm-hot-loader into the starter kit. I've just spent about an hour tying all the things together. I could make a PR, but I'm not that profound in Elm so far and all the nuances of StartApp(example in elm-hot-loader repo) vs StartApp.Simple.

Thanks for your work!

Hi! I'm an owner of elm-commmunity, a group dedicated to maintaining Elm packages that have proved to be popular. I'm also the maintainer of elm-webpack-loader

Since you are no longer maintaining this, it would be great if you could transfer this over to us. We'll take good care of it.

I am converting an existing project from Elm 0.17 to Elm 0.18 and upgrading from
elm-webpack-starter Ver 0.6.2 to elm-webpack-starter Ver 0.8.2

I have managed to get my elm code to compile but my compiled script is not being served from the address that webpack is injecting into my index.html

When I run
npm run reinstall

I get

npm-debug.txt

[email protected] reinstall C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install

[email protected] C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of elm-webpack-loader@^4.1.1 but none was installed.
The system cannot find the path specified.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Jonathan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "reinstall"
npm ERR! node v4.4.5
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] reinstall: npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] reinstall script 'npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the elm-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs elm-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls elm-webpack-starter
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\npm-debug.log

Any ideas?

This is the output I am getting from running npm start is.

`
C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor>npm start

[email protected] start C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor
webpack-dev-server --hot --inline --content-base src/

WEBPACK GO!
Serving locally...
http://localhost:8080/
webpack result is served from /
content is served from C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\src
404s will fallback to /index.html
Running elm-make C:\Users\Jonathan\Documents\Freelance\SignWriterStudio\QuickSignEditorupgrade\QuickSignEditor\src\elm\QuickSignEditor.elm --yes --warn --debug --output C:\Users\Jonathan\AppData\Local\Temp\11708-19664-1akrkyx.js
Success! Compiled 0 modules.
Successfully generated C:\Users\Jonathan\AppData\Local\Temp\11708-19664-1akrkyx.js

Hash: 014fafe397b98d26aff0
Version: webpack 1.14.0
Time: 2653ms
Asset Size Chunks Chunk Names
static\js\main.js 1.36 MB 0 [emitted] main
index.html 1.45 kB [emitted]
chunk {0} static\js\main.js (main) 1.3 MB [rendered]
[0] multi main 64 bytes {0} [built]
[1] (webpack)-dev-server/client?http://localhost:8080 3.97 kB {0} [built]
[2] .//url/url.js 23.3 kB {0} [built]
[3] .//url//punycode/punycode.js 14.6 kB {0} [built]
[4] (webpack)/buildin/module.js 251 bytes {0} [built]
[5] .//url/util.js 314 bytes {0} [built]
[6] .//querystring/index.js 127 bytes {0} [built]
[7] .//querystring/decode.js 2.4 kB {0} [built]
[8] .//querystring/encode.js 2.09 kB {0} [built]
[9] .//strip-ansi/index.js 161 bytes {0} [built]
[10] .//ansi-regex/index.js 135 bytes {0} [built]
[11] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[12] .//sockjs-client/lib/entry.js 244 bytes {0} [built]
[13] .//sockjs-client/lib/transport-list.js 613 bytes {0} [built]
[14] .//sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
[15] .//process/browser.js 5.3 kB {0} [built]
[16] .//sockjs-client/lib/utils/event.js 2 kB {0} [built]
[17] .//sockjs-client/lib/utils/random.js 746 bytes {0} [built]
[18] .//sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
[19] .//sockjs-client/lib/utils/url.js 975 bytes {0} [built]
[20] .//url-parse/index.js 9.92 kB {0} [built]
[21] .//requires-port/index.js 753 bytes {0} [built]
[22] .//url-parse/lolcation.js 1.58 kB {0} [built]
[23] .//querystringify/index.js 1.3 kB {0} [built]
[24] .//debug/src/browser.js 4.71 kB {0} [built]
[25] .//debug/src/debug.js 4.31 kB {0} [built]
[26] .//ms/index.js 2.72 kB {0} [built]
[27] .//inherits/inherits_browser.js 672 bytes {0} [built]
[28] .//sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
[29] .//sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
[30] .//sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
[31] .//sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
[32] .//sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
[33] .//sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
[34] .//sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
[35] .//sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
[36] .//sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
[37] .//sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
[38] .//sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
[39] .//sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
[40] .//sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
[41] .//sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
[42] .//sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
[43] .//sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
[44] .//sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
[45] .//sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
[46] .//sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
[47] .//sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
[48] .//json3/lib/json3.js 43.3 kB {0} [built]
[49] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[50] .//sockjs-client/lib/version.js 26 bytes {0} [built]
[51] .//sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
[52] .//sockjs-client/lib/utils/object.js 532 bytes {0} [built]
[53] .//sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
[54] .//sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
[55] .//sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
[56] .//sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
[57] .//sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
[58] .//sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
[59] .//sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
[60] .//sockjs-client/lib/main.js 11.9 kB {0} [built]
[61] .//sockjs-client/lib/shims.js 18.2 kB {0} [built]
[62] .//sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
[63] .//sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
[64] .//sockjs-client/lib/utils/log.js 450 bytes {0} [built]
[65] .//sockjs-client/lib/event/event.js 477 bytes {0} [built]
[66] .//sockjs-client/lib/location.js 177 bytes {0} [built]
[67] .//sockjs-client/lib/event/close.js 295 bytes {0} [built]
[68] .//sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
[69] .//sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
[70] .//sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
[71] .//sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
[72] .//sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
[73] .//sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
[74] .//sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
[75] .//sockjs-client/lib/facade.js 723 bytes {0} [built]
[76] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
[77] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
[78] ./src/static/index.js 9.84 kB {0} [built]
[79] ./src/static/styles/main.scss 1.21 kB {0} [built]
[80] .//css-loader!.//postcss-loader!.//sass-loader!./src/static/styles/main.scss 162 bytes {0} [built]
[81] .//css-loader/lib/css-base.js 1.51 kB {0} [built]
[82] .//style-loader/addStyles.js 7.15 kB {0} [built]
[83] ./src/elm/QuickSignEditor.elm 1.05 MB {0} [built]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [rendered]
[0] .//html-webpack-plugin/lib/loader.js!./src/static/index.html 1.81 kB {0} [built]
[1] ./~/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
webpack: bundle is now VALID.`

Here is my webpack.config.js in case I messed something up.
`var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var entryPath = path.join(__dirname, 'src/static/index.js');
var outputPath = path.join(__dirname, 'dist');

console.log('WEBPACK GO!');

// determine build env
var TARGET_ENV = process.env.npm_lifecycle_event === 'build' ? 'production' : 'development';
var outputFilename = TARGET_ENV === 'production' ? '[name]-[hash].js' : '[name].js'

// common webpack config
var commonConfig = {

output: {
    path: outputPath,
    filename: path.join('static/js/', outputFilename),
    publicPath: '/'
},

resolve: {
    extensions: ['', '.js', '.elm']
},

module: {
    noParse: /\.elm$/,
    loaders: [{
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        loader: 'file-loader'
    }]
},

plugins: [
    new HtmlWebpackPlugin({
        template: 'src/static/index.html',
        inject: 'body',
        filename: 'index.html'
    })
],

postcss: [autoprefixer({ browsers: ['last 2 versions'] })],

}

// additional webpack settings for local env (when invoked by 'npm start')
if (TARGET_ENV === 'development') {
console.log('Serving locally...');

module.exports = merge(commonConfig, {

    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        entryPath
    ],

    devServer: {
        // serve index.html in place of 404 responses
        historyApiFallback: true,
    },

    module: {
        loaders: [{
                test: /\.elm$/,
                exclude: [/elm-stuff/, /node_modules/],
                loader: 'elm-hot!elm-webpack?verbose=true&warn=true&debug=true'
            },
            {
                test: /\.(css|scss)$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    }

});

}

// additional webpack settings for prod env (when invoked via 'npm run build')
if (TARGET_ENV === 'production') {
console.log('Building for prod...');

module.exports = merge(commonConfig, {

    entry: entryPath,

    module: {
        loaders: [{
                test: /\.elm$/,
                exclude: [/elm-stuff/, /node_modules/],
                loader: 'elm-webpack'
            },
            {
                test: /\.(css|scss)$/,
                loader: ExtractTextPlugin.extract('style-loader', [
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ])
            }
        ]
    },

    plugins: [
        new CopyWebpackPlugin([{
                from: 'src/static/img/',
                to: 'static/img/'
            },
            {
                from: 'src/favicon.ico'
            },
        ]),

        new webpack.optimize.OccurenceOrderPlugin(),

        // extract CSS into a separate file
        new ExtractTextPlugin('static/css/[name]-[hash].css', { allChunks: true }),

        // minify & mangle JS/CSS
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compressor: { warnings: false }
            // mangle:  true
        })
    ]

});

}`

I borrowed the Webpack config heavily from your work on this project when building a Yeoman generator for Elm (danneu/generator-elm).

elm-webpack-starter's src/ folder contains not just Elm source, but also all of the static entry-points and static files, like index.html, index.js, css, and images. elm-webpack-loader does the same in its example project.

In my Yeoman generator, I wanted the src/ folder to contain only Elm source files. Instead, I created a new top-level folder static/ and moved index.html/index.js/css/images there. I changed webpack-dev-server's --content-base from src/ to static/.

However, I noticed that webpack-dev-server only picks up changes to the src/Main.elm file which is required from my static/index.js entry-point (source).

I'm guessing that the rest of my files in src/ aren't being watched because --content-base static/ only watches that folder tree even though static/index.js requires src/Main.elm which imports other Elm files from the src/ folder?

Is that why you mixed Elm and non-Elm source in src/ to begin with, so --content-base will pick up all changes?

I think the src/ and static/ separation would be a good improvement for this project, but I couldn't figure out the webpack config incantation to make it work.

Hello,

With a fresh install of elm-webpack-starter, I'm getting the following errors when I run npm start:

 [78] ./src/static/index.js 442 bytes {0} [built] [1 error]

And

ERROR in ./src/elm/Main.elm
Module build failed: Error: Compiler process exited with error Compilation failed
elm-make: elm-stuff/build-artifacts: createDirectory: permission denied (Permission denied)

    at ChildProcess.<anonymous> (/Users/rvanderspuy/newspaper_interviw_18/node_modules/node-elm-compiler/index.js:257:27)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)
 @ ./src/static/index.js 7:10-34

I'm on OSX (El Capitan) running node v.6.9.2 and npm v.3.10.9

Can anyone suggest what the problem might be?

Hi,

Just installed by the instructions and got: Uncaught SyntaxError: Unexpected token import
in the console.

Thanks,
Billy

I'm new to language, don't beat me hard

Not sure what is causing this. Thoughts? I updated all of the libs and Main.elm file so it compiles with elm-make. It also compiles fine with Webpack but I get this in my browser console.
Uncaught ReferenceError: Elm is not defined

updated package.json:

elm-package.json: