npm install
elm-package install
npm start
Created
February 26, 2018 07:14
-
-
Save shamansir/464366c5ae37725e83014b1762e3baf7 to your computer and use it in GitHub Desktop.
Elm Webpack Project Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| node_modules | |
| elm-stuff |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.0.0", | |
| "summary": "helpful summary of your project, less than 80 characters", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "5.1.1 <= v < 6.0.0", | |
| "elm-lang/html": "2.0.0 <= v < 3.0.0", | |
| "elm-lang/svg": "2.0.0 <= v < 3.0.0" | |
| }, | |
| "elm-version": "0.18.0 <= v < 0.19.0" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--index.html--> | |
| <html> | |
| <head> | |
| <title>ELM Counter</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <div id="elm-target"></div> | |
| <script async src="app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // index.js | |
| 'use strict'; | |
| // include main style | |
| require('./index.css'); | |
| // initialize Elm Application | |
| const Elm = require('./src/Main.elm'); | |
| const mountNode = document.getElementById('elm-target'); | |
| // The third value on embed are the initial values for incomming ports into Elm | |
| const app = Elm.Main.embed(mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Main exposing (main) | |
| import Html | |
| type Msg | |
| = Add Int | |
| type alias Model = Int | |
| init : ( Model, Cmd Msg ) | |
| init = ( 0, Cmd.none ) | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| Sub.none | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Add n -> ( model + n, Cmd.none ) | |
| view : Model -> Html.Html Msg | |
| view model = | |
| Html.span [] [ Html.text ("Sum is " ++ toString model) ] | |
| main : Program Never Model Msg | |
| main = | |
| Html.program | |
| { init = init | |
| , view = view | |
| , subscriptions = subscriptions | |
| , update = update | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "my-package", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "dependencies": { | |
| "webpack": "^3.11.0" | |
| }, | |
| "devDependencies": { | |
| "webpack-dev-server": "^2.11.1", | |
| "css-loader": "^0.28.10", | |
| "elm-webpack-loader": "^4.4.0", | |
| "style-loader": "^0.20.2" | |
| }, | |
| "scripts": { | |
| "start": "./node_modules/.bin/webpack-dev-server", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "repository": { | |
| "type": "git", | |
| "url": "git+https://github.com/user/package.git" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "bugs": { | |
| "url": "https://github.com/user/package/issues" | |
| }, | |
| "homepage": "https://github.com/user/package#readme" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // webpack.config.js | |
| module.exports = { | |
| entry: { | |
| app: [ | |
| './index.js' | |
| ] | |
| }, | |
| output: { | |
| filename: '[name].js', | |
| }, | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.elm$/, | |
| exclude: [/elm-stuff/, /node_modules/], | |
| use : { | |
| loader: 'elm-webpack-loader', | |
| options: { | |
| verbose: true, warn: true | |
| } | |
| } | |
| }, | |
| { | |
| test: /\.css$/, | |
| use: [ 'style-loader', 'css-loader' ] | |
| } | |
| ], | |
| noParse: /\.elm$/, | |
| }, | |
| devServer: { | |
| inline: true, | |
| stats: { colors: true }, | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment