infinitered · danielberkompas · Apr 25, 2016 · Apr 25, 2016 · Apr 25, 2016 · Apr 25, 2016
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 [![Build Status](https://semaphoreci.com/api/v1/projects/9501757c-f8e0-4a06-9b90-04f22ea5cd74/662754/badge.svg)](https://semaphoreci.com/ir/phoenix_base)
 [![Deps Status](https://beta.hexfaktor.org/badge/all/github/infinitered/phoenix_base.svg)](https://beta.hexfaktor.org/github/infinitered/phoenix_base)
+[![Node Dependency Status](https://david-dm.org/infinitered/phoenix_base.svg)](https://david-dm.org/infinitered/phoenix_base)
 
 PhoenixBase is maintained by [Infinite Red](http://infinite.red), a web and mobile development company based in Portland, OR and San Francisco, CA.
 

diff --git a/brunch-config.js b/brunch-config.js
diff --git a/config/config.exs b/config/config.exs
@@ -14,6 +14,10 @@ config :phoenix_base, PhoenixBase.Endpoint,
   pubsub: [name: PhoenixBase.PubSub,
            adapter: Phoenix.PubSub.PG2]
 
+# Configure Phoenix to use Slime instead of EEX
+config :phoenix, :template_engines,
+  slim: PhoenixSlime.Engine
+
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",

diff --git a/config/dev.exs b/config/dev.exs
@@ -12,7 +12,10 @@ config :phoenix_base, PhoenixBase.Endpoint,
   code_reloader: true,
   cache_static_lookup: false,
   check_origin: false,
-  watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin"]]
+  watchers: [
+    node: ["node_modules/webpack/bin/webpack.js",
+           "--watch-stdin", "--color", "--progress"]
+  ]
 
 # Watch static and templates for browser reloading.
 config :phoenix_base, PhoenixBase.Endpoint,
@@ -21,7 +24,7 @@ config :phoenix_base, PhoenixBase.Endpoint,
       ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
       ~r{priv/gettext/.*(po)$},
       ~r{web/views/.*(ex)$},
-      ~r{web/templates/.*(eex)$}
+      ~r{web/templates/.*(eex|slim)$}
     ]
   ]
 

diff --git a/mix.exs b/mix.exs
@@ -32,6 +32,7 @@ defmodule PhoenixBase.Mixfile do
   defp deps do
     [{:phoenix, "~> 1.1.2"},
      {:phoenix_ecto, "~> 2.0"},
+     {:phoenix_slime, "~> 0.5"},
      {:postgrex, ">= 0.11.0"},
      {:phoenix_html, "~> 2.3"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},

diff --git a/mix.lock b/mix.lock
@@ -13,8 +13,10 @@
   "phoenix_ecto": {:hex, :phoenix_ecto, "2.0.1"},
   "phoenix_html": {:hex, :phoenix_html, "2.5.1"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.0.3"},
+  "phoenix_slime": {:hex, :phoenix_slime, "0.5.1"},
   "plug": {:hex, :plug, "1.1.3"},
   "poison": {:hex, :poison, "1.5.2"},
   "poolboy": {:hex, :poolboy, "1.5.1"},
   "postgrex": {:hex, :postgrex, "0.11.1"},
-  "ranch": {:hex, :ranch, "1.2.1"}}
+  "ranch": {:hex, :ranch, "1.2.1"},
+  "slime": {:hex, :slime, "0.11.0"}}
diff --git a/package.json b/package.json
@@ -1,19 +1,28 @@
 {
   "repository": {},
   "dependencies": {
-    "babel-brunch": "^6.0.0",
-    "brunch": "^2.1.1",
-    "clean-css-brunch": ">= 1.0 < 1.8",
-    "css-brunch": ">= 1.0 < 1.8",
-    "javascript-brunch": ">= 1.0 < 1.8",
-    "uglify-js-brunch": ">= 1.0 < 1.8",
     "phoenix": "file:deps/phoenix",
     "phoenix_html": "file:deps/phoenix_html"
   },
   "devDependencies": {
-    "standard": "^5.4.1"
+    "bourbon": "^4.2.7",
+    "bourbon-neat": "^1.7.4",
+    "babel-core": "^6.1.2",
+    "babel-loader": "^6.0.1",
+    "babel-plugin-transform-object-rest-spread": "^6.3.13",
+    "babel-preset-es2015": "^6.1.2",
+    "copy-webpack-plugin": "^0.2.0",
+    "css-loader": "^0.22.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "import-glob-loader": "^1.1.0",
+    "node-sass": "^3.4.1",
+    "sass-loader": "^3.1.1",
+    "standard": "^5.3.1",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.13.0"
   },
   "scripts": {
-    "test": "standard && ./node_modules/brunch/bin/brunch build"
+    "test": "standard && ./node_modules/webpack/bin/webpack.js",
+    "compile": "webpack -p"
   }
 }
diff --git a/web/static/css/app.css b/web/static/css/app.css
diff --git a/web/static/css/app.sass b/web/static/css/app.sass
@@ -0,0 +1,8 @@
+// This imports all the bourbon and neat mixins for use
+// See here for more details:
+// http://forum.vuejs.org/topic/1367/integrating-bourbon-and-neat-with-vuejs-templates-webpack/2
+
+@import "~bourbon/app/assets/stylesheets/bourbon"
+@import "~bourbon-neat/app/assets/stylesheets/neat"
+
+// Put your styles here!
diff --git a/web/static/js/app.js b/web/static/js/app.js
@@ -1,21 +1,5 @@
-// Brunch automatically concatenates all files in your
-// watched paths. Those paths can be configured at
-// config.paths.watched in 'brunch-config.js'.
-//
-// However, those files will only be executed if
-// explicitly imported. The only exception are files
-// in vendor, which are never wrapped in imports and
-// therefore are always executed.
+// Required to make Webpack compile css assets properly
+require('../css/app.sass')
 
-// Import dependencies
-//
-// If you no longer want to use a dependency, remember
-// to also remove its path from 'config.paths.watched'.
+import 'phoenix'
 import 'phoenix_html'
-
-// Import local files
-//
-// Local files can be imported directly using relative
-// paths './socket' or full ones 'web/static/js/socket'.
-
-// import socket from './socket'
diff --git a/web/templates/layout/app.html.eex b/web/templates/layout/app.html.eex
diff --git a/web/templates/layout/app.html.slim b/web/templates/layout/app.html.slim
@@ -0,0 +1,27 @@
+doctype html
+html lang="en"
+  head
+    meta charset="utf-8"
+    meta content="IE=edge" http-equiv="X-UA-Compatible"
+    meta content="width=device-width, initial-scale=1" name="viewport"
+    meta content="" name="description"
+    meta content="" name="author"
+    title Hello ApplicationName!
+    link rel="stylesheet" href="#{static_path(@conn, "/css/app.css")}"
+
+  body
+    .container
+      header.header
+        nav role="navigation"
+          ul.nav.nav-pills.pull-right
+            li
+              a href="http://www.phoenixframework.org/docs" Get Started
+        span.logo
+
+      p.alert.alert-info role="alert"= get_flash(@conn, :info)
+      p.alert.alert-danger role="alert"= get_flash(@conn, :error)
+
+      main role="main"
+        = render @view_module, @view_template, assigns
+
+    script src="#{static_path(@conn, "/js/app.js")}"
diff --git a/web/templates/page/index.html.eex b/web/templates/page/index.html.eex
diff --git a/web/templates/page/index.html.slim b/web/templates/page/index.html.slim
@@ -0,0 +1,23 @@
+.jumbotron
+  h2= gettext "Welcome to %{name}", name: "Phoenix!"
+  p.lead A productive web framework that <br /> does not compromise speed and maintainability.
+
+.row.marketing
+  .col-lg-6
+    h4 Resources
+    ul
+      li
+        a href="http://phoenixframework.org/docs/overview" Guides
+      li
+        a href="http://hexdocs.pm/phoenix" Docs
+      li
+        a href="https://github.com/phoenixframework/phoenix" Source
+
+  .col-lg-6
+    h4 Help
+    li
+      a href="http://groups.google.com/group/phoenix-talk" Mailing list
+    li
+      a href="http://webchat.freenode.net/?channels=elixir-lang" #elixir-lang on freenode IRC
+    li
+      a href="https://twitter.com/elixirphoenix" @elixirphoenix
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+var webpack = require('webpack')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+
+var env = process.env.MIX_ENV || 'dev'
+var isProduction = (env === 'prod')
+
+var plugins = [
+  new ExtractTextPlugin('css/app.css', { allChunks: true }),
+  new CopyWebpackPlugin([{ from: './web/static/assets' }])
+]
+
+if (isProduction) {
+  plugins.push(new webpack.optimize.UglifyJsPlugin({minimize: true}))
+}
+
+// Bourbon + Neat
+// See http://forum.vuejs.org/topic/1367/integrating-bourbon-and-neat-with-vuejs-templates-webpack/2
+var neat = require('bourbon-neat').includePaths
+var bourbon = require('bourbon').includePaths
+
+module.exports = {
+  entry: './web/static/js/app.js',
+
+  output: {
+    path: './priv/static/',
+    filename: 'js/app.js'
+  },
+
+  devtool: 'source-map',
+
+  module: {
+    loaders: [{
+      test: /\.js?$/,
+      exclude: /(node_modules|bower_components)/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015'],
+        plugins: ['transform-object-rest-spread']
+      }
+    }, {
+      test: /\.(sass|scss)$/,
+      loader: ExtractTextPlugin.extract('css?sourceMap!sass?sourceMap!import-glob')
+    }]
+  },
+
+  sassLoader: {
+    includePaths: [bourbon, neat]
+  },
+
+  plugins: plugins
+}