LR 7 IDE -> Tomcat without build-process?

[6年前 に Janne Lepola によって更新されました。]

I'v been developing previous version of our portal on 6.2 and it has been configured in a way that all the static files seem to be reflect directly to Tomcat webapps/ folder. This way all the changes for JS and CSS (and apparently even SCSS?) seem to reflect directly from Liferay IDE to service without having build-process.

On Liferay 7 Eclipse IDE I'v been trying to do the same, but with no luck. I'v followed instructions of https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-developer-mode-with-themes , but no files seem to be published to webapps -folder and apparently auto build is still running for static files. I'm able to disable autobuilder by selecting WAR-project (which contains theme) and by disabling auto builder from builders, but this simply stops all the publishing required by WARs.

I can confirm that portal-ext is working, as using developer-mode stops loading browser page automatically on server startup.

Any directions on what I should be configuring in order to have direct deploying by simply using ctrl+s on static files (css/jsp/js), and where should I configure my webapps-folder (... and is this still supported?)

Additionally - is there some better way to develop UI? Some people like doing everything from Eclipse, even though I would prefer external editors. The problem is that only the Eclipse has been able reflect changes made to files - If I chose to edit .css from ie. Notepad++ or anything similar, saving doesn't seem to trigger copying files from source-folder to tomcat webapps. Should this work out-of-the-box, or do I need to configure watcher-services to monitor changes on source-folders and manually script copying of those files to Tomcat?

[6年前 に Joye Luo によって更新されました。]

Hey Janne,

There is the tutorial about how to develop liferay 7.0 theme in Liferay IDE.
https://web.liferay.com/community/forums/-/message_boards/message/88816362
It's a little bit different from the old way we develop Liferay 6.2 theme.

Hope that can solve your problem.

Sincerely,
Joye Luo

[6年前 に Janne Lepola によって更新されました。]

This doesn't answer the question.

In 6.2 there was no need to copy stuff manually from folder to folder, as IDE seemed to move those files to tomcat webapp folder by itself. Now IDE starts rather long compiling process (6-10 seconds per save), which is unacceptable for JS / CSS development.

[6年前 に Andy Wu によって更新されました。]

Yes , Janne , you are right , liferay 7 is osgi based platform , and all portlet plugins is osgi bundle (jar file) but the legacy style developing (war project)is still supported.
In 6.2 a portlet project is just and web project and you can see the deployed state in {tomcat.home}/webapp folder , IDE will auto copy changed file to the fodler.
But in 7.0 , this changed , all the portlet are osgi bundle(if you deploy war file , liferay will convert it to osgi bundle) , and this jar file should be installed to the OSGi container inside liferay server. So you can't see the deployed files anymore.

There are two kind of style to develop themes - maven/gradle way or node.js way. And node.js way could support watch kind of feature.

[6年前 に Janne Lepola によって更新されました。]

I'm aware of how node works, but I don't know how node or ANY OTHER editor could be integrated to Liferay IDE. I want to have JS & CSS source files in project folder where all the other project files are, and this folder is not inside tomcat webapps. The question is how can I enable syncing of files from IDE, when editing and/or compiling with *any other* development tool? Do I really have to create a new script pipeline manually, which monitors and builds/publishes JS/CSS files from project path into the webapps-folder? It's also strange that I did try setting up development-mode by official docutentation from letter to letter, but I'm not seeing anything resembling previous 6.2 publishing pipeline.

Using any other development tool next to Eclipse is a pain, as it doesn't seem to be aware of changes made from other programs . If I edit any file with notepad++, or any other program, Liferay IDE doesn't have a clue of changes made (except if you refresh folders manually). This results to Eclipse GIT plugin not being aware of files to be committed, hot deployer not hot deploying etc... It's hard for me to understand why previous way was forced to OSGI, when it should have been hybrid solution with OSGI building being triggered manually but static files ( / theme project) being hot deployed as things change...

These kind of changes makes me want to rip my hair off while working with Liferay. With script-based languages / frameworks there is no build-phase and with .NET you do get much better integrations for Node development via plugins -- everything just integrates nicely to Visual Studio. Strangest thing is that no documentation seems to give any idea of how you should actually setup & develop UI, not even guidelines for setting up node and/or tomcat dev pipeline.

