Using Semantic UI

[kennym]

How would one use Semantic UI with the starter kit?

This is what I tried:

npm install semantic-ui --save
cd semantic/
gulp build

I then try to reference the files in the src/index.html like this: <link rel="stylesheet" href="../semantic/dist/semantic.css" but that doesn't work

Any ideas on what I am doing wrong?

[beeftornado]

I successfully use semantic-ui in my project that was started from the starter kit. I admit, it took some trial and error to get it right. Your installation steps are good, and you built it -- good. It takes a little bit of hacking to get it served though without bombarding webpack with a crap load of unnecessary files. Since semantic ui is supposedly built with just the stuff you need (you can specify those in your semantic.json file), it shouldn't need any processing so it can be left out of webpack's business (mostly).

So, what you're probably missing...

• Don't add anything to your index.html file
• If you want semantic's javascript modules,
  • In src/main.js insert import 'semantic/dist/semantic' at the top. This dependency link will allow webpack to pull it in.
• For the css styles, in src/styles/_base.scss, add @import url('/semantic/semantic.css');

• In server/main.js, I have this configuration inside the development server if block:

  const compiler = webpack(webpackConfig)
  
  // Enable webpack-dev and webpack-hot middleware
  const { publicPath } = webpackConfig.output
  
  app.use(webpackDevMiddleware(compiler, publicPath))
  app.use(webpackHMRMiddleware(compiler))
  
  // semantic files are in their own folder when running dev server.
  // Use the production path in the html and for development this
  // will rewrite the request.
  app.use(convert(rewrite('/semantic/*', '/$1')))
  
  // Serve semantic-ui assets for above reason
  app.use(convert(serve(paths.client('semantic/dist'))))
  
  // Serve static assets from ~/src/static since Webpack is unaware of
  // these files. This middleware doesn't need to be enabled outside
  // of development since this directory will be copied into ~/dist
  // when the application is compiled.
  app.use(convert(serve(paths.client('static'))))

  • You'll notice there's a url rewrite happening. Install koa-rewrite

Now, it should be working in development. There's a few more steps I highly recommend though:

• When npm run deploy is executed, you will want semantic to be a part of it. In bin/compile.js, copy the semantic files to your dist folder.

  # line 18
  debug('Copy static assets to dist folder.')
  fs.copySync(paths.client('static'), paths.dist())
  
  // Copy semantic-ui files to dist folder
  // Should semantic-ui be rebuilt fresh on a deploy? (cd src/semantic && gulp build) I don't think so
  debug('Copy semantic-ui to dist folder.')
  fs.copySync(paths.client('semantic/dist'), paths.dist('semantic'))

• In build/karma.conf.js,

  # line 64
  if (config.coverage_enabled) {
  karmaConfig.reporters.push('coverage')
  karmaConfig.webpack.module.preLoaders = [{
  test: /\.(js|jsx)$/,
  include: new RegExp(config.dir_client),
  loader: 'isparta',
  exclude: [/node_modules/, /semantic/]
  }]
  }

• In build/webpack.config.js, you'll want the jquery variables added or semantic javascript functions won't be available to you:

  # line 44-ish
  // ------------------------------------
  // Plugins
  // ------------------------------------
  webpackConfig.plugins = [
  new webpack.DefinePlugin(config.globals),
  new HtmlWebpackPlugin({
  template: paths.client('index.html'),
  hash: false,
  favicon: paths.client('static/favicon.ico'),
  filename: 'index.html',
  inject: 'body',
  minify: {
    collapseWhitespace: true
  }
  }),
  new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
  })
  ]

• In /.eslintignore, add src/semantic
• In /.eslintrc, add $ to list of globals
• Line 34 of tests/test-bundler.js needs to be changed to const componentsContext = require.context('../src/', true, /^((?!main)(?!semantic\/.*).)*\.js$/) to not break your tests

Again, this is just how I got it working. It's by no means the solution since it is obviously very opinionated in what I did. I very much agree though that it was not a simple html include. I mean you could, but then the initial webpack build would take like 5 minutes.

One more unrelated, but helpful tip if you're using semantic. I would highly recommend using the classnames module for applying css styles. Importing individual class names like in the examples is tiresome with this library. And a lot of the dynamic stuff stops working.

[rsilvestre]

Hi, i successfully integrate it too in the project : https://github.com/rsilvestre/react-redux-starter-kit/tree/semantic-ui

Thank you @beeftornado

[dvdzkwsk]

Will add a recipe for this. Also see: https://github.com/TechnologyAdvice/stardust