elm-community / elm-webpack-starter Goto Github PK
View Code? Open in Web Editor NEWBoilerplate for developing Elm apps on Webpack
Home Page: http://elm-community.org/elm-webpack-starter/
Boilerplate for developing Elm apps on Webpack
Home Page: http://elm-community.org/elm-webpack-starter/
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,
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.
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.
It would be nice to see the environment setup for unit & fuzz tests in the boilerplate too.
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.
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
The official way to use Autoprefixer is by postcss-loader
:
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?
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...)
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 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!
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?
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!
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?
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.
Is there any particular reason for why dist is commited to the repo?
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?
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
During development (npm start) the favicon is not available at ./favicon.ico
but ./static/favicon.ico
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.
elm-webpack-starter/.gitignore
Line 5 in 039c6da
The flow should be:
yarn install
.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.
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.
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 ]
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'
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.
I'm new to language, don't beat me hard
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,
Just installed by the instructions and got: Uncaught SyntaxError: Unexpected token import
in the console.
Thanks,
Billy
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 😄
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.
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, 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 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
<script type="text/javascript" src="/static\js\main.js"></script> I am getting a a 404 for http://localhost:8080/static/js/main.jsWhen I run
npm run reinstall
I get
[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]/url/
[3] .//punycode/punycode.js 14.6 kB {0} [built]/url/util.js 314 bytes {0} [built]
[4] (webpack)/buildin/module.js 251 bytes {0} [built]
[5] ./
[6] .//querystring/index.js 127 bytes {0} [built]/querystring/decode.js 2.4 kB {0} [built]
[7] ./
[8] .//querystring/encode.js 2.09 kB {0} [built]/strip-ansi/index.js 161 bytes {0} [built]
[9] ./
[10] .//ansi-regex/index.js 135 bytes {0} [built]/sockjs-client/lib/entry.js 244 bytes {0} [built]
[11] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[12] ./
[13] .//sockjs-client/lib/transport-list.js 613 bytes {0} [built]/sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
[14] ./
[15] .//process/browser.js 5.3 kB {0} [built]/sockjs-client/lib/utils/event.js 2 kB {0} [built]
[16] ./
[17] .//sockjs-client/lib/utils/random.js 746 bytes {0} [built]/sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
[18] ./
[19] .//sockjs-client/lib/utils/url.js 975 bytes {0} [built]/url-parse/index.js 9.92 kB {0} [built]
[20] ./
[21] .//requires-port/index.js 753 bytes {0} [built]/url-parse/lolcation.js 1.58 kB {0} [built]
[22] ./
[23] .//querystringify/index.js 1.3 kB {0} [built]/debug/src/browser.js 4.71 kB {0} [built]
[24] ./
[25] .//debug/src/debug.js 4.31 kB {0} [built]/ms/index.js 2.72 kB {0} [built]
[26] ./
[27] .//inherits/inherits_browser.js 672 bytes {0} [built]/sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
[28] ./
[29] .//sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]/sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
[30] ./
[31] .//sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]/sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
[32] ./
[33] .//sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]/sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
[34] ./
[35] .//sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]/sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
[36] ./
[37] .//sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]/sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
[38] ./
[39] .//sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]/sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
[40] ./
[41] .//sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]/sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
[42] ./
[43] .//sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]/sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
[44] ./
[45] .//sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
[46] ./
[47] .//sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]/json3/lib/json3.js 43.3 kB {0} [built]
[48] ./
[49] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
[50] .//sockjs-client/lib/version.js 26 bytes {0} [built]/sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
[51] ./
[52] .//sockjs-client/lib/utils/object.js 532 bytes {0} [built]/sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
[53] ./
[54] .//sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]/sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
[55] ./
[56] .//sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]/sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
[57] ./
[58] .//sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]/sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
[59] ./
[60] .//sockjs-client/lib/main.js 11.9 kB {0} [built]/sockjs-client/lib/shims.js 18.2 kB {0} [built]
[61] ./
[62] .//sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]/sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
[63] ./
[64] .//sockjs-client/lib/utils/log.js 450 bytes {0} [built]/sockjs-client/lib/event/event.js 477 bytes {0} [built]
[65] ./
[66] .//sockjs-client/lib/location.js 177 bytes {0} [built]/sockjs-client/lib/event/close.js 295 bytes {0} [built]
[67] ./
[68] .//sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]/sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
[69] ./
[70] .//sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]/sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
[71] ./
[72] .//sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]/sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
[73] ./
[74] .//sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]/sockjs-client/lib/facade.js 723 bytes {0} [built]
[75] ./
[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]/css-loader/lib/css-base.js 1.51 kB {0} [built]
[81] ./
[82] .//style-loader/addStyles.js 7.15 kB {0} [built]/html-webpack-plugin/lib/loader.js!./src/static/index.html 1.81 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] ./
[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
})
]
});
}`
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.