Merge pull request #16 from dwyl/upgrade-phoenix-1.4

update readme for Phoenix 1.4

README.md

@@ -181,10 +181,10 @@ You should see following in your terminal:
 
 ```sh
 * running mix deps.get
-* running cd assets && npm install && node node_modules/brunch/bin/brunch build
 * running mix deps.compile
+* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
 
-We are all set! Go into your application by running:
+We are almost there! The following steps are missing:
 
     $ cd encryption
 
@@ -200,7 +200,6 @@ You can also run your app inside IEx (Interactive Elixir) as:
 
     $ iex -S mix phx.server
 ```
-
 Follow the _first_ instruction
 **change** into the `encryption` directory: <br />
 ```sh
@@ -341,7 +340,7 @@ Let's "step through" these lines one at a time:
 (IV) of **16 bytes** (***128 bits***)
 using the Erlang's crypto library `strong_rand_bytes` function:
 http://erlang.org/doc/man/crypto.html#strong_rand_bytes-1
-The "IV" is ensures that each time a string/block of text/data is encrypted,
+The "IV" ensures that each time a string/block of text/data is encrypted,
 the `ciphertext` is _different_.
 
 > Having **different** `ciphertext` each time `plaintext` is encrypted
@@ -597,6 +596,32 @@ https://github.com/dwyl/learn-environment-variables#environment-variables-on-her
 + AWS: https://aws.amazon.com/kms/
 + Google Cloud: https://cloud.google.com/kms/
 
+Update the `config/config.exs` to load the environment variables from the `.env` file into the application.
+Add the following code at the end of your config file:
+
+```elixir
+# run shell command to "source .env" to load the environment variables.
+try do                                     # wrap in "try do"
+  File.stream!("./.env")                   # in case .env file does not exist.
+    |> Stream.map(&String.trim_trailing/1) # remove excess whitespace
+    |> Enum.each(fn line -> line           # loop through each line
+      |> String.replace("export ", "")     # remove "export" from line
+      |> String.split("=", parts: 2)       # split on *first* "=" (equals sign)
+      |> Enum.reduce(fn(value, key) ->     # stackoverflow.com/q/33055834/1148249
+        System.put_env(key, value)         # set each environment variable
+      end)
+    end)
+rescue
+  _ -> IO.puts "no .env file found!"
+end
+
+# Set the Encryption Keys as an "Application Variable" accessible in aes.ex
+config :encryption, Encryption.AES,
+  keys: System.get_env("ENCRYPTION_KEYS") # get the ENCRYPTION_KEYS env variable
+    |> String.replace("'", "")  # remove single-quotes around key list in .env
+    |> String.split(",")        # split the CSV list of keys
+    |> Enum.map(fn key -> :base64.decode(key) end) # decode the key.
+```
 
 ##### Test the `get_key/0` and `get_key/1` Functions?
 
@@ -717,7 +742,7 @@ In order to use `argon2` we must add it to our `mix.exs` file:
 in the `defp deps do` (_dependencies_) section, add the following line:
 
 ```elixir
