Does the official Semantic-UI-React work well with meteor? I want to move to Meteor

Hi, there.

Currently I am working on an app with Express, React and Semantic-UI-React. I am considering moving to Meteor, but does Meteor work well with the official Semantic-UI-React?

What is your question about? You can use all the npm packages like in any node app. All the same, except the fact, you should know how Meteor works)

Thanks, mrzafod.

I read this post which seems there may be a problem when integrating Semantic UI into Meteor. So I wonder if Semantic-UI-React has problem too.

Anyway, I haven’t worked out the tutorial, so maybe I should do that first.

PM me and I can help you with it.

Yes! I love SUI. We did https://blackship.com with it. I’ve also used it for a bunch of static sites. Like the home page here https://whiterabbitexpress.com

I’m also the admin at forums.semantic-ui.com

Sounds great! Thanks, maxhodges!

We aren’t using that less-autoprefixer and jquery package because we went with react-semantic-ui (which is jquery free).

Trying to get them to clarify who should and shouldn’t go with that install procedure

@maxhodges @ralpheiligan how does one go about adding react-semantic-ui to meteor?

Install the sui css then React-sui components separately

https://semantic-ui.com/introduction/integrations.html

It seems that that this works in Meteor 1.8:

Meteor Packages

meteor remove standard-minifier-css
meteor remove semantic:ui juliancwirko:postcss less
# no need for this: jquery

npm packages in package.json

meteor npm install --save semantic-ui-react
meteor npm install --save-dev autoprefixer postcss@^6.0.22 postcss-load-config@^1.2.0 postcss-easy-import

Add to package.json

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    },
    "excludedPackages": []
  },

The postcss-easy-import helps avoid annoying warnings like:

app/client/lib/semantic-ui/semantic.less: warn: There are some @import rules those are not taking effect as they are required to be in the beginning of the file.

Follow the instructions to “generate Semantic UI” at https://github.com/Semantic-Org/Semantic-UI-Meteor#usage

To get the CSS included, put (something like) this somewhere after the client entry point:

import './lib/semantic-ui/semantic.less';

The extra code generated (duplicated in semantic-ui-react) should be excluded by the bundler.

1 Like