Webpack(er) for UI

Developers
#1

With ManageIQ/manageiq-ui-classic#1132, we’re introducing webpack (version 3) into the UI mix, via webpacker. This means we can now use new Javascript, and even Typescript in ui-classic (but read on, not everywhere).

Webpack is a tool to compile our frontend dependencies into one or more bundles.
Webpacker is a rails project, handling the integration of webpack into rails, including helpers like javascript_pack_tag, etc.

Code living under app/assets/javascripts/ should not be affected by this change and will continue to work as before, using sprockets and rails’ asset pipeline. But, for new code, this is no longer the right place, newly written code should live under app/javascript/, and will be compiled via webpacker.

Non-UI devels:

Unless you’re doing UI changes, this should be a no-op for you, as long as you run bin/update after updating ui-classic, or changing branches there, you should be fine - /bin/update calls rake update:ui.

rake update:ui now not only installs bower & yarn dependencies, it also recompiles these UI assets.

UI devs:

No changes in app/javascript/ will be visible in the UI before you compile them.
This can be done manually, by running rake webpack:compile, or it can happen automatically on any change, as long as you’re running bin/webpack --watch from ui-classic.

So… please make sure you’re always running bin/webpack --watch when doing UI changes (from ui-classic). You will also need to run the rake task at least once, or any time you add/remove a UI plugin.

Rails engines:

Webpacker itself doesn’t support rails engines, we have a rake webpack:paths task which creates an config/webpack/paths.json config file, with the paths to all the engines, including ManageIQ for output.

Right now, any Rails engine with an app/javascript will get compiled (and yarn will be called in it), later, this may apply only to plugins which explicitly ask for it.

For more details, please go to https://github.com/ManageIQ/manageiq-ui-classic/pull/1132 .

2 Likes
#2

is there any easy way to load webpack in dev mode? maybe something like using the foreman gem? I heard in other threads that it might be used to load multiple workers ?

#3

for reference, here is how its done in foreman project (using the foreman gem ;))

#4

and it seems its already merged - have a look at https://github.com/ManageIQ/manageiq/pull/15669

#5

@ohadlevy … can’t use webpack-dev-server quite yet … https://github.com/ManageIQ/manageiq-ui-classic/pull/1132#issuecomment-304048743 and the comment after that…

But yeah, I guess it’d make sense to use this foreman :slight_smile: Adding to the TODO list :slight_smile:

#6

@himdel did this introduce a minimum version requirement for nodejs?
I started getting:

error postcss-smart-import@0.6.13: The engine "node" is incompatible with this module. Expected version ">=6.0.0".
error Found incompatible module

I’m on debian sid where the version of nodejs is 4.8.4, I had to install nodejs from experimental to get the UI to work.

I didn’t see anything about a new minimum version in this article so thought I’d bring it up

#7

That message seems correct. Node version 4.x is a maintenance release. Version 6.x is latest active Long Term Support (LTS) version.

For reference here is the Node release schedule: https://github.com/nodejs/LTS

#8

That might be true but it worked before :smile:

#9

And if installing from experimental is required the developer setup should be updated to reflect that

#10

Node version 6 is not experimental but Long Term Support. The current version is version 8. Experimental is version 9 and 10.
https://github.com/nodejs/LTS/raw/master/schedule.png

But, yes, agreed any changes to version should be documented :wink:

#11

Oh sorry not saying node 6 is experiment, but it is only in the Debian experimental repository not in any stable release of Debian or Ubuntu.

#12

@agrare Agreed, we should update the devel instructions to explicitly mention node 6+. Will do :).
(It has been a requirement for SUI for a while, but… :).)

I have my node from experimental as well, an alternative is to use nvm to install one locally, same as rbenv.

EDIT: https://github.com/ManageIQ/guides/pull/243