Blogs

If you’ve ever heard me talk about building single-page apps inside Liferay, chances are good you’ve also heard me discourage the use of things like React’s <HashRouter>. It’s not that I have anything against hash routing in general — in fact, it works quite well for many standalone apps. But the problem is that Liferay owns the address bar. That means when multiple apps try to...

Introduction So anyone who knows me can tell you that I'm a huge fan of Custom Elements, especially when used with Liferay Objects. I prefer to use React for creating the front end and Objects for the persistence layer and, if necessary, some backend CX to complete the picture with integration, notification, and other types of automated requirements. Using these...

As of LPD-48372, the amd-loader has officially been deprecated in Liferay DXP. That means it’s no longer enabled by default—and with that, so ends the era of liferay-npm-bundler and amd-loader. But don’t worry. Taking advantage of Browser modules and migrating to standard JavaScript tooling like esbuild, webpack, or vite is not only doable, it’s refreshingly simple. In this post,...

Well, we've done it! We've updated finally from React 16 to React 18 at the portal level. In DXP 2025.Q1 and CE GA 134*, Liferay is no longer going to be based on React 16. This is significant since React 16 was first released in 2017, so we were pretty far behind on an update there. Granted React 18 was released in 2022, so it's really only about 2 years behind, but there was...

In my last blog, Creating a React Client Extension, I basically built a React-based SPA that was hosted on Liferay. And I got to thinking that we really aren't sharing just how great Liferay is to host Javascript-based SPAs in any framework, be it React, Angular, Vue.js or others. So I thought I'd take some time to share with Javascript developers some reasons why...

Introduction So I've been working on my Objects Rule! series and have been working on an app I plan on showing off soon, but I realized that there is probably a gap explaining, well, how do you get started? I mean, it's one thing to go and check the client extensions sample repo here: https://github.com/liferay/liferay-portal/tree/master/workspaces/liferay-sample-workspace,...

Introduction In a recent blog, Intro to Liferay Objects, I created a new application for the Masterclass site for submitting and approving course registrations entirely using OOTB features of Liferay, specifically Objects for the data store, and Fragments for the presentation (form fragments and collection display fragments and Masterclass fragments). This approach...

Introduction Liferay development has been changing throughout the years with its different versions. With 6.x we had WAR portlets. 7.0 came along and with it OSGi modules were the norm. And now, 7.4 has brought something completely new: Remote Apps. You can check this other blog and the official documentation for a thorough explanation about Remote Apps.   So, what...

Introducción El desarrollo en Liferay ha ido cambiando a lo largo de los años con sus distintas versiones. Con las versiones 6.x teníamos los portlets de tipo WAR. Cuando llegó la versión 7.0 los módulos OSGi pasaron a ser el estándar. Y ahora, 7.4 nos ha traído algo totalmente nuevo: Remote APPs. Si queréis una explicación más detallada sobre Remote Apps podéis echar un...

In a native React application, it is common that you have the CSS separated by components like I said here, actually maybe you want to use a separate SCSS to take advantage from SASS. So to do it in a Liferay React Application, we need to do some configurations.  Why?  We are working a Structure of OSGi Bundles Containing NPM Packages wrapper by Portlet Component, for this reason,...

When we generate a React Widget project for Liferay DXP from Yeoman (liferay-js template), you can see, in the scaffolding, we have the CSS file in assets/css folder with the style.css file (set to load on our portlet-header, in the package.json).  It is common, in a native React application to have the CSS separated by components. So to have the CSS separated by components in a Liferay...

A really quick post to share something important with you React + Clay developers out there... A recent update to Clay had a breaking internal change. If after deploying your React portlet and you try to place it on the page and you get errors in the JS console like: liferay-amd-loader | Errors returned from server for require( ["my-module@1.0.0"] ): "Missing dependency...

IMPORTANT: this blog post was done with Liferay Portal version 7.4.1 GA 2, which you can use as your guide, but you need to adapt to your own version (CartItem.js file and dependencies from .npmbundlerrc and package.json if needed).  NOTICE: This blog  post has Spanish and English version. When you start to build an e-commerce website...

Introduction A client asked me to build a React portlet for them and I was like, "Oh Yeah!" I mean, it's been a while since I built a React portlet and tooling has really changed a lot since then, so I was really looking forward to this new task. So without further ado, I'm just going to dive right in... Creating the Module Okay, so this is still Liferay and still OSGi, so we're going to be...

When we generate some NPM modules from generator-liferay-js, you should see that the generated (.jar) module is a "bit heavy".  In the case of the React Liferay module it is not as much as the Angular Liferay module (posted here). However, let's say we want to work with a few modules of this type and instance them on one page. This could cause some problems: 1. Loss of...