[6年前 に Andy Wu によって更新されました。]

Hey Jannel , I am not familiar with frontend devlopment , you can go to liferay community channel in slack to ask frontend engineers about the development env setup.

[6年前 に Minhchau Dang によって更新されました。]

How closely does liferay-osgi-watch meet your needs?

You essentially run it, and what it does is it tells OSGi where to find an expanded bundle, and it uses Gulp to copy files (and also call a minimal Gradle task to recompile Java changes, if applicable) and then restart bundle any time you make changes. So as long as you aren't using a heavy backend framework, and as long as there isn't state stored on the server, you can see your changes almost instantly.

[6年前 に Tobias Liefke によって更新されました。]

@Janne: Are only interested in starting the build process when a file has changed outside of Eclipse?

You should check Window -> Preferences -> General -> Workspace -> "Refresh using native hooks or polling".

On the other hand - I'm interested in an "in place" editing of plugin projects as well - if anyone has a solution for this?

It's frustrating to make a small change and wait for the build process / redeployment to finish, which takes (depending on plugin type and dimension) up to a minute. If you refresh your page during "redeployment" of the plugin, you can't even see your theme resp. portlets because the previous version is stopped first. If you make a change to a class of a portlet plugin - which often enough is immediately applied with the "hotswap"-feature of the JVM - there is even no need to redeploy the plugin. But it is redeployed anyway and you have to wait...

A reason for me to drop the Liferay-IDE and use a plain Eclipse instead.

[6年前 に Janne Lepola によって更新されました。]

Tobias Liefke:

@Janne: Are only interested in starting the build process when a file has changed outside of Eclipse?

I'll have to check this property, but my main problem isn't that it's not building automatically. That's part of the problem, as the page doesn't refresh. Say, you have a coding error in JS (missing colon or such) which I would like to fix with some other editor. Saving the fix doesn't trigger hotswap/hotdeploy for that file (on 6.2) as it does on Liferay IDE, not until I have refreshed correct folder with F5 from LR IDE. This leads to a problem that LR IDE is out-of-sync with edited files and external plugins, such as GIT-plugin, are unaware of what should be staged.

Tobias Liefke:

It's frustrating to make a small change and wait for the build process / redeployment to finish, which takes (depending on plugin type and dimension) up to a minute. If you refresh your page during "redeployment" of the plugin, you can't even see your theme resp. portlets because the previous version is stopped first. If you make a change to a class of a portlet plugin - which often enough is immediately applied with the "hotswap"-feature of the JVM - there is even no need to redeploy the plugin. But it is redeployed anyway and you have to wait...

A reason for me to drop the Liferay-IDE and use a plain Eclipse instead.

Exactly the problem I'm having. OSGI modules would probably be quicker to compile as they are smaller than WAR-projects, but I'm afraid my modules would become larger anyway over time. Build times are now initially already ~3-4 seconds with only 1-2 classes and couple of JSP, and this without any cross-references / (model)relations between modules. In 6.2 you don't have to wait more than few seconds for hotswap / hotdeployment and even less (tad over 1 second) when working with static files (JSP / JS / CSS).

... but what are you saying on the last line? Have you found some workaround for OSGI / WAR projects recompilation on Eclipse (when working with LR7)? Or are you saying that you simply get to choose when you want to compile (== trigger compilation manually)? It's extremely frustrating when every single ctrl+s triggers recompilation, as that's how I have worked for the last 15 years, and even more frustrating that this problem remains when working with static files which shouldn't even need compiling. I would be fine with "ultimate final deployment" which would wrap everything up with 3min compilation, but those 3-20sec interruptions 100 times a day are killing me.

Additional question 1)
I'm bit worried also by suggestions I have already seen. Someone mentioned that there is already OSGI-watcher plugin which would do the monitoring for auto-compilation for me. When I asked isn't that simply the same feature as the auto-deployment in LR IDE I got "Don't know as I don't use LR IDE"... what the heck, is LR community really so divided that advanced developers are not even touching LR IDE, or how should I read this? (Minhchau Dang, I believe this person was someone else from OSGI-watcher team? I just remember having this response in slack)

