Using semantic-ui from V3 app


#1

[Realise that this is probably not really an OS.js question, probably a webpack issue. Feel free to tell me to research in that direction.]

I’m now attempting to port an existing V2 application to V3. To make things trickier I’m porting an application that was written as an iFrame application. The set of applications I’m going to need to prt make use of libraries such as datatables.net and jsTree.com. As a trailblazer I wrote a small native V3 app using datatables.net, that worked just fine.

I did npm install datatables.net and then import ‘datatables.net’, popped some code into a render() callback and all is well

Now I’m trying to do the same thing for this existing app that uses semantic-ui. The npm install seems to have worked, something has appeared in node_modules. However import ‘semantic-ui’ just fails to find anything. It seems that sematic-ui is normally used with a packaging tool called gulp, but in the V2 version we seemed to be able to use the semantic-ui libraries directly.

I think I can place the semantic js files directly in my application, rather than picking up from node_modules, but that feels unclean.

Any suggestions?


#2

You have to use some thing like https://github.com/Semantic-Org/Semantic-UI-CSS


#3

#4

Alternatively, just add the ready minimized files to your metadata.json file and use Webpack Copy Plugin – though not recommended.

Example (simplified):

// metadata.json
{
  "files": [
    "main.js",
    "semantic-ui.css",
    "semantic-ui.js",
  ]
}
// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {from: 'foo/bar/semantic-ui.css': to: 'semanti-ui.css'},
      {from: 'foo/bar/semantic-ui.js', to: 'semantic-ui.js'),
    ])
  ]
};

#5

I guess that kinda depends. If you’re using it over multiple applications it might be better to load it globally (the OS.js/webpack.config.js and OS.js/src/client/index.ejs files).

Also, I’ve used Semantic UI for some work related stuff, and if you import the ready-built bundles it might mess up the global style sheets. This can be solved with using the sass version of Semantic-UI because you can pick exactly what you need only.

Let me know how this works out.


#6

I added this to the manual :slight_smile:

https://manual.os-js.org/v3/guide/framework/#misc

Edit Updated article for clarity.


#7

Also, if you’re planning on using external resources as mentioned in that article, make sure to upgrade @osjs/client because I’ve fixed some issues relating to that :blush:


#8

Thanks for all this info. Making progress.

Tiny typo in reference doc:

 {from: 'foo/bar/library.js': to: 'library.js'},
  {from: 'foo/bar/library.css': to: 'library.css'}

Need commas, not colons.