How-To: Set up Semantic UI with Phoenix 1.3, SASS and Webpack 3

Articles

• Step 1: Adding Webpack 3 to Phoenix
• Step 2: Adding Semantic UI Sass to Phoenix with Webpack

Requirements

• Phoenix 1.3.0 or later
• Elixir 1.5 or later
• Erlang 20 or later
• Heroku stack: heroku-16

Installation

To start your Phoenix server:

• Install dependencies with mix deps.get
• Create and migrate your database with mix ecto.create && mix ecto.migrate
• Install Node.js dependencies with cd assets && npm install
• Start Phoenix endpoint with mix s

Now you can visit localhost:4000 from your browser.

Deployment

To deploy to Heroku, click the button below.

Refer to app.json manifest if you'd like to manually set add-ons, buildpacks and config variables.

Development

Some tools need to be installed globally:

$ mix archive.install hex sobelow
$ gem install scss-lint

Running tests and code scanners:

$ mix test
$ mix sobelow --config
$ mix credo
$ scss-lint assets/css/
$ cd assets && yarn eslint

Note: run cd assets && yarn deploy if your newly added static assets such as images and fonts don't show up. This way, they get copied to priv/static.

License

See LICENSE.