Maybe OSGI-watcher could be an answer. I simply haven't got to try it yet, but I'm bit baffled by description of it and how it doesn't seem to be something which should support LR IDE process?

[6年前 に Gregory Amerson によって更新されました。]

Janne Lepola:

Tobias Liefke:

@Janne: Are only interested in starting the build process when a file has changed outside of Eclipse?

I'll have to check this property, but my main problem isn't that it's not building automatically. That's part of the problem, as the page doesn't refresh. Say, you have a coding error in JS (missing colon or such) which I would like to fix with some other editor. Saving the fix doesn't trigger hotswap/hotdeploy for that file (on 6.2) as it does on Liferay IDE, not until I have refreshed correct folder with F5 from LR IDE. This leads to a problem that LR IDE is out-of-sync with edited files and external plugins, such as GIT-plugin, are unaware of what should be staged.

Tobias Liefke:

It's frustrating to make a small change and wait for the build process / redeployment to finish, which takes (depending on plugin type and dimension) up to a minute. If you refresh your page during "redeployment" of the plugin, you can't even see your theme resp. portlets because the previous version is stopped first. If you make a change to a class of a portlet plugin - which often enough is immediately applied with the "hotswap"-feature of the JVM - there is even no need to redeploy the plugin. But it is redeployed anyway and you have to wait...

A reason for me to drop the Liferay-IDE and use a plain Eclipse instead.

Exactly the problem I'm having. OSGI modules would probably be quicker to compile as they are smaller than WAR-projects, but I'm afraid my modules would become larger anyway over time. Build times are now initially already ~3-4 seconds with only 1-2 classes and couple of JSP, and this without any cross-references / (model)relations between modules. In 6.2 you don't have to wait more than few seconds for hotswap / hotdeployment and even less (tad over 1 second) when working with static files (JSP / JS / CSS).

... but what are you saying on the last line? Have you found some workaround for OSGI / WAR projects recompilation on Eclipse (when working with LR7)? Or are you saying that you simply get to choose when you want to compile (== trigger compilation manually)? It's extremely frustrating when every single ctrl+s triggers recompilation, as that's how I have worked for the last 15 years, and even more frustrating that this problem remains when working with static files which shouldn't even need compiling. I would be fine with "ultimate final deployment" which would wrap everything up with 3min compilation, but those 3-20sec interruptions 100 times a day are killing me.

Additional question 1)
I'm bit worried also by suggestions I have already seen. Someone mentioned that there is already OSGI-watcher plugin which would do the monitoring for auto-compilation for me. When I asked isn't that simply the same feature as the auto-deployment in LR IDE I got "Don't know as I don't use LR IDE"... what the heck, is LR community really so divided that advanced developers are not even touching LR IDE, or how should I read this? (Minhchau Dang, I believe this person was someone else from OSGI-watcher team? I just remember having this response in slack)

Maybe OSGI-watcher could be an answer. I simply haven't got to try it yet, but I'm bit baffled by description of it and how it doesn't seem to be something which should support LR IDE process?

Hey Janne Lepola if you could share some sample project that you are seeing the unacceptably slow rebuild times for a single static file change. could you share it with me? We have not tried to optimize the development/build/deploy loop as of yet and it obviously could use some optimizations. One thing we are investigated for next release is an exploded OSGi/jar/bundle install, where static files would not constitute a complete rebuild and redeploy of the osgi bundle.

So clear up your other confusion, many people inside of Liferay have switched over to IntelliJ for their day-to-day development, and thus don't use Eclipse with Liferay IDE plugins. Its a fact of life as Eclipse platform is suffering from tragedy of the commons.

The good news is there is some new life being breathed into the platform recently (Redhat committers on core platform/ui) that are trying to move Eclipse faster to try to slow the loss of users to non-eclipse platforms.

[6年前 に Janne Lepola によって更新されました。]

Thanks for pointing out this community & IntelliJ -scheme. It's something I was unaware.

