I’m learning Phoenix and Semantic UI simultaneously and wanted to kick off a new project that has both of them in the mix.
I’m going to assume in this guide that you’ve created a Phoenix project and have Elixir and Phoenix installed — if not follow the official guide here: https://hexdocs.pm/phoenix/installation.html#content.
According to the changelog — the Phoenix application generator officially switched from Brunch to Webpack in 1.4.0 which is fairly recent. So when you create a new application using
mix phx.new — it creates an
assets directory containing a
From the project directory we can
cd assets and follow the Semantic UI installation guide which requires us to:
- Install Node.JS which should be done already.
- Install Gulp globally —
npm -g install gulp
- Install semantic:
npm install semantic-ui --save
Note: you want to install it in the
static/vendorfolder because the default
webpack.config.jsis configured to build that directory already.
Once we have that the final step is to configure
lib/app_name_web/endpoint.ex to serve your vendor folder:
defmodule ChatWeb.Endpoint do
use Phoenix.Endpoint, otp_app: :chat
socket "/socket", ChatWeb.UserSocket,
longpoll: false plug Plug.Static,
only: ~w(css fonts images js favicon.ico robots.txt vendor)...
The only thing we’re doing in this code block is adding
vendor to the
You should now be able to write this
<link rel=”stylesheet” href=”<%= Routes.static_path(@conn, “/vendor/semantic/dist/semantic.css”) %>”/> in any of your
html.eex files — preferably the
layout/app.html.eex file in the header tag.
That wraps up this tutorial — stay tuned for more! Also wanted to give a special shoutout to the Slack community for Elixir for helping me instantaneously for when I was getting stuck on doing this — you all are awesome.