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.
@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?