The fact is that my skills on LR are limited after one year. I have worked with multiple different languages and frameworks, but I have found LR being the hardest one to understand, be it framework itself or it's development tools. As I don't have colleges with any better understanding over the subject to lean against I'm struggling with using same toolkit setup as they have over the years. In my opinion whole development process is subgrade due to multiple problems (some which have been discussed on this thread) and it's killing me from time to time. I finally got stable LR 6.2 process which starts tomcat in 60secs and redeploys quite fast, but now that the process is finally working we are already looking forward for LR 7.0, which would force rewriting/-arraging most of our code and takes huge steps back when it comes to development-process (those deployment delays etc).

... just trying to understand what I'm doing wrong

As I previously described, it seems to me that minor OSGI-module is painfully slow when it has only the skeleton structure... couple of CSS's, couple of simple JSP's and few java classes, no more than hundred or so lines each. This already takes ~5-6 seconds whenever I hit ctrl+s. It seems to build the whole OSGI-module & compile CSS files etc, finally dropping the package to deployment folder... so I'm afraid this will atleast double if amount of code and files triple and that's something I'm not willing to live up to.

At the time I don't have sample project to share, but that's something I'v been planning for a while as I have need for it on other R&D discussion (which is kind of brainstorming over what's-the-best-architectural-approach when rewriting project to OSGI-modules). That would be a starting point for sample project which could also pinpoint those delays... but really, anything over 5 secs is too much for me (that's what you get when you have worked with script-languages for most of your life)

[6年前 に Tobias Liefke によって更新されました。]

Janne Lepola:

I'll have to check this property, but my main problem isn't that it's not building automatically. That's part of the problem, as the page doesn't refresh. Say, you have a coding error in JS (missing colon or such) which I would like to fix with some other editor. Saving the fix doesn't trigger hotswap/hotdeploy for that file (on 6.2) as it does on Liferay IDE, not until I have refreshed correct folder with F5 from LR IDE. This leads to a problem that LR IDE is out-of-sync with edited files and external plugins, such as GIT-plugin, are unaware of what should be staged.

The mentioned switch is an "automatic F5" - so I guess that is the thing you were looking for in your initial question.

Janne Lepola:

Or are you saying that you simply get to choose when you want to compile (== trigger compilation manually)?

That is what I did first - especially for portlet projects it is not far away from 6.2 development, where I had to restart the module manually as well for class structure or deployment descriptor changes - the other things are replaced using hotswap of the JVM.

But now I had to use the old WAR style deployment for using features of the JEE application server in Liferay 7 anyway, so I use that deployment structure for the themes as well. I had to patch some files which have already some problems with that deployment structure, and I guess for Liferay 8 and for other Liferay projects I'll need another strategy, but for now the effort is not the same as when I rewrite the whole application and wait always for the deployment cycle to finish.

[6年前 に Christoph Rabel によって更新されました。]

We use webpack and have configured a webpack dev server with hot reload. It's quite nice. You put the browser window on one monitor, the editor window on the second monitor. When you click save, the page is automatically updated without the need to click anything.

The following example is a good starting point. Hot deploy is easily fixable and when you add things like autoprefixer, uglify, chunkexractor it really becomes a powerhouse.
https://github.com/bryceosterhaus/react-portlet/tree/master/todo-app-webpack

It's a really fast way to develop css and javascript.

When you develop the theme, you can use "gulp watch" to start gulp-livereload with the same effect. The browser automatically reloads. But you either need to install the live reload extension or add some javascript code to your theme that handles the live reload.

[6年前 に Janne Lepola によって更新されました。]

Christoph Rabel:

We use webpack and have configured a webpack dev server with hot reload. It's quite nice. You put the browser window on one monitor, the editor window on the second monitor. When you click save, the page is automatically updated without the need to click anything.

I know (at least the basics of) how node & webpack work and that's something I'm intrigued by, but what I don't understand is how do you sync Liferay project with webpack?

My basic structure in 6.2 is that I have controller which passes few variables, such as global translations as JSON-object, few ID's and probably few objects, to JSP. In JSP I use Liferay tag-generators to generate links, and also match those objects to JS-object tree. Then I simply load vue-scripts and templates, where I develope all the html/css/js. As I use http-vue-loader, I'm able to load those VUE files "raw" within browser and there is no need for compiling .vue files, so those files are static.

All good? Well, here is where it gets tricky for me. When I save *anything*, LR IDE starts hotdeploying/swapping the static files. This is somewhat fine for me as the delay is only a second or two. Static files are simply duplicated to webapps/ -folder.

Now in LR7 I started trying out OSGI module -developement, but very soon I noticed that whenever anything is saved it will cause autocompiling of that module, which takes anything between 5-20 seconds. I already asked how could I swap back to way the static files are preserved in tomcat, but already got answer "you can't, that's not supported anymore"... so here is the beef: How do you sync external webpack development with LR & Tomcat?

Do you use two servers for different purposes, such as LR for backend logic and node for frontend? That would be ok solution for me, but this raises questions on how can you mix LR frontend code & tag-libraries with code made with node & webpack? Or if that's not they way, then how do you mix webpack and LR together? I haven't found any articles on this, and It's something I'm interested in as it would allow using modern precompilable languages and libraries together?

... and still, if you integrate LR IDE with webpack, how do you get around that evil ctrl+s -> auto-compile + deploy process, especially if running static files under Tomcat isn't supported anymore?

[6年前 に Janne Lepola によって更新されました。]

... additionally, ideally I would love to do clean separation of concerns between UI and backend-layers. In LR development I'm having two clear problems:

- how to mix "clean" UI (welll, JS-modules/applications) with existing LR layout. Communication via REST (for configurations etc) ain't problem, but currently I'm relying to tag-lib link generation.
- ... and how to inject UI-development between LR IDE (or anything similar) and Tomcat. I really don't have experience on Tomcat and on 6.2 I understood that you could simply duplicate files from project-folder to webapps and it would run 'em, kind of a way the Apache + PHP works, but this has been apparently discontinued as of LR 7 and OSGI-modules. If there is a solution how to force OSGI-modules to use JS files directly from Tomcat I would love to see an article or step-by-step instructions, as it would allow me to build my own deployment process for UI-files.

Edit:

I just read the react-example you gave and here is something I don't get (quote from instructions):

3.Install webpack via npm and then we need to configure our webpack.config.js so that we can properly build our application when we call blade deploy.
4.Now that we have webpack configured, we need to make sure it gets called when we deploy the module.

Lines clearly state "when is deployed". As I'm talking about LR 7 and OSGI-modules, isn't there a mandatory repacking of that module before deployment? That to me seems like the snail-phase of the process on LR IDE ("ctrl+s" -> recompile -> deploy)... or is there a way to skip this phase and force build.js to be directly deployed to tomcat and let OSGI-module to refer to it?

[6年前 に Christoph Rabel によって更新されました。]

I know (at least the basics of) how node & webpack work and that's something I'm intrigued by, but what I don't understand is how do you sync Liferay project with webpack?
...
All good? Well, here is where it gets tricky for me. When I save *anything*, LR IDE starts hotdeploying/swapping the static files. This is somewhat fine for me as the delay is only a second or two. Static files are simply duplicated to webapps/ -folder.

Well, we are using this approach only with Liferay 7 projects so far. There the whole build process is different and Liferay has an amd loader, so it works rather swell with webpack without further ado.

But:
We actually circumvent Liferay for js/css. We have placed all our "true" js&css files into an extra folder. During development the plugin never realizes that we change something. Only Java/JSP changes cause a rebuild and an actual deployment.

The first version of our webpack.config.js copied the generated files to the js/css folders in the project. The current version even doesn't do that anymore and just injects the js/css files into the build folder. That works without issues with Liferay 7 module projects, not sure if this is feasible with 6.2, we never tried it. The build process in LR7 is far more flexible.

So, the js/css files are created (transpiled, autoprefixed, minified, ...) and then deployed. But that's only happening quite seldom.

While developing, the generated js/css files only exist virtually in the webpack dev server. And they are delivered from there. You change the css file, the dev server picks the change up and delivers the new version. "Liferay" never realizes that there is a new version, it is never deployed.


So, in the end:
Production: All files are delivered from tomcat.
Development: Our js/css files are delivered from webpack dev server, all other files are delivered from Tomcat.