Phoenix 1.4 Chat Server: Part 1

In this episode we start work on the Chat Server we planned last time.

Overview

First we update our installers to use Phoenix 1.4 (rc 2) and create the chat server app.

Then we make sure we've got Cowboy 2 and Ecto 3, and check out the new changes in 1.4. Channels have changed a bit and the code in endpoint.ex and user_socket reflects it. Another big change is swapping out Brunch for Webpack.

Finally, we'll install node-sass and sass-loader and adjust our to our Webpack setup so we can use SCSS instead of CSS.

Updating to the Phoenix 1.4 rc-2 installer

Make sure we've got the current Elixir package manager mix local.hex

Just to be safe, uninstall the installer for the previous version of Phoenix mix archive.uninstall phx_new

To be even safer look at everything installed with mix archive

Install the version 1.4, release candidate 2 mix archive.install hex phx_new 1.4.0-rc.2

Note that once the final release is out, you can just follow the instructions at https://hexdocs.pm/phoenix/installation.html.

Create a new app

With the new installer, we can just use phx.new as usual: mix phx.new chit_chat

Check the mix file and make sure we have version 2 of plug_cowboy. There should be a section like this:

  defp deps do
    [
      {:phoenix, "~> 1.4.0-rc"},
      {:phoenix_pubsub, "~> 1.1"},
      {:phoenix_ecto, "~> 3.5"},
      {:ecto, "~> 3.0-rc", override: true},
      {:ecto_sql, "~> 3.0-rc", override: true},
      {:postgrex, ">= 0.0.0-rc"},
      {:phoenix_html, "~> 2.11"},
      {:phoenix_live_reload, "~> 1.2-rc", only: :dev},
      {:gettext, "~> 0.11"},
      {:jason, "~> 1.0"},
      {:plug_cowboy, "~> 2.0"}
    ]
  end

You'll notice that the socket, websocket and longpoll settings in *web_endpoint.ex and user_socket.ex have changed a little bit since version 1.3.

Install Sass and configure Webpack

Now that Webpack has replaced Brunch in Phoenix 1.4, we've got to do a bit more work to get SCSS working. First, update the block in webpack.config.js rules to this:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  }

The test for CSS is changed above to match .scss as well as .css files. It runs them through the sass-loader plugin to convert SCSS to CSS and then passes the result down the default pipeline the Phoenix installer already set up for CSS.

Then, of course, we'll need to install the Webpack sass-loader and also node-sass, which is the module that does the actual work of converting SCSS to CSS.

cd assets
npm install --save-dev node-sass sass-loader

Rename app.css to app.scss and then finally change the import at the top of app.js to match:

import css from "../css/app.scss"

Troubleshooting

There's a fair amount of library churn, especially on the front-end. If you encounter any issues, try using the exact same library versions as in the tutorial. Here's the package.json:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "@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",
    "node-sass": "^4.9.4",
    "optimize-css-assets-webpack-plugin": "^4.0.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "4.4.0",
    "webpack-cli": "^2.0.10"
  }
}

Done

The newly installed Phoenix 1.4 app is now using HTTP2, using Ecto 3 and building its front-end assets with Webpack, Babel and Sass!

Next episode: Part 2