How do you integrate Semantic UI with Phoenix?

Never tried installing frontend technologies with NPM, with Phoenix I usually place them inside web/static/vendor and leave them there for eternity.

Sometimes I go into the Brunch config. so I can adjust which file gets compiled first (such as jquery before bootstrap, etc)

you can do both… put semanticui into your packaga.json and then move the dist files (you run a build step on semanticui after you npm install) to your web/static/vendor folder.

Interested to learn semantic - looks nicer than bootstrap.

I have used Semantic UI with Phoenix before. I did it by just putting the folder into web/static/vendor, as I did not have any need to alter its config at that time.

I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.

Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack

Hope that helps.

For Phoenix 1.2:

1. Copy semantic.min.css and semantic.min.js to web/static/vendor/css/ and web/static/vendor/js/ respectively.
2. Remove bootstrap and normalize code from phoenix.css.
3. Set ordering of files in brunch-config.js (jquery goes before semantic-ui.js).
4. Copy the fonts and images folders to web/static/assets/.
5. Change “themes/default/assets” to “..” in paths in semantic.min.css.

Then you need to change your HTML tags and classes to match Semantic UI’s. Hope this helps.

I was playing around with Semantic UI tonight in a Phoenix app. It was a little tricky to get it working without just copying the assets into my app’s directories. I’d rather just use things directly from the npm package if I can. So here’s how I solved it.

• In brunch-config.js include the following:

exports.config = {
  files: {
    stylesheets: {
      joinTo: "css/app.css"
    }
  },

  plugins: {
    // This will copy the font files to priv/static/fonts
    copycat: {
      "fonts" [
        "node_modules/semantic-ui-css/themes/default/assets/fonts"
      ]
    }
  },

  npm: {
    enabled: true
    styles: {
      // Adds this to app.css
      "semantic-ui-css": ["semantic.min.css"]
    }
  }
}

• Open up your package.json and update the scripts section:

{
  "scripts": {
    "postinstall": "elixir fix-asset-urls.exs"
  }
}

• Obviously that won’t do anything yet, so we need to add fix-asset-urls.exs to our assets directory:

defmodule FixAsset do
  def update_file(filename, old, new) do
    File.stream!(filename)
    |> Enum.map(&String.replace(&1, old, new))
    |> Stream.into(File.stream!(filename))
    |> Stream.run
  end
end

FixAsset.update_file(
  "node_modules/semantic-ui-css/semantic.min.css",
  "url(themes/default/assets/fonts",
  "url(../fonts"
)

• You’ll need to run npm install --save-dev copycat-brunch.

At this point running npm install should run our postinstall script, which will modify semantic.min.css under our node_modules directory. The reason for that script is because there are all these font-face directives that will direct the browser to load (from the relative directory of /css), so it will try to load /css/themes/default/assets/fonts/icons.ttf for example.

If there’s a smarter way of making this work please correct me. This is what I came up with tonight and it seems to work for me.

I’m playing with Semantic React, so semantic.min.js isn’t relevant for what I’m doing. But I hope this comment helps other people who at least want to get the CSS and fonts loading and working.

You may want to look here. It use brunch and semantic configuration for its approach.

@bratsche to get the JS part working, just require("semantic-ui-css") from within your assets/js/app.js file, and Brunch will include it.

Thank you for that great guide, @bratsche!

@bratsche Thanks for the great guide!

One addition from my side:
If you change

copycat: {
  "fonts" [
    "node_modules/semantic-ui-css/themes/default/assets/fonts"
  ]
}

to`

copycat: {
  "css/themes/default/assets/": [
    "node_modules/semantic-ui-css/themes/default/assets/"
  ]
}

You can omit the fix-asset-urls.exs helper script and the flags will also work.