jackfranklin · gabrielperales · Mar 15, 2017 · Mar 15, 2017 · Mar 16, 2017 · Mar 16, 2017
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 elm-stuff/
 build/
 node_modules/
-dist/
diff --git a/Gulpfile.js b/Gulpfile.js
diff --git a/README.md b/README.md
@@ -4,13 +4,22 @@ A blog about Elm that's written in Elm.
 
 ## Running locally
 
+Add your Github token to src/GithubToken.elm file (https://github.com/settings/tokens)
+
 ```
 npm install
 elm package install
-(in one tab) gulp start
-(in aother) gulp serve
-add your Github token to src/GithubToken.elm file (https://github.com/settings/tokens)
-open http://localhost:8080
+npm start
 ```
 
+Open `http://localhost:8081`
+
+## Build bundle
+
+```
+npm run build
+```
+
+## Contributing
+
 Contributions welcome!
diff --git a/example.env b/example.env
@@ -0,0 +1 @@
+GITHUB_TOKEN='example-token'
diff --git a/index.html b/index.html
@@ -6,19 +6,16 @@
     <link rel="stylesheet" type="text/css" href="/style.css" />
   </head>
   <body>
-    <script src="/vendor/highlight.pack.js"></script>
-    <script type="text/javascript" src="build/App.js"></script>
-    <script type="text/javascript" src="js/ports.js"></script>
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    <script type="text/javascript" src="js/App.js"></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-    ga('create', 'UA-86493897-1', 'auto');
-    ga('send', 'pageview');
+      ga('create', 'UA-86493897-1', 'auto');
+      ga('send', 'pageview');
 
-  </script>
+    </script>
   </body>
 </html>
-
diff --git a/package.json b/package.json
@@ -3,27 +3,19 @@
   "private": true,
   "version": "0.1.0",
   "description": "",
-  "scripts": {},
+  "scripts": {
+    "build": "webpack -p",
+    "start": "webpack-dev-server"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {},
   "devDependencies": {
-    "del": "2.2.2",
-    "gulp": "3.9.1",
-    "gulp-bump": "2.4.0",
-    "gulp-elm": "0.6.1",
-    "gulp-filter": "4.0.0",
-    "gulp-load-plugins": "1.2.4",
-    "gulp-notify": "2.2.0",
-    "gulp-plumber": "1.1.0",
-    "gulp-rename": "1.2.2",
-    "gulp-shell": "0.5.2",
-    "gulp-surge": "0.1.0",
-    "gulp-tag-version": "1.3.0",
-    "gulp-uglify": "2.0.0",
-    "gulp-util": "3.0.7",
-    "gulp-watch": "4.3.6",
-    "live-server": "github:jackfranklin/live-server#ignore-assets-with-spa-option"
+    "copy-webpack-plugin": "^4.0.1",
+    "dotenv": "^4.0.0",
+    "elm": "^0.18.0",
+    "elm-webpack-loader": "^4.2.0",
+    "webpack": "^2.2.1"
   }
 }
diff --git a/src/App.elm b/src/App.elm
@@ -1,7 +1,7 @@
 module MyApp exposing (..)
 
 import Navigation
-import Types exposing (Model, Msg(..))
+import Types exposing (Flags, Model, Msg(..))
 import View
 import Pages
 import OnUrlChange
@@ -17,16 +17,19 @@ initialModel =
     }
 
 
-init : Navigation.Location -> ( Model, Cmd Msg )
-init location =
+init : Flags -> Navigation.Location -> ( Model, Cmd Msg )
+init flags location =
     let
+        { github_token } =
+            flags
+
         ( modelWithFirstUrl, initialCmd ) =
             update (UrlChange location) initialModel
     in
         ( modelWithFirstUrl
         , Cmd.batch
             [ initialCmd
-            , GithubApi.fetchContributors
+            , GithubApi.fetchContributors github_token
             ]
         )
 
@@ -57,9 +60,9 @@ update msg model =
             { model | searchPost = Just title } ! []
 
 
-main : Program Never Model Msg
+main : Program Flags Model Msg
 main =