-{:argon2_elixir, "~> 1.2"},  # securely hashing & verifying passwords
+{:argon2_elixir, "~> 1.3"},  # securely hashing & verifying passwords
 ```
 
 You will need to run `mix deps.get` to install the dependency.

assets/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "env"
+  ]
+}

assets/package.json

@@ -2,17 +2,23 @@
   "repository": {},
   "license": "MIT",
   "scripts": {
-    "deploy": "brunch build --production",
-    "watch": "brunch watch --stdin"
+    "deploy": "webpack --mode production",
+    "watch": "webpack --mode development --watch"
   },
   "dependencies": {
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {
-    "babel-brunch": "6.1.1",
-    "brunch": "2.10.9",
-    "clean-css-brunch": "2.10.0",
-    "uglify-js-brunch": "2.10.0"
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^4.5.0",
+    "css-loader": "^0.28.10",
+    "mini-css-extract-plugin": "^0.4.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "4.4.0",
+    "webpack-cli": "^2.0.10"
   }
 }

assets/webpack.config.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const glob = require('glob');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = (env, options) => ({
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
+  entry: {
+      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
+  },
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, '../priv/static/js')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
+    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+  ]
+});

config/config.exs

@@ -22,6 +22,7 @@ config :logger, :console,
   format: "$time $metadata[$level] $message\n",
   metadata: [:request_id]
 
+config :phoenix, :json_library, Jason
 # Import environment specific config. This must remain at the bottom
 # of this file so it over rides the configuration defined above.
 import_config "#{Mix.env}.exs"

config/dev.exs

@@ -11,8 +11,15 @@ config :encryption, EncryptionWeb.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
-                    cd: Path.expand("../assets", __DIR__)]]
+  watchers: [
+    node: [
+      "node_modules/webpack/bin/webpack.js",
+      "--mode",
+      "development",
+      "--watch-stdin",
+      cd: Path.expand("../assets", __DIR__)
+    ]
+  ]
 
 # ## SSL Support
 #
@@ -50,7 +57,6 @@ config :phoenix, :stacktrace_depth, 20
 
 # Configure your database
 config :encryption, Encryption.Repo,
-  adapter: Ecto.Adapters.Postgres,
   username: "postgres",
   password: "postgres",
   database: "encryption_dev",

config/test.exs

@@ -11,7 +11,6 @@ config :logger, level: :warn
 
 # Configure your database
 config :encryption, Encryption.Repo,
-  adapter: Ecto.Adapters.Postgres,
   username: "postgres",
   password: "postgres",
   database: "encryption_test",

lib/encryption/repo.ex

@@ -1,6 +1,7 @@
 defmodule Encryption.Repo do
-  use Ecto.Repo, otp_app: :encryption
-
+  use Ecto.Repo,
+    otp_app: :encryption,
+    adapter: Ecto.Adapters.Postgres
   @doc """
   Dynamically loads the repository url from the
   DATABASE_URL environment variable.

lib/encryption_web/channels/user_socket.ex

@@ -4,10 +4,6 @@ defmodule EncryptionWeb.UserSocket do
   ## Channels
   # channel "room:*", EncryptionWeb.RoomChannel
 
-  ## Transports
-  transport(:websocket, Phoenix.Transports.WebSocket)
-  # transport :longpoll, Phoenix.Transports.LongPoll
-
   # Socket params are passed from the client and can
   # be used to verify and authenticate a user. After
   # verification, you can put default assigns into
@@ -19,10 +15,11 @@ defmodule EncryptionWeb.UserSocket do
   #
   # See `Phoenix.Token` documentation for examples in
   # performing token verification on connect.
-  def connect(_params, socket) do
+  def connect(_params, socket, _connect_info) do
     {:ok, socket}
   end
 
+
   # Socket id's are topics that allow you to identify all sockets for a given user:
   #
   #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"

lib/encryption_web/endpoint.ex

@@ -1,8 +1,9 @@
 defmodule EncryptionWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :encryption
 
-  socket("/socket", EncryptionWeb.UserSocket)
-
+  socket "/socket", EncryptionWeb.UserSocket,
+    websocket: true,
+    longpoll: false
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phoenix.digest
@@ -30,7 +31,7 @@ defmodule EncryptionWeb.Endpoint do
     Plug.Parsers,
     parsers: [:urlencoded, :multipart, :json],
     pass: ["*/*"],
-    json_decoder: Poison
+    json_decoder: Jason
   )
 
   plug(Plug.MethodOverride)

mix.exs

@@ -36,16 +36,18 @@ defmodule Encryption.Mixfile do
   # Type `mix help deps` for examples and options.
   defp deps do
     [ # Default Phoenix Dependencies
-      {:phoenix, "~> 1.3.0"},
+      {:phoenix, "~> 1.4.0"},
       {:phoenix_pubsub, "~> 1.0"},
-      {:phoenix_ecto, "~> 3.2"},
+      {:ecto_sql, "~> 3.0"},
+      {:phoenix_ecto, "~> 4.0"},
       {:postgrex, ">= 0.0.0"},
-      {:phoenix_html, "~> 2.10"},
+      {:phoenix_html, "~> 2.11"},
       {:phoenix_live_reload, "~> 1.0", only: :dev},
       {:gettext, "~> 0.11"},
-      {:cowboy, "~> 1.0"},
+      {:plug_cowboy, "~> 2.0"},
+      {:jason, "~> 1.0"},
 
-      {:argon2_elixir, "~> 1.2"},  # securely hashing & verifying passwords
+      {:argon2_elixir, "~> 1.3"},  # securely hashing & verifying passwords
       # Development dependencies:
       {:excoveralls, "~> 0.7.0", only: [:test, :dev]}, # tracking test coverage
       {:dogma, "~> 0.1", only: [:test, :dev]}, # Elixir style