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
4 Comments
Does this series cover video chat features as well ?
This one is just text. For video chat, you'd need something like WebRTC.
Any plans of putting out a lecture series on making video chat app based on WebRTC/Janus ?
How would Janus work with Phoenix? WebRTC might happen if enough people want it.