-    Navigation.program UrlChange
+    Navigation.programWithFlags UrlChange
         { init = init
         , view = View.render
         , update = update

diff --git a/src/GithubApi.elm b/src/GithubApi.elm
@@ -2,7 +2,6 @@ module GithubApi exposing (fetchContributors)
 
 import Http
 import RemoteData
-import GithubToken
 import Json.Decode as Decode exposing (Decoder, field)
 import Types exposing (Msg(..), GithubContributor)
 
@@ -12,15 +11,15 @@ contributorsUrl =
     "https://api.github.com/repos/jackfranklin/elmplayground/stats/contributors"
 
 
-githubRequest : Http.Request (List GithubContributor)
-githubRequest =
+githubRequest : String -> Http.Request (List GithubContributor)
+githubRequest token =
     let
         headers =
-            Maybe.map (\tok -> [ Http.header "Authorization" tok ]) GithubToken.token
+            [ Http.header "Authorization" token ]
     in
         Http.request
             { method = "GET"
-            , headers = Maybe.withDefault [] headers
+            , headers = headers
             , url = contributorsUrl
             , body = Http.emptyBody
             , expect = Http.expectJson contributorsDecoder
@@ -43,9 +42,9 @@ contributorsDecoder =
     Decode.list contributorDecoder
 
 
-fetchContributors : Cmd Msg
-fetchContributors =
-    githubRequest
+fetchContributors : String -> Cmd Msg
+fetchContributors token =
+    githubRequest token
         |> Http.toTask
         |> RemoteData.asCmd
         |> Cmd.map FetchedContributors
diff --git a/src/GithubToken.elm b/src/GithubToken.elm
diff --git a/src/Types.elm b/src/Types.elm
@@ -5,6 +5,11 @@ import RemoteData exposing (WebData)
 import Navigation
 
 
+type alias Flags =
+    { github_token : String
+    }
+
+
 type alias Model =
     { currentContent : Content
     , contributors : WebData (List GithubContributor)

diff --git a/js/ports.js → src/js/app.js b/js/ports.js → src/js/app.js
@@ -1,4 +1,7 @@
-var app = Elm.MyApp.fullscreen();
+var Elm = require('../App.elm');
+
+var app = Elm.MyApp.fullscreen({ 'github_token': process.env.GITHUB_TOKEN });
+
 app.ports.newTitle.subscribe(function(value) {
   if (value) {
     document.title = value + ' | The Elm Playground'

diff --git a/src/js/npm-debug.log b/src/js/npm-debug.log
@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/Users/gabriel/.nvm/versions/node/v7.1.0/bin/node',
+1 verbose cli   '/Users/gabriel/.nvm/versions/node/v7.1.0/bin/npm',
+1 verbose cli   'config',
+1 verbose cli   'get',
+1 verbose cli   'prefix' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose exit [ 0, true ]
+5 verbose stack Error: write EPIPE
+5 verbose stack     at exports._errnoException (util.js:1022:11)
+5 verbose stack     at WriteWrap.afterWrite [as oncomplete] (net.js:804:14)
+6 verbose cwd /Users/gabriel/workspace/elm/elmplayground/src/js
+7 error Darwin 15.0.0
+8 error argv "/Users/gabriel/.nvm/versions/node/v7.1.0/bin/node" "/Users/gabriel/.nvm/versions/node/v7.1.0/bin/npm" "config" "get" "prefix"
+9 error node v7.1.0
+10 error npm  v3.10.9
+11 error code EPIPE
+12 error errno EPIPE
+13 error syscall write
+14 error write EPIPE
+15 error If you need help, you may report this error at:
+15 error     <https://github.com/npm/npm/issues>
+16 verbose exit [ 1, true ]
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+require('dotenv').config();
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: [
+    './src/App.elm',
+    './src/js/app.js',
+  ],
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'js/App.js',
+  },
+  devServer: {
+    inline: true,
+    historyApiFallback: true,
+  },
+  module: {
+    rules: [{
+      test: /\.elm$/,
+      exclude: [/elm-stuff/, /node_modules/],
+      loader: 'elm-webpack-loader' +
+        (process.env.NODE_ENV !== 'production' ? '?+debug' : ''),
+    }],
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      'GITHUB_TOKEN': ''
+    }),
+    new webpack.ProvidePlugin({
+      hljs: path.join(__dirname, './vendor/highlight.pack.js'),
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: 'style.css',
+      },
+      {
+        from: 'img/*',
+      },
+      {
+        from: 'vendor/**/*.css',
+      },
+      {
+        from: 'content/**/*',
+      },
+      {
+        from: 'index.html',
+      },
+    ]),
+  ],
+};