Updated for Phoenix 1.2.1

.gitignore

@@ -1,9 +1,10 @@
-# Mix artifacts
+# App artifacts
 /_build
+/db
 /deps
 /*.ez
 
-# Generate on crash by the VM
+# Generated on crash by the VM
 erl_crash.dump
 
 # Static artifacts

README.md

@@ -1,18 +1,20 @@
-# Use Webpack for assets with Phoenix
+# WebpackExample
 
-Example repo from [Using Webpack with Phoenix and Elixir](http://matthewlehner.net/using-webpack-with-phoenix-and-elixir/)
+To start your Phoenix app:
 
-The important files are:
+  * Install dependencies with `mix deps.get`
+  * Create and migrate your database with `mix ecto.create && mix ecto.migrate`
+  * Install Node.js dependencies with `npm install`
+  * Start Phoenix endpoint with `mix phoenix.server`
 
-- [`webpack.config.js`](https://github.com/matthewlehner/phoenix-webpack-example/blob/master/webpack.config.js)
-- [`package.json`](https://github.com/matthewlehner/phoenix-webpack-example/blob/master/package.json)
-- [`config/dev.exs`](https://github.com/matthewlehner/phoenix-webpack-example/blob/master/config/dev.exs#L14-L15)
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 
-### Getting Started
+Ready to run in production? Please [check our deployment guides](http://www.phoenixframework.org/docs/deployment).
 
-Clone this repo then:
+## Learn more
 
-1. Install dependencies with `mix deps.get && npm i`
-2. Start Phoenix endpoint with `mix phoenix.server`
-
-Now you can visit `localhost:4000` from your browser.
+  * Official website: http://www.phoenixframework.org/
+  * Guides: http://phoenixframework.org/docs/overview
+  * Docs: https://hexdocs.pm/phoenix
+  * Mailing list: http://groups.google.com/group/phoenix-talk
+  * Source: https://github.com/phoenixframework/phoenix

config/config.exs

@@ -5,12 +5,15 @@
 # is restricted to this project.
 use Mix.Config
 
+# General application configuration
+config :webpack_example,
+  ecto_repos: [WebpackExample.Repo]
+
 # Configures the endpoint
 config :webpack_example, WebpackExample.Endpoint,
   url: [host: "localhost"],
-  root: Path.dirname(__DIR__),
-  secret_key_base: "x4KbWPtieC/U+FHsgnbFd+nmElLV8tpAg5615wnHD9MMSjKYS1mNDdETi3lksMUX",
-  render_errors: [accepts: ["html"]],
+  secret_key_base: "O3MLJ1Bu2p3iEKTRu9DsKQj7ahKyfBfvTxQfW5HehdWq/NtN3ffL1LsAStFlg8YQ",
+  render_errors: [view: WebpackExample.ErrorView, accepts: ~w(html json)],
   pubsub: [name: WebpackExample.PubSub,
            adapter: Phoenix.PubSub.PG2]
 

config/dev.exs

@@ -10,16 +10,15 @@ config :webpack_example, WebpackExample.Endpoint,
   http: [port: 4000],
   debug_errors: true,
   code_reloader: true,
-  cache_static_lookup: false,
-  watchers: [
-    npm: ["start", cd: Path.expand("../", __DIR__)]
-  ]
+  check_origin: false,
+  watchers: [npm: ["run", "watch", cd: Path.expand("../", __DIR__)]]
 
 # Watch static and templates for browser reloading.
 config :webpack_example, WebpackExample.Endpoint,
   live_reload: [
     patterns: [
-      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
+      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
+      ~r{priv/gettext/.*(po)$},
       ~r{web/views/.*(ex)$},
       ~r{web/templates/.*(eex)$}
     ]
@@ -28,10 +27,15 @@ config :webpack_example, WebpackExample.Endpoint,
 # Do not include metadata nor timestamps in development logs
 config :logger, :console, format: "[$level] $message\n"
 
+# Set a higher stacktrace during development. Avoid configuring such
+# in production as building large stacktraces may be expensive.
+config :phoenix, :stacktrace_depth, 20
+
 # Configure your database
 config :webpack_example, WebpackExample.Repo,
   adapter: Ecto.Adapters.Postgres,
   username: "postgres",
   password: "postgres",
   database: "webpack_example_dev",
-  pool_size: 10 # The amount of database connections in the pool
+  hostname: "localhost",
+  pool_size: 10

config/prod.exs

@@ -16,23 +16,32 @@ config :webpack_example, WebpackExample.Endpoint,
   url: [host: "example.com", port: 80],
   cache_static_manifest: "priv/static/manifest.json"
 
+# Do not print debug messages in production
+config :logger, level: :info
+
 # ## SSL Support
 #
 # To get SSL working, you will need to add the `https` key
-# to the previous section, and set your `:url` port to 443
+# to the previous section and set your `:url` port to 443:
 #
-#  config :webpack_example, WebpackExample.Endpoint,
-#    ...
-#    url: [host: "example.com", port: 443],
-#    https: [port: 443,
-#            keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
-#            certfile: System.get_env("SOME_APP_SSL_CERT_PATH")]
+#     config :webpack_example, WebpackExample.Endpoint,
+#       ...
+#       url: [host: "example.com", port: 443],
+#       https: [port: 443,
+#               keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
+#               certfile: System.get_env("SOME_APP_SSL_CERT_PATH")]
 #
-# Where those two env variables point to a file on
-# disk for the key and cert.
-
-# Do not print debug messages in production
-config :logger, level: :info
+# Where those two env variables return an absolute path to
+# the key and cert in disk or a relative path inside priv,
+# for example "priv/ssl/server.key".
+#
+# We also recommend setting `force_ssl`, ensuring no data is
+# ever sent via http, always redirecting to https:
+#
+#     config :webpack_example, WebpackExample.Endpoint,
+#       force_ssl: [hsts: true]
+#
+# Check `Plug.SSL` for all available options in `force_ssl`.
 
 # ## Using releases
 #

config/test.exs

@@ -15,5 +15,5 @@ config :webpack_example, WebpackExample.Repo,
   username: "postgres",
   password: "postgres",
   database: "webpack_example_test",
-  pool: Ecto.Adapters.SQL.Sandbox, # Use a sandbox for transactional testing
-  pool_size: 1
+  hostname: "localhost",
+  pool: Ecto.Adapters.SQL.Sandbox

lib/webpack_example.ex

@@ -4,14 +4,15 @@ defmodule WebpackExample do
   # See http://elixir-lang.org/docs/stable/elixir/Application.html
   # for more information on OTP Applications
   def start(_type, _args) do
-    import Supervisor.Spec, warn: false
+    import Supervisor.Spec
 
+    # Define workers and child supervisors to be supervised
     children = [
+      # Start the Ecto repository
+      supervisor(WebpackExample.Repo, []),
       # Start the endpoint when the application starts
       supervisor(WebpackExample.Endpoint, []),
-      # Start the Ecto repository
-      worker(WebpackExample.Repo, []),
-      # Here you could define other workers and supervisors as children
+      # Start your own worker by calling: WebpackExample.Worker.start_link(arg1, arg2, arg3)
       # worker(WebpackExample.Worker, [arg1, arg2, arg3]),
     ]
 

lib/webpack_example/endpoint.ex

@@ -1,13 +1,15 @@
 defmodule WebpackExample.Endpoint do
   use Phoenix.Endpoint, otp_app: :webpack_example
 
+  socket "/socket", WebpackExample.UserSocket
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phoenix.digest
   # when deploying your static files in production.
   plug Plug.Static,
     at: "/", from: :webpack_example, gzip: false,
-    only: ~w(css images js favicon.ico robots.txt)
+    only: ~w(css fonts images js favicon.ico robots.txt)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.
@@ -28,10 +30,13 @@ defmodule WebpackExample.Endpoint do
   plug Plug.MethodOverride
   plug Plug.Head
 
+  # The session will be stored in the cookie and signed,
+  # this means its contents can be read but not tampered with.
+  # Set :encryption_salt if you would also like to encrypt it.
   plug Plug.Session,
     store: :cookie,
     key: "_webpack_example_key",
-    signing_salt: "N+1+UasQ"
+    signing_salt: "D76dW6Sl"
 
   plug WebpackExample.Router
 end

mix.exs

@@ -4,33 +4,33 @@ defmodule WebpackExample.Mixfile do
   def project do
     [app: :webpack_example,
      version: "0.0.1",
-     elixir: "~> 1.0",
+     elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
-     compilers: [:phoenix] ++ Mix.compilers,
+     compilers: [:phoenix, :gettext] ++ Mix.compilers,
      build_embedded: Mix.env == :prod,
      start_permanent: Mix.env == :prod,
      aliases: aliases(),
      deps: deps()]
   end
 
-  # Configuration for the OTP application
+  # Configuration for the OTP application.
   #
-  # Type `mix help compile.app` for more information
+  # Type `mix help compile.app` for more information.
   def application do
     [mod: {WebpackExample, []},
      applications: [:phoenix, :phoenix_pubsub, :phoenix_html, :cowboy, :logger, :gettext,
-      :phoenix_ecto, :postgrex]]
+                    :phoenix_ecto, :postgrex]]
   end
 
-  # Specifies which paths to compile per environment
+  # Specifies which paths to compile per environment.
   defp elixirc_paths(:test), do: ["lib", "web", "test/support"]
   defp elixirc_paths(_),     do: ["lib", "web"]
 
-  # Specifies your project dependencies
+  # Specifies your project dependencies.
   #
-  # Type `mix help deps` for examples and options
+  # Type `mix help deps` for examples and options.
   defp deps do
-    [{:phoenix, "~> 1.2.0"},
+    [{:phoenix, "~> 1.2.1"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.0"},
      {:postgrex, ">= 0.0.0"},
@@ -40,6 +40,12 @@ defmodule WebpackExample.Mixfile do
      {:cowboy, "~> 1.0"}]
   end
 
+  # Aliases are shortcuts or tasks specific to the current project.
+  # For example, to create, migrate and run the seeds file at once:
+  #
+  #     $ mix ecto.setup
+  #
+  # See the documentation for `Mix` for more info on aliases.
   defp aliases do
     ["ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],

mix.lock

@@ -1,18 +1,19 @@
 %{"connection": {:hex, :connection, "1.0.4", "a1cae72211f0eef17705aaededacac3eb30e6625b04a6117c1b2db6ace7d5976", [:mix], []},
   "cowboy": {:hex, :cowboy, "1.0.4", "a324a8df9f2316c833a470d918aaf73ae894278b8aa6226ce7a9bf699388f878", [:rebar, :make], [{:cowlib, "~> 1.0.0", [hex: :cowlib, optional: false]}, {:ranch, "~> 1.0", [hex: :ranch, optional: false]}]},
   "cowlib": {:hex, :cowlib, "1.0.2", "9d769a1d062c9c3ac753096f868ca121e2730b9a377de23dec0f7e08b1df84ee", [:make], []},
-  "db_connection": {:hex, :db_connection, "1.0.0-rc.4", "fad1f772c151cc6bde82412b8d72319968bc7221df8ef7d5e9d7fde7cb5c86b7", [:mix], [{:connection, "~> 1.0.2", [hex: :connection, optional: false]}, {:poolboy, "~> 1.5", [hex: :poolboy, optional: true]}, {:sbroker, "~> 1.0.0-beta.3", [hex: :sbroker, optional: true]}]},
-  "decimal": {:hex, :decimal, "1.1.2", "79a769d4657b2d537b51ef3c02d29ab7141d2b486b516c109642d453ee08e00c", [:mix], []},
-  "ecto": {:hex, :ecto, "2.0.3", "3d416156e0b7578a31b6925ee07de76b53684ffb4f106b863e35b423b1004b08", [:mix], [{:db_connection, "~> 1.0-rc.2", [hex: :db_connection, optional: true]}, {:decimal, "~> 1.0", [hex: :decimal, optional: false]}, {:mariaex, "~> 0.7.7", [hex: :mariaex, optional: true]}, {:poison, "~> 1.5 or ~> 2.0", [hex: :poison, optional: true]}, {:poolboy, "~> 1.5", [hex: :poolboy, optional: false]}, {:postgrex, "~> 0.11.2", [hex: :postgrex, optional: true]}, {:sbroker, "~> 1.0-beta", [hex: :sbroker, optional: true]}]},
+  "db_connection": {:hex, :db_connection, "1.0.0", "63c03e520d54886a66104d34e32397ba960db6e74b596ce221592c07d6a40d8d", [:mix], [{:connection, "~> 1.0.2", [hex: :connection, optional: false]}, {:poolboy, "~> 1.5", [hex: :poolboy, optional: true]}, {:sbroker, "~> 1.0", [hex: :sbroker, optional: true]}]},
+  "decimal": {:hex, :decimal, "1.2.0", "462960fd71af282e570f7b477f6be56bf8968e68277d4d0b641a635269bf4b0d", [:mix], []},
+  "ecto": {:hex, :ecto, "2.0.5", "7f4c79ac41ffba1a4c032b69d7045489f0069c256de606523c65d9f8188e502d", [:mix], [{:db_connection, "~> 1.0-rc.4", [hex: :db_connection, optional: true]}, {:decimal, "~> 1.1.2 or ~> 1.2", [hex: :decimal, optional: false]}, {:mariaex, "~> 0.7.7", [hex: :mariaex, optional: true]}, {:poison, "~> 1.5 or ~> 2.0", [hex: :poison, optional: true]}, {:poolboy, "~> 1.5", [hex: :poolboy, optional: false]}, {:postgrex, "~> 0.12.0", [hex: :postgrex, optional: true]}, {:sbroker, "~> 1.0-beta", [hex: :sbroker, optional: true]}]},
   "fs": {:hex, :fs, "0.9.2", "ed17036c26c3f70ac49781ed9220a50c36775c6ca2cf8182d123b6566e49ec59", [:rebar], []},
   "gettext": {:hex, :gettext, "0.11.0", "80c1dd42d270482418fa158ec5ba073d2980e3718bacad86f3d4ad71d5667679", [:mix], []},
-  "phoenix": {:hex, :phoenix, "1.2.0", "1bdeb99c254f4c534cdf98fd201dede682297ccc62fcac5d57a2627c3b6681fb", [:mix], [{:cowboy, "~> 1.0", [hex: :cowboy, optional: true]}, {:phoenix_pubsub, "~> 1.0", [hex: :phoenix_pubsub, optional: false]}, {:plug, "~> 1.1", [hex: :plug, optional: false]}, {:poison, "~> 1.5 or ~> 2.0", [hex: :poison, optional: false]}]},
-  "phoenix_ecto": {:hex, :phoenix_ecto, "3.0.0", "b947aaf03d076f5b1448f87828f22fb7710478ee38455c67cc3fe8e9a4dfd015", [:mix], [{:ecto, "~> 2.0.0-rc", [hex: :ecto, optional: false]}, {:phoenix_html, "~> 2.6", [hex: :phoenix_html, optional: true]}]},
-  "phoenix_html": {:hex, :phoenix_html, "2.6.2", "944a5e581b0d899e4f4c838a69503ebd05300fe35ba228a74439e6253e10e0c0", [:mix], [{:plug, "~> 1.0", [hex: :plug, optional: false]}]},
-  "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.0.3", "262ed58c69174ae4f081725e03a072d0b48e6100248c0cbcd5df5e5fd4b212b6", [:mix], [{:fs, "~> 0.9.1", [hex: :fs, optional: false]}, {:phoenix, "~> 0.16 or ~> 1.0", [hex: :phoenix, optional: false]}]},
-  "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.0.0", "c31af4be22afeeebfaf246592778c8c840e5a1ddc7ca87610c41ccfb160c2c57", [:mix], []},
-  "plug": {:hex, :plug, "1.1.6", "8927e4028433fcb859e000b9389ee9c37c80eb28378eeeea31b0273350bf668b", [:mix], [{:cowboy, "~> 1.0", [hex: :cowboy, optional: true]}]},
+  "mime": {:hex, :mime, "1.0.1", "05c393850524767d13a53627df71beeebb016205eb43bfbd92d14d24ec7a1b51", [:mix], []},
+  "phoenix": {:hex, :phoenix, "1.2.1", "6dc592249ab73c67575769765b66ad164ad25d83defa3492dc6ae269bd2a68ab", [:mix], [{:cowboy, "~> 1.0", [hex: :cowboy, optional: true]}, {:phoenix_pubsub, "~> 1.0", [hex: :phoenix_pubsub, optional: false]}, {:plug, "~> 1.1", [hex: :plug, optional: false]}, {:poison, "~> 1.5 or ~> 2.0", [hex: :poison, optional: false]}]},
+  "phoenix_ecto": {:hex, :phoenix_ecto, "3.0.1", "42eb486ef732cf209d0a353e791806721f33ff40beab0a86f02070a5649ed00a", [:mix], [{:ecto, "~> 2.0", [hex: :ecto, optional: false]}, {:phoenix_html, "~> 2.6", [hex: :phoenix_html, optional: true]}, {:plug, "~> 1.0", [hex: :plug, optional: false]}]},
+  "phoenix_html": {:hex, :phoenix_html, "2.7.0", "19e12e2044340c2e43df206a06d059677c59ea1868bd1c35165438d592cd420b", [:mix], [{:plug, "~> 1.0", [hex: :plug, optional: false]}]},
+  "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.0.5", "829218c4152ba1e9848e2bf8e161fcde6b4ec679a516259442561d21fde68d0b", [:mix], [{:fs, "~> 0.9.1", [hex: :fs, optional: false]}, {:phoenix, "~> 1.0 or ~> 1.2-rc", [hex: :phoenix, optional: false]}]},
+  "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.0.1", "c10ddf6237007c804bf2b8f3c4d5b99009b42eca3a0dfac04ea2d8001186056a", [:mix], []},
+  "plug": {:hex, :plug, "1.2.2", "cfbda521b54c92ab8ddffb173fbaabed8d8fc94bec07cd9bb58a84c1c501b0bd", [:mix], [{:cowboy, "~> 1.0", [hex: :cowboy, optional: true]}, {:mime, "~> 1.0", [hex: :mime, optional: false]}]},
   "poison": {:hex, :poison, "2.2.0", "4763b69a8a77bd77d26f477d196428b741261a761257ff1cf92753a0d4d24a63", [:mix], []},
   "poolboy": {:hex, :poolboy, "1.5.1", "6b46163901cfd0a1b43d692657ed9d7e599853b3b21b95ae5ae0a777cf9b6ca8", [:rebar], []},
-  "postgrex": {:hex, :postgrex, "0.11.2", "139755c1359d3c5c6d6e8b1ea72556d39e2746f61c6ddfb442813c91f53487e8", [:mix], [{:connection, "~> 1.0", [hex: :connection, optional: false]}, {:db_connection, "~> 1.0-rc", [hex: :db_connection, optional: false]}, {:decimal, "~> 1.0", [hex: :decimal, optional: false]}]},
+  "postgrex": {:hex, :postgrex, "0.12.1", "2f8b46cb3a44dcd42f42938abedbfffe7e103ba4ce810ccbeee8dcf27ca0fb06", [:mix], [{:connection, "~> 1.0", [hex: :connection, optional: false]}, {:db_connection, "~> 1.0-rc.4", [hex: :db_connection, optional: false]}, {:decimal, "~> 1.0", [hex: :decimal, optional: false]}]},
   "ranch": {:hex, :ranch, "1.2.1", "a6fb992c10f2187b46ffd17ce398ddf8a54f691b81768f9ef5f461ea7e28c762", [:make], []}}

package.json

@@ -1,31 +1,23 @@
 {
-  "name": "webpack_example",
-  "version": "1.0.0",
-  "description": "To start your new Phoenix application:",
-  "main": "index.js",
-  "directories": {
-    "test": "test"
-  },
+  "repository": {},
+  "license": "MIT",
   "scripts": {
-    "start": "webpack --watch-stdin --colors --progress",
-    "compile": "webpack -p"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "babel-core": "^6.0.15",
-    "babel-loader": "^6.0.0",
-    "babel-preset-es2015": "^6.0.15",
-    "copy-webpack-plugin": "^2.1.3",
-    "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "node-libs-browser": "^1.0.0",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.10.1"
+    "deploy": "webpack -p",
+    "watch": "webpack --watch-stdin --progress --color"
   },
   "dependencies": {
     "node-sass": "^3.8.0",
     "phoenix": "file:deps/phoenix",
     "phoenix_html": "file:deps/phoenix_html"
+  },
+  "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.16.0",
+    "copy-webpack-plugin": "^3.0.1",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2"
   }
 }