Setting up Semantic UI on Phoenix Framework

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 package.json which is what you see in any JavaScript Package or Single Page Application project.

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
cd static/vendor/semantic/
gulp build
  Note: you want to install it in the static/vendor folder because the default webpack.config.js is 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,
    websocket: true,
    longpoll: false
  plug Plug.Static,
    at: "/",
    from: :chat,
    gzip: false,
    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 Plug.Static configuration.

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.