How do you integrate Semantic UI in Phoenix? As a dependency in package.json
or do you directly downlaod the assets in your project directory?
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:
- Copy semantic.min.css and semantic.min.js to web/static/vendor/css/ and web/static/vendor/js/ respectively.
- Remove bootstrap and normalize code from phoenix.css.
- Set ordering of files in brunch-config.js (jquery goes before semantic-ui.js).
- Copy the fonts and images folders to web/static/assets/.
- 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.
Hey, I want to use Semantic UI in my project. Is there any good solution to hook it up for current release of Phoenix?